上接穩紮穩打Silverlight(11) - 2.0動畫之ColorAnimation, DoubleAnimation, PointAnimation

4、KeyFrame.xaml

<UserControl x:Class="Silverlight20.Animation.KeyFrame" 

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 

        <StackPanel HorizontalAlignment="Left"> 

                <!-- 

                ColorAnimationUsingKeyFrames - 在一組 KeyFrame 中所設定的多個 Color 值之間做動畫處理 

                DoubleAnimationUsingKeyFrames - 在一組 KeyFrame 中所設定的多個 Double 值之間做動畫處理 

                PointAnimationUsingKeyFrames - 在一組 KeyFrame 中所設定的多個 Point 值之間做動畫處理 

                --> 

                LinearColorKeyFrame - 在前一個關鍵幀的 Color 值及其自己的 Value 之間進行線性内插動畫處理 

                DiscreteColorKeyFrame - 在前一個關鍵幀的 Color 值及其自己的 Value 之間進行離散内插動畫處理 

                SplineColorKeyFrame - 在前一個關鍵幀的 Color 值及其自己的 Value 之間按 三次貝塞爾曲線 進行内插動畫處理 

                LinearDoubleKeyFrame - 在前一個關鍵幀的 Double 值及其自己的 Value 之間進行線性内插動畫處理 

                DiscreteDoubleKeyFrame - 在前一個關鍵幀的 Double 值及其自己的 Value 之間進行離散内插動畫處理 

                SplineDoubleKeyFrame - 在前一個關鍵幀的 Double 值及其自己的 Value 之間按 三次貝塞爾曲線 進行内插動畫處理 

                LinearPointKeyFrame - 在前一個關鍵幀的 Point 值及其自己的 Value 之間進行線性内插動畫處理 

                DiscretePointKeyFrame - 在前一個關鍵幀的 Point 值及其自己的 Value 之間進行離散内插動畫處理 

                SplinePointKeyFrame - 在前一個關鍵幀的 Point 值及其自己的 Value 之間按 三次貝塞爾曲線 進行内插動畫處理 

                Value - 關鍵幀的目标值 

                KeyTime - 到達關鍵幀目标值的時間 

                KeySpline - 三次貝塞爾曲線的兩個控制點：x1,y1 x2,y2（該三次貝塞爾曲線的起點為0,0，終點為1,1） 

                <Grid Margin="5" > 

                        <Grid.Resources> 

                                <Storyboard x:Name="caStoryboard"> 

                                        <ColorAnimationUsingKeyFrames 

                                                Storyboard.TargetName="caBrush" 

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

                                        </ColorAnimationUsingKeyFrames> 

                                </Storyboard> 

                        </Grid.Resources> 

                        <Rectangle x:Name="caRectangle" MouseLeftButtonDown="caRectangle_MouseLeftButtonDown" Width="100" Height="50"> 

                                <Rectangle.Fill> 

                                        <SolidColorBrush x:Name="caBrush" Color="Red" /> 

                                </Rectangle.Fill> 

                        </Rectangle> 

                </Grid> 

                                <Storyboard x:Name="daStoryboard"> 

                                        <DoubleAnimationUsingKeyFrames 

                                                Storyboard.TargetName="daTransform" 

                                                Storyboard.TargetProperty="X" 

                                                <LinearDoubleKeyFrame Value="500" KeyTime="0:0:3" /> 

                                                <DiscreteDoubleKeyFrame Value="400" KeyTime="0:0:4" /> 

                                                <SplineDoubleKeyFrame Value="0" KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:6" /> 

                                        </DoubleAnimationUsingKeyFrames> 

                        <Rectangle x:Name="daRectangle" MouseLeftButtonDown="daRectangle_MouseLeftButtonDown" Fill="Red" Width="100" Height="50"> 

                                <Rectangle.RenderTransform> 

                                        <TranslateTransform x:Name="daTransform" X="0" Y="0" /> 

                                </Rectangle.RenderTransform> 

                                <Storyboard x:Name="paStoryboard"> 

                                        <PointAnimationUsingKeyFrames 

                                                Storyboard.TargetName="paGeometry" 

                                                Storyboard.TargetProperty="Center" 

                                                <LinearPointKeyFrame Value="100,100" KeyTime="0:0:3" /> 

                                                <DiscretePointKeyFrame Value="200,200" KeyTime="0:0:4" /> 

                                                <SplinePointKeyFrame Value="50,50" KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:6" /> 

                                        </PointAnimationUsingKeyFrames> 

                        <Path Fill="Red" MouseLeftButtonDown="paPath_MouseLeftButtonDown"> 

                                <Path.Data> 

                                        <EllipseGeometry x:Name="paGeometry" Center="50,50" RadiusX="15" RadiusY="15" /> 

                                </Path.Data> 

                        </Path> 

        </StackPanel> 

</UserControl>

KeyFrame.xaml.cs

using System; 

using System.Collections.Generic; 

using System.Linq; 

using System.Net; 

using System.Windows; 

using System.Windows.Controls; 

using System.Windows.Documents; 

using System.Windows.Input; 

using System.Windows.Media; 

using System.Windows.Media.Animation; 

using System.Windows.Shapes; 

namespace Silverlight20.Animation 

{ 

        public partial class KeyFrame : UserControl 

        { 

                public KeyFrame() 

                { 

                        InitializeComponent(); 

                } 

                private void caRectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 

                        caStoryboard.Begin(); 

                private void daRectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 

                        daStoryboard.Begin(); 

                private void paPath_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 

                        paStoryboard.Begin(); 

        } 

}

5、Programmatically.xaml

<UserControl x:Class="Silverlight20.Animation.Programmatically" 

                MouseLeftButtonDown - 在該Canvas上單擊滑鼠後所執行的事件 

                <Canvas x:Name="canvas" Background="Yellow" Width="640" Height="480" MouseLeftButtonDown="Canvas_MouseLeftButtonDown"> 

                        <Path Fill="Red"> 

                                        <EllipseGeometry x:Name="ellipseGeometry" Center="200,100" RadiusX="15" RadiusY="15" /> 

                </Canvas> 

                <StackPanel.Resources> 

                        <Storyboard x:Name="storyboard"> 

                                <PointAnimation    

                                        x:Name="pointAnimation" 

                                        Storyboard.TargetProperty="Center" 

                                        Storyboard.TargetName="ellipseGeometry" 

                                        Duration="0:0:2"/> 

                        </Storyboard> 

                </StackPanel.Resources> 

Programmatically.xaml.cs

        public partial class Programmatically : UserControl 

                public Programmatically() 

                private void Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 

                        // 滑鼠相對與canvas的坐标 

                        double newX = e.GetPosition(canvas).X; 

                        double newY = e.GetPosition(canvas).Y; 

                        Point myPoint = new Point(newX, newY); 

                        // 将動畫的結束值設定為滑鼠的目前坐标 

                        pointAnimation.To = myPoint; 

                        // 播放動畫 

                        storyboard.Begin(); 

OK

<a href="http://down.51cto.com/data/100302" target="_blank">[源碼下載下傳]</a>

     本文轉自webabcd 51CTO部落格，原文連結：

     本文轉自webabcd 51CTO部落格，原文連結：http://blog.51cto.com/webabcd/343037，如需轉載請自行聯系原作者