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动画优化,需要减少性能开销 #4

Closed Super-Badmen-Viper closed 1 year ago

Super-Badmen-Viper commented 1 year ago

此多歌手写真轮播UI动画会占用大量系统资源,显示的歌手写真像素越大则卡顿几率越大,需要精简优化,或者替换性能更好更美观的UI动画 相关代码:(代码位置在MoZhiMusicPlayer/mainwindows.xaml.cs中3282行)

    ObjectAnimationUsingKeyFrames oa;
    ObjectAnimationUsingKeyFrames oa_2;
    private void BgSwitch(string imgPath)
    {
        oa = bgstoryboard.Children.FirstOrDefault(c => c is ObjectAnimationUsingKeyFrames) as ObjectAnimationUsingKeyFrames;
        oa.KeyFrames[0].Value = new BitmapImage(new Uri(imgPath));
    }
    Storyboard bgstoryboard = null;
    private void BgSwitchIni()
    {
        //动画占用过高CPU及GPU
        //此动画效果为渲染所有的像素,效率过低
        //应更改为     多区块渲染过渡 / 线性渲染过渡 / 淡化渲染过渡 / 模糊重叠过渡渲染
        DoubleAnimationUsingKeyFrames da = new DoubleAnimationUsingKeyFrames();
        EasingDoubleKeyFrame sd = new EasingDoubleKeyFrame(0, KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(200)));
        da.KeyFrames.Add(sd);
        Storyboard.SetTargetName(da, musicPlayer_Main_UserControl.Grid_down_Singer_Photo.Name);
        DependencyProperty[] propertyChain = new DependencyProperty[]
        {
                Panel.BackgroundProperty,
                Brush.OpacityProperty
        };
        Storyboard.SetTargetProperty(da, new PropertyPath("(0).(1)", propertyChain));

        ObjectAnimationUsingKeyFrames oa = new ObjectAnimationUsingKeyFrames();
        DiscreteObjectKeyFrame diso = new DiscreteObjectKeyFrame(new BitmapImage(new Uri(Path_App + @"\Button_Image_Ico\Space.png", UriKind.Absolute)), KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(10)));
        oa.KeyFrames.Add(diso);
        oa.BeginTime = new TimeSpan(0, 0, 0, 1, 0);
        Storyboard.SetTargetName(oa, musicPlayer_Main_UserControl.Grid_down_Singer_Photo.Name);
        DependencyProperty[] propertyChain2 = new DependencyProperty[]
        {
                Panel.BackgroundProperty,
                ImageBrush.ImageSourceProperty
        };
        Storyboard.SetTargetProperty(oa, new PropertyPath("(0).(1)", propertyChain2));

        DoubleAnimationUsingKeyFrames da2 = new DoubleAnimationUsingKeyFrames();
        da2.BeginTime = new TimeSpan(0, 0, 0, 1, 5);
        EasingDoubleKeyFrame sd2 = new EasingDoubleKeyFrame(1, KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(200)));
        da2.KeyFrames.Add(sd2);
        Storyboard.SetTargetName(da2, musicPlayer_Main_UserControl.Grid_down_Singer_Photo.Name);
        Storyboard.SetTargetProperty(da2, new PropertyPath("(0).(1)", propertyChain));

        bgstoryboard.Children.Add(da);
        bgstoryboard.Children.Add(oa);
        bgstoryboard.Children.Add(da2);
    }
Super-Badmen-Viper commented 1 year ago

我已将之前的歌手写真动画弃用,正在开发新的性能更好的UI动画,例如:将19201080的歌手写真,图片分割为44,再将4*4的图片多线程类似百叶窗的动画显示在ItemsControl,我已经完成了这个任务,目前正在测试有无其他的BUG

Super-Badmen-Viper commented 1 year ago

我已经完成了新的UI动画的工作,动画内容是将图片分割再组合
注意,它可以自定义分割的大小,默认是4 x 4(Columns*Rows) 生成16张照片,过大的参数则会造成卡顿,比如16 x 9会生成144张图片,源码没有添加异步所以大参数会卡顿 以下是可以更改的地方,我以后会将它设置在动画选择界面中供用户自定义
代码:

image

你可以提交新的写真切换UI动画,要求是性能较好占用资源较少,此问题将暂时关闭