c# - 使用 WPF Storyboard从顺时针模式顺利过渡到逆时针模式

Question

编辑:项目可以从here下载.

我正在使用 WPF Storyboard 为地球旋转制作动画，我希望能够在用户单击按钮时将旋转从顺时针方向反转为逆时针方向(反之亦然)，尽管实际上这永远不会发生。

在我的 XAML 文件中，我声明了 21 个位图图像(第一个和最后一个是相同的)和 2 个 Storyboard，一个用于顺时针旋转，另一个用于逆时针旋转。

<Window x:Class="StackOverflowWPF.StoryboardSeekWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="StoryboardSeekWindow" Height="400" Width="400">
<Window.Resources>
    <BitmapImage x:Key="RotationImage0" UriSource="Images\rotation\0.png"/>
    <BitmapImage x:Key="RotationImage1" UriSource="Images\rotation\1.png"/>
    <BitmapImage x:Key="RotationImage2" UriSource="Images\rotation\2.png"/>
    <BitmapImage x:Key="RotationImage3" UriSource="Images\rotation\3.png"/>
    <BitmapImage x:Key="RotationImage4" UriSource="Images\rotation\4.png"/>
    <BitmapImage x:Key="RotationImage5" UriSource="Images\rotation\5.png"/>
    <BitmapImage x:Key="RotationImage6" UriSource="Images\rotation\6.png"/>
    <BitmapImage x:Key="RotationImage7" UriSource="Images\rotation\7.png"/>
    <BitmapImage x:Key="RotationImage8" UriSource="Images\rotation\8.png"/>
    <BitmapImage x:Key="RotationImage9" UriSource="Images\rotation\9.png"/>
    <BitmapImage x:Key="RotationImage10" UriSource="Images\rotation\10.png"/>
    <BitmapImage x:Key="RotationImage11" UriSource="Images\rotation\11.png"/>
    <BitmapImage x:Key="RotationImage12" UriSource="Images\rotation\12.png"/>
    <BitmapImage x:Key="RotationImage13" UriSource="Images\rotation\13.png"/>
    <BitmapImage x:Key="RotationImage14" UriSource="Images\rotation\14.png"/>
    <BitmapImage x:Key="RotationImage15" UriSource="Images\rotation\15.png"/>
    <BitmapImage x:Key="RotationImage16" UriSource="Images\rotation\16.png"/>
    <BitmapImage x:Key="RotationImage17" UriSource="Images\rotation\17.png"/>
    <BitmapImage x:Key="RotationImage18" UriSource="Images\rotation\18.png"/>
    <BitmapImage x:Key="RotationImage19" UriSource="Images\rotation\19.png"/>
    <BitmapImage x:Key="RotationImage20" UriSource="Images\rotation\20.png"/>
    <Storyboard x:Key="clockwiseStoryboard" RepeatBehavior="Forever">
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="imgRotatingEarth" Storyboard.TargetProperty="Source">
            <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="{Binding Source={StaticResource RotationImage0}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{Binding Source={StaticResource RotationImage1}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:0.4" Value="{Binding Source={StaticResource RotationImage2}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:0.6" Value="{Binding Source={StaticResource RotationImage3}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:0.8" Value="{Binding Source={StaticResource RotationImage4}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:1.0" Value="{Binding Source={StaticResource RotationImage5}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:1.2" Value="{Binding Source={StaticResource RotationImage6}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:1.4" Value="{Binding Source={StaticResource RotationImage7}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:1.6" Value="{Binding Source={StaticResource RotationImage8}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:1.8" Value="{Binding Source={StaticResource RotationImage9}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:2.0" Value="{Binding Source={StaticResource RotationImage10}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:2.2" Value="{Binding Source={StaticResource RotationImage11}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:2.4" Value="{Binding Source={StaticResource RotationImage12}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:2.6" Value="{Binding Source={StaticResource RotationImage13}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:2.8" Value="{Binding Source={StaticResource RotationImage14}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:3.0" Value="{Binding Source={StaticResource RotationImage15}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:3.2" Value="{Binding Source={StaticResource RotationImage16}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:3.4" Value="{Binding Source={StaticResource RotationImage17}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:3.6" Value="{Binding Source={StaticResource RotationImage18}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:3.8" Value="{Binding Source={StaticResource RotationImage19}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:4.0" Value="{Binding Source={StaticResource RotationImage20}}"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>

    <Storyboard x:Key="counterClockwiseStoryboard" RepeatBehavior="Forever">
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="imgRotatingEarth" Storyboard.TargetProperty="Source">
            <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="{Binding Source={StaticResource RotationImage20}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{Binding Source={StaticResource RotationImage19}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:0.4" Value="{Binding Source={StaticResource RotationImage18}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:0.6" Value="{Binding Source={StaticResource RotationImage17}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:0.8" Value="{Binding Source={StaticResource RotationImage16}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:1.0" Value="{Binding Source={StaticResource RotationImage15}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:1.2" Value="{Binding Source={StaticResource RotationImage14}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:1.4" Value="{Binding Source={StaticResource RotationImage13}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:1.6" Value="{Binding Source={StaticResource RotationImage12}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:1.8" Value="{Binding Source={StaticResource RotationImage11}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:2.0" Value="{Binding Source={StaticResource RotationImage10}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:2.2" Value="{Binding Source={StaticResource RotationImage9}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:2.4" Value="{Binding Source={StaticResource RotationImage8}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:2.6" Value="{Binding Source={StaticResource RotationImage7}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:2.8" Value="{Binding Source={StaticResource RotationImage6}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:3.0" Value="{Binding Source={StaticResource RotationImage5}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:3.2" Value="{Binding Source={StaticResource RotationImage4}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:3.4" Value="{Binding Source={StaticResource RotationImage3}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:3.6" Value="{Binding Source={StaticResource RotationImage2}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:3.8" Value="{Binding Source={StaticResource RotationImage1}}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:4.0" Value="{Binding Source={StaticResource RotationImage0}}"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>
