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>

2、演示關鍵幀動畫的應用

Animation/KeyFrameAnimation.xaml

<Page
    x:Class="XamlDemo.Animation.KeyFrameAnimation"
    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">
        <StackPanel Margin="120 0 0 0">
    
            <!--
                關鍵幀動畫一共有 4 種：
                    ColorAnimationUsingKeyFrames, DoubleAnimationUsingKeyFrames, PointAnimationUsingKeyFrames, ObjectAnimationUsingKeyFrames 它們均繼承自 Timeline
                
                ColorAnimationUsingKeyFrames, DoubleAnimationUsingKeyFrames, PointAnimationUsingKeyFrames 中的 KeyFrame 支持：
                    LinearColorKeyFrame, DiscreteColorKeyFrame, SplineColorKeyFrame, EasingColorKeyFrame
                
                ObjectAnimationUsingKeyFrames 中的 KeyFrame 支持：
                    DiscreteObjectKeyFrame
                
                Linear 代表線性，Discrete 代表離散，Spline 代表三次貝塞爾曲線，Easing 代表緩動
                
                Value - 關鍵幀的目標值
                KeyTime - 到達關鍵幀目標值的時間
                KeySpline - 三次貝塞爾曲線的兩個控制點：x1,y1 x2,y2（該三次貝塞爾曲線的起點為0,0，終點為1,1）
            -->
    
            <Grid Margin="5" HorizontalAlignment="Left">
                <Grid.Resources>
                    <BeginStoryboard x:Name="storyboardColor">
                        <Storyboard>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="solidColorBrush" Storyboard.TargetProperty="Color" Duration="0:0:10">
                                <LinearColorKeyFrame Value="Green" KeyTime="0:0:3" />
                                <DiscreteColorKeyFrame Value="Blue" KeyTime="0:0:4" />
                                <SplineColorKeyFrame Value="Red" KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:6" />
                                <EasingColorKeyFrame Value="Orange" KeyTime="0:0:8">
                                    <EasingColorKeyFrame.EasingFunction>
                                        <ElasticEase EasingMode="EaseInOut" />
                                    </EasingColorKeyFrame.EasingFunction>
                                </EasingColorKeyFrame>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </Grid.Resources>
                <Rectangle Width="100" Height="50">
                    <Rectangle.Fill>
                        <SolidColorBrush x:Name="solidColorBrush" Color="Red" />
                    </Rectangle.Fill>
                </Rectangle>
            </Grid>
    
    
            <Grid Margin="5" HorizontalAlignment="Left">
                <Grid.Resources>
                    <BeginStoryboard x:Name="storyboardDouble">
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="translateTransform" Storyboard.TargetProperty="X" Duration="0:0:10">
                                <LinearDoubleKeyFrame Value="500" KeyTime="0:0:3" />
                                <DiscreteDoubleKeyFrame Value="400" KeyTime="0:0:4" />
                                <SplineDoubleKeyFrame Value="300" KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:6" />
                                <EasingDoubleKeyFrame Value="200" KeyTime="0:0:8">
                                    <EasingDoubleKeyFrame.EasingFunction>
                                        <ElasticEase EasingMode="EaseInOut" />
                                    </EasingDoubleKeyFrame.EasingFunction>
                                </EasingDoubleKeyFrame>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </Grid.Resources>
                <Rectangle Fill="Red" Width="100" Height="50">
                    <Rectangle.RenderTransform>
                        <TranslateTransform x:Name="translateTransform" X="0" Y="0" />
                    </Rectangle.RenderTransform>
                </Rectangle>
            </Grid>
    
    
            <Grid Margin="5" HorizontalAlignment="Left">
                <Grid.Resources>
                    <BeginStoryboard x:Name="storyboardPoint">
                        <Storyboard>
                            <PointAnimationUsingKeyFrames Storyboard.TargetName="ellipseGeometry" Storyboard.TargetProperty="Center" Duration="0:0:10"
                                                          EnableDependentAnimation="True">
                                <LinearPointKeyFrame Value="100,100" KeyTime="0:0:3" />
                                <DiscretePointKeyFrame Value="200,200" KeyTime="0:0:4" />
                                <SplinePointKeyFrame Value="300,300" KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:6" />
                                <EasingPointKeyFrame Value="400,400" KeyTime="0:0:8">
                                    <EasingPointKeyFrame.EasingFunction>
                                        <ElasticEase EasingMode="EaseInOut" />
                                    </EasingPointKeyFrame.EasingFunction>
                                </EasingPointKeyFrame>
                            </PointAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </Grid.Resources>
                <Path Fill="Red">
                    <Path.Data>
                        <EllipseGeometry x:Name="ellipseGeometry" Center="50,50" RadiusX="15" RadiusY="15" />
                    </Path.Data>
                </Path>
            </Grid>
    
    
            <Grid Margin="5" HorizontalAlignment="Left">
                <Grid.Resources>
                    <BeginStoryboard x:Name="storyboardObject">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="textBlock" Storyboard.TargetProperty="Text" Duration="0:0:10">
                                <DiscreteObjectKeyFrame KeyTime="0:0:1" Value="w" />
                                <DiscreteObjectKeyFrame KeyTime="0:0:2" Value="we" />
                                <DiscreteObjectKeyFrame KeyTime="0:0:3" Value="web" />
                                <DiscreteObjectKeyFrame KeyTime="0:0:4" Value="weba" />
                                <DiscreteObjectKeyFrame KeyTime="0:0:5" Value="webab" />
                                <DiscreteObjectKeyFrame KeyTime="0:0:6" Value="webabc" />
                                <DiscreteObjectKeyFrame KeyTime="0:0:7" Value="webabcd" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </Grid.Resources>
                <TextBlock x:Name="textBlock" Width="200" FontSize="26.667" Text="" />
            </Grid>
    
        </StackPanel>
    </Grid>
