Windows 8 Store Apps學習(19) 動畫 線性動畫, 主要畫面格動畫, 緩動動畫

介紹

重新想象 Windows 8 Store Apps 之 動畫

線性動畫 - 共有 3 種: ColorAnimation, DoubleAnimation, PointAnimation, 它們均繼承自 Timeline

主要畫面格動畫 - 共有 4 種：ColorAnimationUsingKeyFrames, DoubleAnimationUsingKeyFrames, PointAnimationUsingKeyFrames, ObjectAnimationUsingKeyFrames 它們均繼承自 Timeline

緩動動畫 - easing

樣本

1、示範線性動畫的應用

Animation/LinearAnimation.xaml

<Page    x:Class="XamlDemo.Animation.LinearAnimation"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:XamlDemo.Animation"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">        <Grid Background="Transparent">        <!--            線性動畫一共有 3 種：ColorAnimation, DoubleAnimation, PointAnimation, 它們均繼承自Timeline                        Storyboard.TargetName - 附加屬性，要進行動畫處理的對象的名稱            Storyboard.TargetProperty - 附加屬性，要進行動畫處理的對象的屬性            BeginTime - 時間軸在被觸發 BeginTime 的時間後才能開始播放                TimeSpan - [-][日.]時:分:秒[.1位到7為的秒後的小數]（可為正；可為負；可為空白；預設值為 0）            From - 動畫的起始值            To - 動畫的結束值            By - 動畫從起始值開始計算，所需變化的總量（To 優先於 By）            Duration - 時間軸的期間                TimeSpan - [-][日.]時:分:秒[.1位到7為的秒後的小數]                Automatic - 自動確定                Forever - 無限長            AutoReverse - 動畫完成後是否要原路返回。預設值為 false            RepeatBehavior - 動畫重複播放的時間、次數或類型                TimeSpan - [-][日.]時:分:秒[.1位到7為的秒後的小數]                nx - 播放次數。1x, 2x, 3x                 Forever - 永久播放            SpeedRatio - 時間軸的速率的倍數。預設值 1            FillBehavior - 動畫結束後的行為（System.Windows.Media.Animation.FillBehavior 枚舉）                FillBehavior.HoldEnd - 動畫結束後，UI 保留動畫後的狀態。預設值                FillBehavior.Stop - 動畫結束後，UI 恢複為動畫前的狀態                                    注意：、在 WinRT 中為了流暢的體驗，部分動畫被最佳化成了“獨立式動畫”，即動畫不依賴於 UI 線程、但是也有一部分動畫無法最佳化成“獨立式動畫”，我們把這類動畫稱作“依賴動畫”，其需要在 UI 線程上運行、通過將 EnableDependentAnimation 設定為 true（預設為 false），開啟“依賴動畫”、通過將 Timeline.AllowDependentAnimations 設定為 false（預設為 true），可以全域禁止開啟“依賴動畫”                        Independent Animation - 獨立式動畫            Dependent Animation - 依賴動畫        -->            <Grid.Resources>            <BeginStoryboard x:Name="storyboardColor">                <Storyboard>                    <!--Color 值線性動畫-->                    <!--                        動畫要修改的屬性是 Ellipse.Fill，動畫後的結果值會賦予 SolidColorBrush.Color，然後 SolidColorBrush 就是動畫後 Fill 屬性的值                        類似的比如：(UIElement.RenderTransform).(CompositeTransform.TranslateY) 以及 (UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX) 等                    -->                    <ColorAnimation                        Storyboard.TargetName="ellipse"                        Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)"                        BeginTime="00:00:00"                        From="Red"                        To="Yellow"                        Duration="0:0:3"                        AutoReverse="true"                        RepeatBehavior="3x">                    </ColorAnimation>                </Storyboard>            </BeginStoryboard>                            <BeginStoryboard x:Name="storyboardDouble">                <Storyboard>                    <!--Double 值線性動畫-->                    <!--                        動畫要修改的屬性是 Canvas.Left                    -->                    <DoubleAnimation                        Storyboard.TargetName="rectangle"                        Storyboard.TargetProperty="(Canvas.Left)"                        From="100"                        By="100"                        BeginTime="0:0:0"                        Duration="00:00:03"                        AutoReverse="true"                        RepeatBehavior="Forever">                    </DoubleAnimation>                </Storyboard>            </BeginStoryboard>                <BeginStoryboard x:Name="storyboardPoint">                <Storyboard>                    <!--Point 值線性動畫-->                    <PointAnimation                         EnableDependentAnimation="True"                        Storyboard.TargetName="ellipseGeometry"                        Storyboard.TargetProperty="Center"                        BeginTime="00:00:00"                        From="50,50"                        To="200,200"                        Duration="00:00:03"                        AutoReverse="true"                        RepeatBehavior="Forever">                    </PointAnimation>                </Storyboard>            </BeginStoryboard>        </Grid.Resources>            <StackPanel Margin="120 0 0 0">                <Ellipse x:Name="ellipse" Fill="Orange" Width="200" Height="100" HorizontalAlignment="Left" />                <Canvas Width="400" Height="100" HorizontalAlignment="Left" Margin="0 10 0 0">                <Rectangle x:Name="rectangle" Fill="Orange" Width="200" Height="100" Canvas.Left="100" />            </Canvas>                            <Path Fill="Orange">                <Path.Data>                    <EllipseGeometry x:Name="ellipseGeometry" Center="50,50" RadiusX="15" RadiusY="15" />                </Path.Data>            </Path>                        </StackPanel>    </Grid></Page>