這篇文章介紹離散式關鍵幀，並使用它做些有趣的動畫。 ## 1. 什麼是離散式關鍵幀 以DoubleAnimationUsingKeyFrames為例，它支援四種Double的關鍵幀，其中EasingDoubleKeyFrame、LinearDoubleKeyFrame和SplineDoubleKeyFrame可以歸類為連續式關鍵幀，而[DiscreteDoubleKeyFrame](https://docs.microsoft.com/zh-cn/uwp/api/windows.ui.xaml.media.animation.discretedoublekeyframe?view=winrt-18362)則是離散式關鍵幀。 DoubleAnimationUsingKeyFrames包含一個關鍵幀的集合，動畫開始後，每當達到某個關鍵幀指定的Time，動畫的值也會同時到達這個關鍵幀指定的Value。下面這段XAML介紹了一個典型的LinearDoubleKeyFrame的用法： ``` XML ``` 對於連續式的關鍵幀，兩個關鍵幀之間會進行插值，以上面的XAML為例，當動畫執行到4.5秒的時候，DobuleAnimationUsingKeyFrames會根據第二和第三個LinearDoubleKeyFrame的值計算出`1.6`作為內插的值賦予目標屬性`ScaleY`。EasingDoubleKeyFrame和SplineDoubleKeyFrame也是相同的原理，只是它們的插值計算方式複雜一些。 而離散式關鍵幀不同，它用在不能插值的資料型別， 例如True/False、Visible/Collapsed這些資料型別，它們之間沒有過渡，只能用離散的方式設定值。一段典型的DiscreteObjectKeyFrame示例如下： ``` XML ``` ## 2. 瞭解下電影的原理  在電影裡，一幅靜止的影象被稱作一“格”（Frame），只要達到每秒24格，人們的眼睛就會被欺騙，以為看到的是運動的畫面。人的雙眼及其資料傳輸系統每秒可以識別10-12格畫面，大腦的視覺處理中心會將每格畫面保留1/15秒。如果在前一格畫面尚且保留的1/15秒內大腦又收到一幅新的畫面，那麼就產生了畫面在連續運動的感覺，這是電影得以實現的認知學基礎。 ## 3. 用DiscreteDoubleKeyFrame播放動畫 DiscreteObjectKeyFrame是最常用的離散式關鍵幀，UWP還提供了其它三種離散式關鍵幀：DiscreteColorKeyFrame、DiscreteDoubleKeyFrame和DiscretePointKeyFrame。如果不是追求動畫效果，日常工作中DiscreteDoubleKeyFrame基本上沒什麼作為（在Github上DiscreteObjectKeyFrame有132K的搜尋結果，DiscreteDoubleKeyFrame只有17K）。但只要瞭解了電影的原理，配合設計師的話DiscreteDoubleKeyFrame也可以大展拳腳。 ``` XML

``` 上面的XAML是一個Like按鈕（模仿某個不存在的網站）的ControlTemplate，ScrollViewer用於裁剪超出範圍的內容，裡面包含一張由29張100 X 100的圖片拼接而成的長圖片：  ``` CS 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](https://codepen.io/mattbhenley/pen/gQbWgd)，在CSS中離散動畫實現起來很簡潔： ``` 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功能符深入介紹](https://www.zhangxinxu.com/wordpress/2018/06/css3-animation-steps-step-start-end/) ## 5. 參考 [情節提要動畫 - UWP applications Microsoft Docs](https://docs.microsoft.com/zh-cn/windows/uwp/design/motion/storyboarded-animations) [關鍵幀動畫以及緩動函式動畫 - UWP applications Microsoft Docs](https://docs.microsoft.com/zh-cn/windows/uwp/design/motion/key-frame-and-easing-function-animations) [DiscreteDoubleKeyFrame Class (Windows.UI.Xaml.Media.Animation) - Windows UWP applications Microsoft Docs](https://docs.microsoft.com/zh-cn/uwp/api/windows.ui.xaml.media.animation.discretedoublekeyframe?view=winrt-18362) ## 6. 原始碼 [design_and_animation_lab](https://github.com/DinoChan/uwp_design_and_animation_lab)