這篇文章介紹離散式關鍵幀，并使用它做些有趣的影片，
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=https://www.cnblogs.com/dino623/p/"1" KeyTime="0:0:0"/>
對于連續式的關鍵幀，兩個關鍵幀之間會進行插值，以上面的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 = https://www.cnblogs.com/dino623/p/-(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
DiscreteDoubleKeyFrame Class (Windows.UI.Xaml.Media.Animation) - Windows UWP applications Microsoft Docs
6. 原始碼
design_and_animation_lab
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/102.html
標籤：UWP
上一篇：Windows 視窗樣式 什么是 WS_EX_NOREDIRECTIONBITMAP 樣式
下一篇：Visual Studio 除錯C#程式時，提示“無法加載程式集****.XmlSerializers.dll",檔案找不到 的問題