Super-Badmen-Viper / NSMusicS

NSMusicS,Multi platform Multi mode Music Software ,Electron(Vue3+Vite+TypeScript)+.net core+AI
GNU Affero General Public License v3.0
705 stars 37 forks source link

{开源,共建}歌词字同步算法中的UI及后端算法优化,减少性能开销,(算法版本当前为LrcLinearAnimationMrc,迭代为ByteAnimationMrc可解决,我已提供ByteAnimationMrc的思路,等待你的解决) #1

Closed Super-Badmen-Viper closed 10 months ago

Super-Badmen-Viper commented 1 year ago

TextBlock中的Text内容如包括不同的字体(例如中文+韩文),UI渐变效果的起点将会不从歌词行起点开始,而是从各自字体的首字位置分别开始 使用LinearGradientBrush运用在TextBlock中的Foreground,当TextBlock的Text含有韩文和中文时,LinearGradientBrush渐变的动画起点会从设置的歌词行X:-0.5 Y:0 起点变成 各自字体的首字位置分别开始。 将LinearGradientBrush中的MappingMode设置为"Absolute",依然解决不了动画渐变的起点问题,这是语言字体不同导致的

相关代码:

    <TextBlock x:Name="TextBlock_1"  HorizontalAlignment="Center" Text="科技源于生活,技术源于创新" 
                FontSize="36" Height="68" IsEnabled="False" FontWeight="Bold" VerticalAlignment="Top" >
        <TextBlock.Triggers>
            <EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown">
                <BeginStoryboard>
                    <Storyboard x:Name="Text_Storyboard">
                        <DoubleAnimationUsingKeyFrames x:Name="Text_DoubleAnimation"
                                        Duration="0:0:6"
                                        Storyboard.TargetName="Trans" Storyboard.TargetProperty="X"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </TextBlock.Triggers>
        <TextBlock.Foreground>
            <LinearGradientBrush EndPoint="1,0" StartPoint="0,0">
                <LinearGradientBrush.RelativeTransform>
                    <TranslateTransform X="-0.5" x:Name="Trans"/>
                </LinearGradientBrush.RelativeTransform>
                <GradientStop Color="#FF00FFA2" Offset="0.49"/>
                <GradientStop Color="#FFF99F00" Offset="0.51"/>
            </LinearGradientBrush>
        </TextBlock.Foreground>
        ....
    </TextBlock>

Bug截图: image image

解决方案: 1.继续优化现有的UI机制LrcLinearAnimationMrc,将不同的语言字体融合为同一通用字体 2.算法与UI迭代升级为ByteAnimationMrc:假设歌词行含有10个字符,10个字符使用10个TextBlock分别存储,将每个TextBlock都设置当前字符的同步时间,触发第一个TextBlock的动画,将第一个TextBlock的动画complete事件设置为触发第二个TextBlock的动画,以此类推通过递归绑定动画complete事件算法,实现几乎100%的歌词字同步算法效果,同步每一个字符的歌词演唱进度,也解决了歌词同步动画渐变的起点问题

PS: So,哪位老哥来实现这个ByteAnimationMrc[doge],我之前已经实现了这个方案的95%,卡在了动画绑定这最后一步上,我最近有其他的事情要解决,所以我暂时不能继续接下来的ByteAnimationMrc工作,交给你们了[doge]

Super-Badmen-Viper commented 10 months ago

歌词逐字算法已升级完毕为Plus版本,将兼容所有的字体,且能达到和腾讯逐字算法同样的UI同步率 后续将开发 逐字歌词AI生成模型 ,用以歌词文件的来源