</Page>

3、演示緩動動畫的應用

Animation/EasingAnimation.xaml

<Page
    x:Class="XamlDemo.Animation.EasingAnimation"
    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">
        <StackPanel Margin="120 0 0 0">
    
            <StackPanel Orientation="Horizontal">
                <StackPanel Orientation="Horizontal">
                    <TextBlock FontSize="26.667" Text="Easing Function:" VerticalAlignment="Top" />
                    <!-- 用於選擇 Easing Function -->
                    <ComboBox x:Name="cboEasingFunction" SelectionChanged="cboEasingFunction_SelectionChanged_1" Margin="10 0 0 0">
                        <ComboBoxItem>BackEase</ComboBoxItem>
                        <ComboBoxItem>BounceEase</ComboBoxItem>
                        <ComboBoxItem>CircleEase</ComboBoxItem>
                        <ComboBoxItem>CubicEase</ComboBoxItem>
                        <ComboBoxItem>ElasticEase</ComboBoxItem>
                        <ComboBoxItem>ExponentialEase</ComboBoxItem>
                        <ComboBoxItem>PowerEase</ComboBoxItem>
                        <ComboBoxItem>QuadraticEase</ComboBoxItem>
                        <ComboBoxItem>QuarticEase</ComboBoxItem>
                        <ComboBoxItem>QuinticEase</ComboBoxItem>
                        <ComboBoxItem>SineEase</ComboBoxItem>
                    </ComboBox>
                </StackPanel>
                <StackPanel Orientation="Horizontal" Margin="10 0 0 0">
                    <TextBlock FontSize="26.667" Text="Easing Mode:" VerticalAlignment="Top" />
                    <ComboBox x:Name="cboEasingMode" SelectionChanged="cboEasingMode_SelectionChanged_1" Margin="10 0 0 0">
                        <!-- 用於選擇 Easing Mode -->
                        <ComboBoxItem>EaseIn</ComboBoxItem>
                        <ComboBoxItem>EaseOut</ComboBoxItem>
                        <ComboBoxItem>EaseInOut</ComboBoxItem>
                    </ComboBox>
                </StackPanel>
            </StackPanel>
    
            <StackPanel Orientation="Horizontal" Margin="0 30 0 0">
                <StackPanel.Resources>
                    <Storyboard x:Name="storyboard">
                        <!-- 用於演示緩動動畫的效果 -->
                        <DoubleAnimation x:Name="aniEasingDemo"
                            Storyboard.TargetName="easingDemo"
                            Storyboard.TargetProperty="(Canvas.Left)"
                            Duration="0:0:3"
                            RepeatBehavior="Forever"
                            From="0"
                            To="300" />
    
                        <!-- 用一個球顯示緩動軌跡（X 軸代表時間） -->
                        <DoubleAnimation x:Name="aniBallX"
                            Storyboard.TargetName="ball"
                            Storyboard.TargetProperty="(Canvas.Left)"
                            Duration="0:0:3"
                            RepeatBehavior="Forever"
                            From="0"
                            To="100" />
    
                        <!-- 用一個球顯示緩動軌跡（Y 軸代表當前時間點的緩動結果值） -->
                        <DoubleAnimation x:Name="aniBallY"
                            Storyboard.TargetName="ball"
                            Storyboard.TargetProperty="(Canvas.Top)"
                            Duration="0:0:3"
                            RepeatBehavior="Forever"
                            From="0"
                            To="100" />
                    </Storyboard>
                </StackPanel.Resources>
                <StackPanel>
                    <Canvas Name="graphContainer" RenderTransformOrigin="0,0.5" Height="100" Width="100">
                        <Canvas.RenderTransform>
                            <ScaleTransform ScaleY="-1" />
                        </Canvas.RenderTransform>
                            
                        <!-- 用於顯示緩動曲線 -->
                        <Canvas Name="graph" />
    
                        <!-- 緩動曲線的 X 軸和 Y 軸 -->
                        <Line X1="0" Y1="0" X2="0" Y2="100" Stroke="Black" StrokeThickness="1" Width="1" Height="100" />
                        <Line X1="0" Y1="0" X2="100" Y2="1" Stroke="Black" StrokeThickness="1" Width="100" Height="1" />
    
                        <!-- 用一個球顯示緩動軌跡 -->
                        <Ellipse Name="ball" Fill="Orange" Width="5" Height="5" />
                    </Canvas>
                </StackPanel>
                <StackPanel Margin="30 0 0 0">
                    <Border BorderBrush="Black" BorderThickness="1">
                        <Canvas Width="400" Height="100">
                            <!-- 用於演示緩動動畫的效果 -->
                            <Rectangle Name="easingDemo" Width="100" Height="100" Fill="Blue" />
                        </Canvas>
                    </Border>
                </StackPanel>
            </StackPanel>
                
        </StackPanel>
    </Grid>
