前面我们已经说过一些做动画的方法,但是需要指出的是,我们以前用Timer做的动画,没有调优的空间,他的播放频率永远是定死在了你的代码里面,而且当笔记本或平板电脑没有电的时候,操作系统会自动帮我们调慢动画的播出频率,这点,是以前的Timer做不到的,所以这里引出了Storyboard这个东西
首先定义一个按钮,定义了两个动画事件
<Button Content="aaa" Margin="20,30,0,0" Click="Button_Click_1" > <Button.RenderTransform> <ScaleTransform ScaleX="3" x:Name="st1"></ScaleTransform> </Button.RenderTransform> <Button.Projection> <PlaneProjection x:Name="pp1" RotationY="30"></PlaneProjection> </Button.Projection> </Button>
然后再资源文件中定义动画的样式
<Page.Resources> <!-- 此页所显示的分组项的集合,绑定到完整 项列表的子集,因为无法虚拟化组中的项 --> <Storyboard x:Name="sb1"> <DoubleAnimation Storyboard.TargetName="st1" Storyboard.TargetProperty="ScaleX" From="0" To="3" Duration="00:00:03" AutoReverse="True" RepeatBehavior="Forever"></DoubleAnimation> </Storyboard> <Storyboard x:Name="sb2"> <DoubleAnimation Storyboard.TargetName="pp1" Storyboard.TargetProperty="RotationY" From="0" To="360"> <DoubleAnimation.EasingFunction> <BackEase></BackEase> </DoubleAnimation.EasingFunction> </DoubleAnimation> </Storyboard>
其中Duration为动画多少时间执行完毕,AutoReverse为自动反向运行,即自动从3再变成0,RepeatBehavior表示重复次数,2X,3X,Forever
BackEase为弹性效果,即变成3时先到达3.2再回到3。
还有其他的一些变幻曲线,都在 <DoubleAnimation.EasingFunction>下面做定义。(BounceEase弹性拉伸效果)
最后,我们去触发这个事件
private void Button_Click_1(object sender, RoutedEventArgs e) { sb1.Begin(); sb2.Begin(); //这里面的两个动画是一起播放的 }
注意,资源文件里面用的是X:NAME,不是Key,这个是StoryBoard的特殊用法
动画的顺序播放
<Storyboard x:Name="sb3"> <DoubleAnimation Storyboard.TargetName="st1" Storyboard.TargetProperty="ScaleX" From="1" To="3"></DoubleAnimation> <DoubleAnimation Storyboard.TargetName="st1" Storyboard.TargetProperty="ScaleY" From="1" To="3"></DoubleAnimation> </Storyboard>
<Button Content="aaa" Margin="20,30,0,0" Click="Button_Click_1" > <Button.RenderTransform> <ScaleTransform x:Name="st1"></ScaleTransform> </Button.RenderTransform> </Button>
这里需要注意下面BUTTON的定义,并没有指明在那个方向进行缩放,而且这样的一个动画的两个DOUBLEANIMATION是同时执行的,如果希望他顺序执行,则需要注册Completed事件
<Storyboard x:Name="sb3" Completed="sb3_Completed_1"> <DoubleAnimation Storyboard.TargetName="st1" Storyboard.TargetProperty="ScaleY" From="1" To="3"></DoubleAnimation> </Storyboard> <Storyboard x:Name="sb4"> <DoubleAnimation Storyboard.TargetName="st1" Storyboard.TargetProperty="ScaleX" From="1" To="3"></DoubleAnimation> </Storyboard>
private void Button_Click_1(object sender, RoutedEventArgs e) { // sb1.Begin(); sb3.Begin(); //这里面的两个动画是一起播放的 } private void sb3_Completed_1(object sender, object e) { sb4.Begin(); }
当我们动态的往容器里面添加控件或内容时,以前都是很死板的直接往容器里面加,现在WIN8加入了动画的效果,之主要在容器上注明一下就可以了
<stackpanel>
<stackpanel.childrentransitions>
<transitioncollectin>
<adddeletethemtransition>(这个有很多效果,可以自己去试)
还有就是当页面自己需要动画效果显示
在头部加上
<page.transitions>
<transitioncollection>
<entrancethemetransition>(这个有很多效果,可以自己去试)
顺势而为
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步