WPF 和 UWP 中，不用设置 From 或 To，Storyboard 即拥有更灵活的动画控制-阿里云开发者社区

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

预览效果

下面是本文期望实现的基本效果：

在 WPF 中的动画效果
在 UWP 中的动画效果

预备代码

为了让读者能够最快速地搭建一个可供试验的 DEMO，我这里贴出界面部分核心代码。

XAML 是这样的（这里的 XAML，WPF 和 UWP 完全一样，可以互相使用而不用修改任何代码）：

布局部分

<GridBackground="White"><Grid.RowDefinitions><RowDefinitionHeight="Auto"/><RowDefinition/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions><ButtonGrid.Row="0"Grid.Column="0"Content="平移至随机位置"Click="BeginStoryboard_Click"/><ButtonGrid.Row="0"Grid.Column="1"Content="从随机位置平移"Click="BeginStoryboard2_Click"/><ButtonGrid.Row="0"Grid.Column="2"Content="暂停"Click="PauseStoryboard_Click"/><Canvasx:Name="DisplayCanvas"Grid.Row="1"Grid.Column="0"Grid.ColumnSpan="2"><Rectanglex:Name="DisplayShape"Fill="ForestGreen"Width="120"Height="40"><UIElement.RenderTransform><TranslateTransformx:Name="TranslateTransform"X="0"Y="0"/></UIElement.RenderTransform></Rectangle></Canvas></Grid>

资源部分

<Page.Resources><CircleEasex:Key="EasingFunction.Translate"EasingMode="EaseOut"/><!-- 为了方便使用，在 UWP 中加上了 x:Name；WPF 代码请删除 x:Name --><Storyboardx:Name="TranlateStoryboard"x:Key="Storyboard.Translate"><DoubleAnimationStoryboard.TargetName="TranslateTransform"Storyboard.TargetProperty="X"EasingFunction="{StaticResource EasingFunction.Translate}"/><DoubleAnimationStoryboard.TargetName="TranslateTransform"Storyboard.TargetProperty="Y"EasingFunction="{StaticResource EasingFunction.Translate}"/></Storyboard></Page.Resources>

.xaml.cs 文件中预备一些属性和字段方便使用：

#if !WINDOWS_UWP// 因为 WPF 不能在资源中指定 x:Name，所以需要在后台代码中手动查找动画资源。private Storyboard TranslateStoryboard => (Storyboard)FindResource("Storyboard.Translate");
#endifprivate DoubleAnimation TranslateXAnimation => (DoubleAnimation) TranslateStoryboard.Children[0];
private DoubleAnimation TranslateYAnimation => (DoubleAnimation) TranslateStoryboard.Children[1];
privatereadonly Random _random = new Random(DateTime.Now.Ticks.GetHashCode());
private Point NextRandomPosition()
    var areaX = (int) Math.Round(DisplayCanvas.ActualWidth - DisplayShape.ActualWidth);
    var areaY = (int) Math.Round(DisplayCanvas.ActualHeight - DisplayShape.ActualHeight);
    returnnew Point(_random.Next(areaX) + 1, _random.Next(areaY) + 1);
}

探索动画

由于我们期望元素从当前所在的位置开始动画，到我们指定的另一个随机位置，所以直接在 XAML 中指定 From 和 To 是一个艰难的行为。我们只好在 .xaml.cs 文件中指定。

WPF

在 WPF 中，如果我们没有指定动画的 From ，那么动画将从当前值开始；如果我们没有指定动画的 To ，那么动画将到当前值结束。从这个角度上说，似乎不设置 From 和 To 将导致动画保持在当前值不变，不会有动画效果。

但是，WPF 允许在动画进行中修改动画参数，于是我们可以直接开始动画，然后再动画进行中修改元素属性到目标值。

也就是说，可以这么写：

privatevoidBeginStoryboard_Click(object sender, RoutedEventArgs e)
    TranslateStoryboard.Begin();
    var nextPosition = NextRandomPosition();
    TranslateTransform.X = nextPosition.X;
    TranslateTransform.Y = nextPosition.Y;
}

快速点击这个按钮看看，你会发现每次点击都可以立即从当前位置开始向新的目标位置动画。

快速点击动画

不过你应该注意到了一个坑——第一次并没有播放动画，而是直接跳到了目标位置；这是因为动画还没有保持住元素的位置。我们需要在初始化的时候播放一次动画；

