Windows Phone开发(40):漫谈关键帧动画之中篇

本文详细介绍了WPF中三种关键帧动画的应用:离散型关键帧动画(DiscreteDoubleKeyFrame和DiscreteColorKeyFrame),以及线性颜色关键帧动画(LinearColorKeyFrame)。通过具体的XAML示例代码展示了如何实现不同类型的动画效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、DiscreteDoubleKeyFrame

离散型关键帧动画,重点,我们理解一下“离散”的意思,其实你查一下《新华字典》,“离”和“散”的意思相近。我们可以这样解释:每个关键帧之间是直接过渡,其间不经过动画插补。似乎这样理解有点苦涩难懂,所以,我们还是从实例入手。

请参考以下XAML代码写一个示例:

<Grid Loaded="OnGridLoaded"> <Rectangle Width="100" Height="100" Fill="Green" VerticalAlignment="Top"> <Rectangle.RenderTransform> <TranslateTransform x:Name="trm"/> </Rectangle.RenderTransform> </Rectangle> <Grid.Resources> <Storyboard x:Name="std"> <DoubleAnimationUsingKeyFrames Duration="0:0:5" RepeatBehavior="15" Storyboard.TargetName="trm" Storyboard.TargetProperty="Y"> <DiscreteDoubleKeyFrame KeyTime="0:0:2" Value="150"/> <DiscreteDoubleKeyFrame KeyTime="0:0:3" Value="280"/> <DiscreteDoubleKeyFrame KeyTime="0:0:5" Value="380"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </Grid.Resources> </Grid>

在后台的C#代码中,千万不要记了启动动画,等下运行后发现动不了就麻烦了。


private void OnGridLoaded(object sender, RoutedEventArgs e) { this.std.Begin(); }


然后你可以运行了,注意认真观察动画的演变过程。

不知道你观察到了什么?你是否发现,矩形向下运动的过程是直接跳跃式的,每个关键之间没有创建过渡效果,而且直接跳到对应值。

二、DiscreteColorKeyFrame

这也是一个离散型关键帧动画,从名字上我们知道,它是针对颜色进行动画处理的。还是看例子吧。

请参考下面XAML代码写一个测试程序:

<Grid Loaded="OnGridLoaded"> <Ellipse Width="250" Height="250"> <Ellipse.Fill> <SolidColorBrush x:Name="brush" Color="Blue"/> </Ellipse.Fill> </Ellipse> <Grid.Resources> <Storyboard x:Name="std"> <ColorAnimationUsingKeyFrames Duration="0:0:8" RepeatBehavior="20" Storyboard.TargetName="brush" Storyboard.TargetProperty="Color"> <DiscreteColorKeyFrame KeyTime="0:0:2" Value="Yellow"/> <DiscreteColorKeyFrame KeyTime="0:0:5" Value="Gray"/> <DiscreteColorKeyFrame KeyTime="0:0:7" Value="Red"/> </ColorAnimationUsingKeyFrames> </Storyboard> </Grid.Resources> </Grid>


后台代码就不帖了,都懂得写什么了。

然后运行一下,查看效果。

从效果中可以看到,颜色的改变是没有平滑的过渡效果的,而是当时间线的播放时间到了关键帧所在的位置时,颜色是直接改变的。

三、LinearColorKeyFrame

线性颜色的关键帧与离散型动画相反,每个关键帧之间都创建平滑的过渡效果,让人看起来有连续感。

请参考以下XAML代码写一个测试程序。

<Grid Loaded="onGridLoaded"> <Ellipse Width="300" Height="300" > <Ellipse.Fill> <RadialGradientBrush x:Name="rdGradientBrush" Center="0.5, 0.5" RadiusX="0.5" RadiusY="0.5"> <GradientStop Color="LightGreen" Offset="0"/> <GradientStop Color="DarkGreen" Offset="1"/> </RadialGradientBrush> </Ellipse.Fill> </Ellipse> <Grid.Resources> <Storyboard x:Name="std"> <ColorAnimationUsingKeyFrames Duration="0:0:6" RepeatBehavior="Forever" Storyboard.TargetName="rdGradientBrush" Storyboard.TargetProperty="(RadialGradientBrush.GradientStops)[0].(GradientStop.Color)"> <LinearColorKeyFrame KeyTime="0:0:1" Value="Orange"/> <LinearColorKeyFrame KeyTime="0:0:3" Value="White"/> <LinearColorKeyFrame KeyTime="0:0:6" Value="Pink"/> </ColorAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames Duration="0:0:6" RepeatBehavior="Forever" Storyboard.TargetName="rdGradientBrush" Storyboard.TargetProperty="(RadialGradientBrush.GradientStops)[1].(GradientStop.Color)"> <LinearColorKeyFrame KeyTime="0:0:3" Value="Yellow"/> <LinearColorKeyFrame KeyTime="0:0:6" Value="Violet"/> <LinearColorKeyFrame KeyTime="0:0:7" Value="SeaGreen"/> </ColorAnimationUsingKeyFrames> </Storyboard> </Grid.Resources> </Grid>


页面上的正圆是使用径向渐变填充的,渐变颜色点有两个,我们分别对这两个渐变点的颜色进行线性动画处理,这样就会做出很漂亮的效果,如下面图片所示。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值