无论是 WPF 还是 UWP 开发,如果用 Storyboard
和 Animation
做动画,我们多数时候都会设置 From
和 To
属性,用于从起始值动画到目标值。然而动画并不总是可以静态地指定这些值,因为更多的时候动画的起始值和目标值取决于当前 UI 的状态。
本文中,我将将尽量避免设置 From
和 To
值,让动画可以随时中断并重新开始,而中途不会出现突兀的变化。
本文涉及到的代码均在 GitHub 上以 MIT License 开源:walterlv/sharing-demo at demo/storyboard-without-using-from-or-to。
预览效果
下面是本文期望实现的基本效果:
在 WPF 中的动画效果
在 UWP 中的动画效果
预备代码
为了让读者能够最快速地搭建一个可供试验的 DEMO,我这里贴出界面部分核心代码。
XAML 是这样的(这里的 XAML,WPF 和 UWP 完全一样,可以互相使用而不用修改任何代码):
- 布局部分
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" Content="平移至随机位置" Click="BeginStoryboard_Click"/>
<Button Grid.Row="0" Grid.Column="1" Content="从随机位置平移" Click="BeginStoryboard2_Click"/>
<Button Grid.Row="0" G