3

编辑：项目可以从这里下载。

我正在使用 WPF Storyboard 为地球旋转设置动画，并且我希望在用户单击按钮时能够将旋转从顺时针反转为逆时针（反之亦然），尽管实际上这永远不会发生。

在此处输入图像描述

在我的 XAML 文件中，我声明了 21 个 BitmapImages（第一个和最后一个相同）和 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 个故事板来操作同一个对象时可能是错误的。

有人可以帮助我修复错误，并提供更好的想法来达到相同的效果吗？

4

2 回答 2

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>

这基本上通过绑定到一个Boolean名为IsLoading（改编自我的程序）的属性来工作。您可以随意调用您的属性，但想法是将其设置false为反转Animation. 我相信您将能够根据用户的Click.

请注意该Storyboard部分中的DataTrigger.EnterActions...这发生在属性 'becomes'true中。现在查看Storyboard该DataTrigger.ExitActions部分中的...当属性不再是true或 '变成'时会发生这种情况false。

于 2013-08-16T12:57:17.617 回答
1

我已经解决了我自己的问题：

如果当前 Storyboard 没有停止，则不会触发倒车动画。因此，与其暂停当前的故事板并恢复倒车的故事板，我应该停止当前的故事板并启动倒车的故事板。

Storyboard.Seek() 应该在它开始后被调用。如果情节提要尚未开始，则 Seek() 方法无效。

这就是代码现在的样子。

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


    //I want the other storyboard can seek to where the animation is paused.
    dProgress = sbActive.GetCurrentProgress();
    dProgress = 1.0 - dProgress;

    sbActive.Stop();           

    sbPaused.Begin();
    sbPaused.Seek(new TimeSpan((long)(duration.Ticks * dProgress)), TimeSeekOrigin.BeginTime);

    bRotateClockwisely = !bRotateClockwisely;            
}
于 2013-08-19T07:47:19.077 回答