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

2016-08-20 11:01:13来源:http://webabcd.blog.51cto.com/1787395/343038作者:webabcd人点击


[索引页][源码下载]
稳扎稳打Silverlight(11) - 2.0动画之ColorAnimation, DoubleAnimation, PointAnimation, 内插关键帧动画
作者:webabcd介绍Silverlight 2.0 动画: ColorAnimation -在两个 Color 值之间做线性内插动画处理 DoubleAnimation -在两个 Double 值之间做线性内插动画处理 PointAnimation -在两个 Point 值之间做线性内插动画处理 内插关键帧动画 -在 Color 或 Double 或Point 动画中内插关键帧,以做线性,离散, 三次贝塞尔曲线的动画处理 动态改变动画 - 通过程序控制,动态地改变动画在线DEMOhttp://webabcd.blog.51cto.com/1787395/342779示例1、ColorAnimation.xaml

<UserControl x:Class="Silverlight20.Animation.ColorAnimation" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <StackPanel HorizontalAlignment="Left"> <Ellipse x:Name="ellipse" Fill="Red" Width="200" Height="100"> <Ellipse.Triggers> <!-- RoutedEvent - 所属对象的路由事件,仅有Loaded这个事件 --> <EventTrigger RoutedEvent="Ellipse.Loaded"> <BeginStoryboard x:Name="beginStoryboard"> <Storyboard x:Name="storyboard"> <!--ColorAnimation - 在两个 Color 值之间做线性内插动画处理--> <!-- 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, 3xForever - 永久播放 SpeedRatio - 时间线的速率的倍数。默认值 1 FillBehavior - 动画结束后的行为 [System.Windows.Media.Animation.FillBehavior枚举] FillBehavior.HoldEnd - 动画结束后,保留动画属性的结束值。默认值 FillBehavior.Stop - 动画结束后,恢复动画属性为其初始值 --> <ColorAnimationStoryboard.TargetName="ellipse"Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)"BeginTime="00:00:0"From="Red"To="Yellow"Duration="Automatic"AutoReverse="True"RepeatBehavior="3x"> </ColorAnimation> </Storyboard> </BeginStoryboard> </EventTrigger> </Ellipse.Triggers> </Ellipse> </StackPanel> </UserControl>


2、DoubleAnimation.xaml

<UserControl x:Class="Silverlight20.Animation.DoubleAnimation" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <StackPanel HorizontalAlignment="Left"> <Rectangle x:Name="rectangle" Width="200" Height="100" Stroke="Black" StrokeThickness="6" RadiusX="25" RadiusY="25"> <Rectangle.Fill> <ImageBrush ImageSource="/Silverlight20;component/Images/Logo.jpg" Stretch="Fill" /> </Rectangle.Fill> </Rectangle> <StackPanel.Resources> <BeginStoryboard x:Name="beginStoryboard"> <Storyboard x:Name="storyboard"> <!--DoubleAnimation - 在两个 Double 值之间做线性内插动画处理--> <!-- 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, 3xForever - 永久播放 SpeedRatio - 时间线的速率的倍数。默认值 1 FillBehavior - 动画结束后的行为 [System.Windows.Media.Animation.FillBehavior枚举] FillBehavior.HoldEnd - 动画结束后,保留动画属性的结束值。默认值 FillBehavior.Stop - 动画结束后,恢复动画属性为其初始值 --> <DoubleAnimationStoryboard.TargetName="rectangle"Storyboard.TargetProperty="Width" From="100" By="100" BeginTime="0:0:3" Duration="00:00:03" AutoReverse="False" RepeatBehavior="Forever"> </DoubleAnimation> </Storyboard> </BeginStoryboard> </StackPanel.Resources> </StackPanel> </UserControl>


3、PointAnimation.xaml

<UserControl x:Class="Silverlight20.Animation.PointAnimation" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <StackPanel HorizontalAlignment="Left"> <StackPanel Orientation="Horizontal"> <Button Click="Animation_Begin" Width="65" Height="30" Margin="2" Content="Begin" /> <Button Click="Animation_Pause" Width="65" Height="30" Margin="2" Content="Pause" /> <Button Click="Animation_Resume" Width="65" Height="30" Margin="2" Content="Resume" /> <Button Click="Animation_Stop" Width="65" Height="30" Margin="2" Content="Stop" /> </StackPanel> <Path Fill="Red"> <Path.Data> <EllipseGeometry x:Name="ellipseGeometry" Center="50,50" RadiusX="15" RadiusY="15" /> </Path.Data> </Path> <StackPanel.Resources> <Storyboard x:Name="storyboard"> <!--PointAnimation - 在两个 Point 值之间做线性内插动画处理--> <!-- 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, 3xForever - 永久播放 SpeedRatio - 时间线的速率的倍数。默认值 1 FillBehavior - 动画结束后的行为 [System.Windows.Media.Animation.FillBehavior枚举] FillBehavior.HoldEnd - 动画结束后,保留动画属性的结束值。默认值 FillBehavior.Stop - 动画结束后,恢复动画属性为其初始值 --> <PointAnimation Storyboard.TargetName="ellipseGeometry" Storyboard.TargetProperty="Center" BeginTime="00:00:00" From="50,50" To="300,500" Duration="0:0:3" AutoReverse="True" RepeatBehavior="00:00:10"> </PointAnimation> </Storyboard> </StackPanel.Resources> </StackPanel> </UserControl>

PointAnimation.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 PointAnimation : UserControl { public PointAnimation() { InitializeComponent(); } private void Animation_Begin(object sender, RoutedEventArgs e) { // 播放 storyboard.Begin(); } private void Animation_Pause(object sender, RoutedEventArgs e) { // 暂停 storyboard.Pause(); } private void Animation_Resume(object sender, RoutedEventArgs e) { // 继续 storyboard.Resume(); } private void Animation_Stop(object sender, RoutedEventArgs e) { // 停止 storyboard.Stop(); } } }

未完待续>>
OK[源码下载]

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台