</Page>

Animation/EasingAnimation.xaml.cs

/*
 * 演示緩動（easing）的應用
 * 
 * WinRT 支持 11 種經典的緩動：
 * BackEase, BounceEase, CircleEase, CubicEase, ElasticEase, ExponentialEase, PowerEase, 

QuadraticEase, QuarticEase, QuinticEase, SineEase
 * 
 * EasingMode 有 3 種：
 * EaseIn, EaseOut, EaseInOut
 */
    
using Windows.Foundation;
using Windows.UI;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Animation;
using Windows.UI.Xaml.Navigation;
using Windows.UI.Xaml.Shapes;
    
namespace XamlDemo.Animation
{
    public sealed partial class EasingAnimation : Page
    {
        public EasingAnimation()
        {
            this.InitializeComponent();
    
            this.Loaded += EasingAnimation_Loaded;
        }
    
        void EasingAnimation_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            cboEasingFunction.SelectedIndex = 0;
            cboEasingMode.SelectedIndex = 0;
        }
    
        private void cboEasingFunction_SelectionChanged_1(object sender, 

SelectionChangedEventArgs e)
        {
            EasingChanged();
        }
    
        private void cboEasingMode_SelectionChanged_1(object sender, SelectionChangedEventArgs e)
        {
            EasingChanged();
        }
    