<Grid>
    <Image x:Name="imgRotatingEarth" HorizontalAlignment="Center" Margin="50" Stretch="Uniform" />

    <Button VerticalAlignment="Bottom" Content="Reverse" Height="30" Width="100" Click="reverseButton_Click" />
</Grid>

还有我的代码隐藏文件

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Windows.Media.Animation;

namespace StackOverflowWPF
{
    /// <summary>
    /// Interaction logic for StoryboardSeekWindow.xaml
    /// </summary>
    public partial class StoryboardSeekWindow : Window
    {
        Storyboard clockwiseStoryboard;
        Storyboard counterClockwiseStoryboard;
        bool bRotateClockwisely;
        TimeSpan duration = new TimeSpan(0, 0, 4);
        double dProgress = 0; //the value of dProgress is from 0.0 (begin) to 1.0 (end)

        public StoryboardSeekWindow()
        {
            InitializeComponent();
            clockwiseStoryboard = this.FindResource("clockwiseStoryboard") as Storyboard;
            counterClockwiseStoryboard = this.FindResource("counterClockwiseStoryboard") as Storyboard;
            StartRotation();
        }

        private void StartRotation()
        {
            counterClockwiseStoryboard.Begin();
            counterClockwiseStoryboard.Pause();

            clockwiseStoryboard.Begin();

            bRotateClockwisely = true;
        }

        private void reverseButton_Click(object sender, RoutedEventArgs e)
        {
            Storyboard sbActive = bRotateClockwisely ? clockwiseStoryboard : counterClockwiseStoryboard;
            Storyboard sbPaused = bRotateClockwisely ? counterClockwiseStoryboard : clockwiseStoryboard;

            sbActive.Pause();

            //I want the other storyboard can seek to where the animation is paused.
            dProgress = sbActive.GetCurrentProgress();
            dProgress = 1.0 - dProgress;
            sbPaused.Seek(new TimeSpan((long)(duration.Ticks * dProgress)));

            sbPaused.Resume();

            bRotateClockwisely = !bRotateClockwisely;            
        }
    }
}

为了从顺时针模式平滑过渡到逆时针模式，我暂停事件动画并计算我在哪一帧，当恢复反向动画时，我首先寻找该帧。换句话说，我要达到的效果。

0.png->1.png->2.png->3.png->4.png->5.png->用户点击按钮->5.png-> 4.png->3.png->2.png->1.png->0.png->...

但是我的代码不起作用。 Storyboard.Seek() 似乎在工作，但它并没有开始反向旋转。我认为运行 2 个 Storyboard来操作同一个对象可能是错误的。

有人可以帮我修复这些错误，也许可以提供更好的想法来达到同样的效果吗？

Answer 1

你可能在这里用所有这些图像“找错了树”……试试这样的东西怎么样？

<BitmapImage x:Key="RotationImage0" UriSource="Images\rotation\0.png">
    <BitmapImage.RenderTransform>
        <RotateTransform x:Name="RotateTransform" CenterX="50" CenterY="50" Angle="0" />
    </BitmapImage.RenderTransform>
</BitmapImage>
<BitmapImage.Style>
    <Style>
        <Style.Triggers>
            <DataTrigger Binding="{Binding IsLoading, Mode=OneWay}" Value="True">
                <Setter Property="Control.Visibility" Value="Visible" />
                <DataTrigger.EnterActions>
                    <StopStoryboard BeginStoryboardName="ReverseRotationStoryboard" />
                    <BeginStoryboard Name="RotationStoryboard">
                        <Storyboard RepeatBehavior="Forever">
                            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.
(RotateTransform.Angle)" From="0" To="360" Duration="0:0:2.0" />
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
                <DataTrigger.ExitActions>
                    <StopStoryboard BeginStoryboardName="RotationStoryboard" />
                    <BeginStoryboard Name="ReverseRotationStoryboard">
                        <Storyboard RepeatBehavior="Forever">
                            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.
(RotateTransform.Angle)" From="360" To="0" Duration="0:0:2.0" />
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.ExitActions>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</BitmapImage.Style>

如果您在动画中需要不同的“步骤”，您可以将上面的 DoubleAnimation 替换为以下内容:

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RenderTransform.
(RotateTransform.Angle)" Duration="0:0:0.9">
    <DiscreteDoubleKeyFrame Value="0" KeyTime="0:0:0" />
    <DiscreteDoubleKeyFrame Value="30" KeyTime="0:0:0.075" />
    <DiscreteDoubleKeyFrame Value="60" KeyTime="0:0:0.150" />
    ...
    <DiscreteDoubleKeyFrame Value="330" KeyTime="0:0:0.825" />
</DoubleAnimationUsingKeyFrames>

这基本上是通过绑定(bind)到名为 IsLoading 的 Boolean 属性(改编 self 的程序)来实现的。您可以随意调用您的属性，但我们的想法是将其设置为 false 以反转 Animation 的方向。我相信您将能够根据用户的 Click 设置此属性。

请注意 DataTrigger.EnterActions 部分中的 Storyboard...这发生在属性“变为”true 时。现在查看 DataTrigger.ExitActions 部分中的 Storyboard...当属性不再为 true 或“变为”假。