[UWP]使用離散式關鍵幀播放動畫

2020 年 5 月 27 日
筆記
Animation, Design, UWP, 動畫

這篇文章介紹離散式關鍵幀，並使用它做些有趣的動畫。

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("//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

Tags: Animation Design UWP 動畫