Storyboard的使用问题

[漂云GG]

在做一个软件里图片自动播放的功能，打算用Storyboard来实现淡入淡出效果。想法是用两个Image来显示图片，通过后台替补图片，然后设置Image透明度的方式来实现“播放”功能。在播放的过程中，用Storyboard来做淡入淡出效果。看了一天的例子，还是不太怎么在我的代码里面嵌入Storyboard。
Storyboard代码

     Storyboard playStory = new Storyboard();
     DoubleAnimation playAnimation = new DoubleAnimation();
     Storyboard.SetTargetProperty(playAnimation, Opacity.ToString());
     playAnimation.From = 1;
     playAnimation.To = 0;
     playAnimation.Duration = TimeSpan.FromSeconds(2);
     playStory.RepeatBehavior = RepeatBehavior.Forever;

图片替换代码

            bool isNext = true;
            foreach (var item in playList)
            {
                if (isNext)
                {
                    isNext = false;
                    NextPicture.Source = item;
                    // Storyboard.SetTargetName(playAnimation, StartPicture.Name.ToString());
                    NextPicture.Opacity = 1;
                }
                else
                {
                    isNext = true;
                    StartPicture.Source = item;
                    // Storyboard.SetTargetName(playAnimation, NextPicture.Name.ToString());
                    StartPicture.Opacity = 1;
                }
            }

[vbfool]

其实一个Image控件就够了，Storyboard支持更改Source属性的。 Storyboard.SetTargetProperty(playAnimation, Opacity.ToString()); 这句应该是 Storyboard.SetTargetProperty(playAnimation, "Opacity"); 还有要加上 Storyboard.SetTarget(playAnimation,NextPicture); 最后，用playStory.Begin()方法

[漂云GG]

Storyboard代码

<Page.Resources>   
        <Storyboard x:Name="playStoryboard">
            <DoubleAnimation x:Name="hideAnimation" Storyboard.TargetProperty="Opacity"
                             From="1" To="0" Duration="0:0:2" BeginTime="0:0:0">                
            </DoubleAnimation>
            <DoubleAnimation x:Name="showAnimation" Storyboard.TargetProperty="Opacity"
                             From="0" To="1" Duration="0:0:2" BeginTime="0:0:0">
            </DoubleAnimation>
            <DoubleAnimation x:Name="stateAnimation" Storyboard.TargetProperty="Opacity"
                             From="0" To="0" BeginTime="0:0:2" Duration="0:0:3">
            </DoubleAnimation>
        </Storyboard>
</Page.Resources>   

使用到的Image控件

        <Image Name="StatePicture" Visibility="Collapsed"></Image>
        <Image Name="NextPicture"></Image>
        <Image Name="StartPicture"></Image>

动画完成事件

            playStoryboard.Completed += (s, e) =>
            {
                playStoryboard.Stop();
                currIndex = (currIndex + 1) % playList.Count;
                if (isNext)
                {
                    // Storyboard停止后，会恢复到动画播放前状态，需在此“固定”动画结束状态
                    NextPicture.Opacity = 1;
                    StartPicture.Opacity = 0;

                    StartPicture.Source = playList[currIndex];
                    Storyboard.SetTarget(showAnimation, StartPicture);
                    Storyboard.SetTarget(hideAnimation, NextPicture);
                    Storyboard.SetTarget(stateAnimation, StatePicture);
                    isNext = false;
                }
                else
                {
                    // Storyboard停止后，会恢复到动画播放前状态，需在此“固定”动画结束状态
                    StartPicture.Opacity = 1;
                    NextPicture.Opacity = 0;

                    NextPicture.Source = playList[currIndex];
                    Storyboard.SetTarget(showAnimation, NextPicture);
                    Storyboard.SetTarget(hideAnimation, StartPicture);
                    Storyboard.SetTarget(stateAnimation, StatePicture);
                    isNext = true;
                }
                playStoryboard.Begin();
            };

动画开始暂停控制

        private void playPauseBtn_Click(object sender, RoutedEventArgs e)
        {
            if (isPlaying)
            {
                // 按键图标
                playPauseImg.Source = new BitmapImage(new Uri("ms-appx://" + "/Assets/Pause.png"));
                isPlaying = false;

                if(isPause)
                {
                    playStoryboard.Resume();
                }
                else
                {  
                    NextPicture.Source = playList[currIndex];
                    Storyboard.SetTarget(showAnimation,     NextPicture);
                    Storyboard.SetTarget(hideAnimation,     StartPicture);
                    Storyboard.SetTarget(stateAnimation,    StatePicture);
                    isNext = true;
                    playStoryboard.Begin();
                }
            }
            else
            {
                // 按钮图标
                playPauseImg.Source = new BitmapImage(new Uri("ms-appx://" + "/Assets/Play.png"));
                isPlaying = true;

                playStoryboard.Pause();
                isPause = true;
            }
        }

[漂云GG]

效果如下： 1.当点下播放按钮后，“播放”图标变成“暂停”图标；动画立即开始播放。 2.动画效果： 动画开始：渐隐当前显示的图片同时渐显下一张图片，下一张图片显示完成后，停留3S（第三个不产生实际意义的动画，这个暂没想到什么办法去优化）。 动画结束：因动画结束时会恢复到开始前状态，因此需要“固定”一下结束状态。同时切换图片，切换动画和Image的绑定。重新开始动画。