這篇文章介紹離散式關鍵幀，並使用它做些有趣的動畫。 1. 什麼是離散式關鍵幀 以DoubleAnimationUsingKeyFrames為例，它支持四種Double的關鍵幀，其中EasingDoubleKeyFrame、LinearDoubleKeyFrame和SplineDoubleKeyFra ...
這篇文章介紹離散式關鍵幀，並使用它做些有趣的動畫。
1. 什麼是離散式關鍵幀
以DoubleAnimationUsingKeyFrames為例，它支持四種Double的關鍵幀，其中EasingDoubleKeyFrame、LinearDoubleKeyFrame和SplineDoubleKeyFrame可以歸類為連續式關鍵幀，而DiscreteDoubleKeyFrame則是離散式關鍵幀。
DoubleAnimationUsingKeyFrames包含一個關鍵幀的集合，動畫開始後，每當達到某個關鍵幀指定的Time，動畫的值也會同時到達這個關鍵幀指定的Value。下麵這段XAML介紹了一個典型的LinearDoubleKeyFrame的用法：
<StackPanel>
<StackPanel.Resources>
<Storyboard x:Name="myStoryboard">
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="myRectangle"
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
<LinearDoubleKeyFrame Value="1" KeyTime="0:0:0"/>
<LinearDoubleKeyFrame Value="1.2" KeyTime="0:0:4"/>
<LinearDoubleKeyFrame Value="2" KeyTime="0:0:5"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</StackPanel.Resources>
</StackPanel>
對於連續式的關鍵幀，兩個關鍵幀之間會進行插值，以上面的XAML為例，當動畫運行到4.5秒的時候，DobuleAnimationUsingKeyFrames會根據第二和第三個LinearDoubleKeyFrame的值計算出1.6作為內插的值賦予目標屬性ScaleY。EasingDoubleKeyFrame和SplineDoubleKeyFrame也是相同的原理，只是它們的插值計算方式複雜一些。
而離散式關鍵幀不同，它用在不能插值的數據類型， 例如True/False、Visible/Collapsed這些數據類型，它們之間沒有過渡，只能用離散的方式設置值。一段典型的DiscreteObjectKeyFrame示例如下：
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalRoot" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
2. 瞭解下電影的原理
在電影里，一幅靜止的圖像被稱作一“格”（Frame），只要達到每秒24格，人們的眼睛就會被欺騙，以為看到的是運動的畫面。人的雙眼及其數據傳輸系統每秒可以識別10-12格畫面，大腦的視覺處理中心會將每格畫面保留1/15秒。如果在前一格畫面尚且保留的1/15秒內大腦又收到一幅新的畫面，那麼就產生了畫面在連續運動的感覺，這是電影得以實現的認知學基礎。
3. 用DiscreteDoubleKeyFrame播放動畫
DiscreteObjectKeyFrame是最常用的離散式關鍵幀，UWP還提供了其它三種離散式關鍵幀：DiscreteColorKeyFrame、DiscreteDoubleKeyFrame和DiscretePointKeyFrame。如果不是追求動畫效果，日常工作中DiscreteDoubleKeyFrame基本上沒什麼作為（在Github上DiscreteObjectKeyFrame有132K的搜索結果，DiscreteDoubleKeyFrame只有17K）。但只要瞭解了電影的原理，配合設計師的話DiscreteDoubleKeyFrame也可以大展拳腳。
<ScrollViewer Background="Transparent"
VerticalScrollBarVisibility="Disabled"
HorizontalScrollBarVisibility="Disabled">
<Grid Width="2900">
<Image Stretch="None"
AutomationProperties.AccessibilityView="Raw"
Source="/Assets/Images/heart.png"
Height="100"
Loaded="OnHeartLoaded"
RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<CompositeTransform />
</Image.RenderTransform>
</Image>
</Grid>
</ScrollViewer>
上面的XAML是一個Like按鈕（模仿某個不存在的網站）的ControlTemplate，ScrollViewer用於裁剪超出範圍的內容，裡面包含一張由29張100 X 100的圖片拼接而成的長圖片：
private Storyboard _checkStoryboard;
private CompositeTransform _heartTransform;
private void OnHeartLoaded(object sender, RoutedEventArgs e)
{
_heartTransform = (sender as Image).RenderTransform as CompositeTransform;
_checkStoryboard = new Storyboard();
var keyFrames = new DoubleAnimationUsingKeyFrames();
Storyboard.SetTarget(keyFrames, _heartTransform);
Storyboard.SetTargetProperty(keyFrames, nameof(CompositeTransform.TranslateX));
TimeSpan start = TimeSpan.Zero;
for (var i = 0; i < 28; i++)
{
var keyFrame = new DiscreteDoubleKeyFrame
{
KeyTime = TimeSpan.FromSeconds((i + 1d) / 28d),
Value = -(i + 1) * 100
};
keyFrames.KeyFrames.Add(keyFrame);
}
_checkStoryboard.Children.Add(keyFrames);
_checkStoryboard.FillBehavior = FillBehavior.HoldEnd;
}
private void OnChecked(object sender, RoutedEventArgs e)
{
_checkStoryboard.Begin();
}
在CodeBehind的OnChecked函數中啟動一個Storybord，使用DiscreteDoubleKeyFrame讓Image在一秒內向左平移100像素，這樣就達到了播放動畫的效果：
換一張Demo試試，這次使用了12幀每秒，看上去就有點卡頓：
4. 結語
這篇文章的代碼在WPF和UWP上的實現幾乎一樣，有興趣的話也可以在WPF上試試。
LikeButton的動畫抄自Codepen，在CSS中離散動畫實現起來很簡潔：
.heart {
width: 100px;
height: 100px;
background: url("https://cssanimation.rocks/images/posts/steps/heart.png") no-repeat;
background-position: 0 0;
cursor: pointer;
transition: background-position 1s steps(28);
transition-duration: 0s;
&.is-active {
transition-duration: 1s;
background-position: -2800px 0;
}
}
更多關於steps的內容可參考下麵這篇文章
CSS3 animation屬性中的steps功能符深入介紹
5. 參考
情節提要動畫 - UWP applications Microsoft Docs
關鍵幀動畫以及緩動函數動畫 - UWP applications Microsoft Docs