        private void EasingChanged()
        {
            if (cboEasingFunction.SelectedIndex == -1 || cboEasingMode.SelectedIndex == -1)
                return;
    
            storyboard.Stop();
    
            EasingFunctionBase easingFunction = null;
    
            // 確定 Easing Function
            switch ((cboEasingFunction.SelectedItem as ComboBoxItem).Content.ToString())
            {
                case "BackEase":
                    // Amplitude - 幅度，必須大於等於 0，默認值 1
                    easingFunction = new BackEase() { Amplitude = 1 };
                    break;
                case "BounceEase":
                    // Bounces - 彈跳次數，必須大於等於 0，默認值 3
                    // Bounciness - 彈跳程度，必須是正數，默認值 2
                    easingFunction = new BounceEase() { Bounces = 3, Bounciness = 2 };
                    break;
                case "CircleEase":
                    easingFunction = new CircleEase();
                    break;
                case "CubicEase":
                    easingFunction = new CubicEase();
                    break;
                case "ElasticEase":
                    // Oscillations - 來回滑動的次數，必須大於等於 0，默認值 3
                    // Springiness - 彈簧的彈度，必須是正數，默認值 3
                    easingFunction = new ElasticEase() { Oscillations = 3, Springiness = 3 };
                    break;
                case "ExponentialEase":
                    easingFunction = new ExponentialEase();
                    break;
                case "PowerEase":
                    easingFunction = new PowerEase();
                    break;
                case "QuadraticEase":
                    easingFunction = new QuadraticEase();
                    break;
                case "QuarticEase":
                    easingFunction = new QuarticEase();
                    break;
                case "QuinticEase":
                    easingFunction = new QuinticEase();
                    break;
                case "SineEase":
                    easingFunction = new SineEase();
                    break;
                default:
                    break;
            }
    
            // 確定 Easing Mode
            switch ((cboEasingMode.SelectedItem as ComboBoxItem).Content.ToString())
            {
                case "EaseIn":
                    easingFunction.EasingMode = EasingMode.EaseIn;
                    break;
                case "EaseOut":
                    easingFunction.EasingMode = EasingMode.EaseOut;
                    break;
                case "EaseInOut":
                    easingFunction.EasingMode = EasingMode.EaseInOut;
                    break;
                default:
                    break;
            }
    
            // 用於演示緩動效果
            aniEasingDemo.EasingFunction = easingFunction;
            // 用於演示緩動軌跡
            aniBallY.EasingFunction = easingFunction;
    
            // 畫出當前緩動的曲線圖
            DrawEasingGraph(easingFunction);
    
            storyboard.Begin();
        }
    
        /// <summary>
        /// 繪制指定的 easing 的曲線圖
        /// </summary>
        private void DrawEasingGraph(EasingFunctionBase easingFunction)
        {
            graph.Children.Clear();
    
            Path path = new Path();
            PathGeometry pathGeometry = new PathGeometry();
            PathFigure pathFigure = new PathFigure() { StartPoint = new Point(0, 0) };
            PathSegmentCollection pathSegmentCollection = new PathSegmentCollection();
    
            // 0 - 1 之間每隔 0.005 計算出一段 LineSegment，用於顯示此 0.005 時間段內的緩動曲線
            for (double i = 0; i < 1; i += 0.005)
            {
                double x = i * graphContainer.Width;
                double y = easingFunction.Ease(i) * graphContainer.Height;
    
                LineSegment segment = new LineSegment();
                segment.Point = new Point(x, y);
                pathSegmentCollection.Add(segment);
            }
    
            pathFigure.Segments = pathSegmentCollection;
            pathGeometry.Figures.Add(pathFigure);
            path.Data = pathGeometry;
            path.Stroke = new SolidColorBrush(Colors.Black);
            path.StrokeThickness = 1;
    
            graph.Children.Add(path);
        }
    }
}

OK

[源碼下載]：http://files.cnblogs.com/webabcd/Windows8.rar