privatevoidOnLoaded(object sender, RoutedEventArgs e)
    TranslateStoryboard.Begin();
    TranslateStoryboard.Stop();
}

这样就解决了第一次动画不播放的问题。

现在，我们加上暂停按钮：

privatevoidPauseStoryboard_Click(object sender, RoutedEventArgs e)
    TranslateStoryboard.Pause();
}

即便是中途有暂停，依然能够继续让动画朝新的目标位置动画。

快速点击动画

如果我们希望动画从一个新的起点开始，而不是从当前状态开始，则只需要在动画开始之前设置元素的位置即可：

privatevoidBeginStoryboard2_Click(object sender, RoutedEventArgs e)
    MoveToRandomPosition();
    TranslateStoryboard.Begin();
    MoveToRandomPosition();
    void MoveToRandomPosition()
        var nextPosition = NextRandomPosition();
        TranslateTransform.X = nextPosition.X;
        TranslateTransform.Y = nextPosition.Y;
}

UWP

UWP 的情况就不如 WPF 那么灵活了。在 UWP 中，如果不给动画指定 To 值，那么动画根本就会直接朝 0 位置执行。

于是在动画执行之前，设置动画的 To 值不可避免：

privatevoidBeginStoryboard_Click(object sender, RoutedEventArgs e)
    AnimateToRandomPosition();
    TranslateStoryboard.Begin();
    void Uwp_AnimateToRandomPosition()
        var nextPosition = NextRandomPosition();
        TranslateXAnimation.To = nextPosition.X;
        TranslateYAnimation.To = nextPosition.Y;
}

在这样的写法下，灵活性与 WPF 相当，但 WPF 中支持在动画没有播放的时候随时设置元素位置，而这种方式则不行（其值会被动画保持）。

完整的后台代码

publicpartialclass StoryboardPage : Page
    publicStoryboardPage()
        InitializeComponent();
        Loaded += OnLoaded;
#if !WINDOWS_UWPprivate Storyboard TranslateStoryboard => (Storyboard)FindResource("Storyboard.Translate");
#endifprivate DoubleAnimation TranslateXAnimation => (DoubleAnimation) TranslateStoryboard.Children[0];
    private DoubleAnimation TranslateYAnimation => (DoubleAnimation) TranslateStoryboard.Children[1];
    privatereadonly Random _random = new Random(DateTime.Now.Ticks.GetHashCode());
    privatevoidOnLoaded(object sender, RoutedEventArgs e)
        Loaded -= OnLoaded;
        TranslateStoryboard.Begin();
        TranslateStoryboard.Stop();
    privatevoidBeginStoryboard_Click(object sender, RoutedEventArgs e)
        Uwp_AnimateToRandomPosition();
        TranslateStoryboard.Begin();
        MoveToRandomPosition();
    privatevoidBeginStoryboard2_Click(object sender, RoutedEventArgs e)
        MoveToRandomPosition();
        Uwp_AnimateToRandomPosition();
        TranslateStoryboard.Begin();
        MoveToRandomPosition();
    privatevoidPauseStoryboard_Click(object sender, RoutedEventArgs e)
        TranslateStoryboard.Pause();
    [Conditional("WINDOWS_UWP")]
    privatevoidUwp_AnimateToRandomPosition()
        var nextPosition = NextRandomPosition();
        TranslateXAnimation.To = nextPosition.X;
        TranslateYAnimation.To = nextPosition.Y;
    [Conditional("WPF")]
    privatevoidMoveToRandomPosition()
        var nextPosition = NextRandomPosition();
        TranslateTransform.X = nextPosition.X;
        TranslateTransform.Y = nextPosition.Y;
    private Point NextRandomPosition()
        var areaX = (int) Math.Round(DisplayCanvas.ActualWidth - DisplayShape.ActualWidth);
        var areaY = (int) Math.Round(DisplayCanvas.ActualHeight - DisplayShape.ActualHeight);
        returnnew Point(_random.Next(areaX) + 1, _random.Next(areaY) + 1);
}

总结

在 WPF 中，可以不通过 From 和 To 来指定动画的起始值和终止值；但如果真的不指定 From 和 To ，需要提前播放一次动画以确保动画能保持住元素状态；
在 WPF 中，如果没有指定 From 和 To ，那么动画结束后依然能直接为元素属性复制，且会立刻生效（正常情况下需要先清除动画）；
在 UWP 中，必须指定动画的 To 才能按照期望播放到目标值。