上接稳扎稳打Silverlight(11) - 2.0动画之ColorAnimation, DoubleAnimation, PointAnimation

2016-08-20 11:00:38来源:http://webabcd.blog.51cto.com/1787395/343037作者:webabcd人点击


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> <Grid Margin="5" > <Grid.Resources> <Storyboard x:Name="daStoryboard"> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="daTransform" Storyboard.TargetProperty="X" Duration="0:0:10" > <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> </Storyboard> </Grid.Resources> <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> </Rectangle> </Grid> <Grid Margin="5" > <Grid.Resources> <Storyboard x:Name="paStoryboard"> <PointAnimationUsingKeyFrames Storyboard.TargetName="paGeometry" Storyboard.TargetProperty="Center" Duration="0:0:10" > <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> </Storyboard> </Grid.Resources> <Path Fill="Red" MouseLeftButtonDown="paPath_MouseLeftButtonDown"> <Path.Data> <EllipseGeometry x:Name="paGeometry" Center="50,50" RadiusX="15" RadiusY="15" /> </Path.Data> </Path> </Grid> </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" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <StackPanel HorizontalAlignment="Left"> <!-- MouseLeftButtonDown - 在该Canvas上单击鼠标后所执行的事件 --> <Canvas x:Name="canvas" Background="Yellow" Width="640" Height="480" MouseLeftButtonDown="Canvas_MouseLeftButtonDown"> <Path Fill="Red"> <Path.Data> <EllipseGeometry x:Name="ellipseGeometry" Center="200,100" RadiusX="15" RadiusY="15" /> </Path.Data> </Path> </Canvas> <StackPanel.Resources> <Storyboard x:Name="storyboard"> <PointAnimationx:Name="pointAnimation" Storyboard.TargetProperty="Center" Storyboard.TargetName="ellipseGeometry" Duration="0:0:2"/> </Storyboard> </StackPanel.Resources> </StackPanel> </UserControl>

Programmatically.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 Programmatically : UserControl { public Programmatically() { InitializeComponent(); } 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[源码下载]

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台