Wpf(Storyboard)动画简单实例

原文:Wpf(Storyboard)动画简单实例

动画的三种变换方式

RotateTransform:旋转变换变化值:CenterX围绕转的圆心横坐标

       CenterY纵坐标

       Angle旋转角度(角度正负表示方向)

 

ScaleTransform:缩放变换变化值:ScaleX横向放大倍数 ScaleY纵向(负值时翻转)

 

 

TranslateTransform:平移变换变化值: X横坐标 Y纵坐标

 

其中

<Image.Projection>      后多了三种变化值,RotationX,RotationY,RotationZ分别围绕X Y Z轴转(单位度数)可以通过设置定时器来实现动画。

 

 

<控件.RenderTransform>

      <变换方式x:Name = “名字”></变换方式>

</控件.RenderTransform >

 

 

在Wpf下使用:

在xaml <window></winodw>中添加:

 

[html] view plaincopyprint?
  1. <window. Resources>  
  2.   
  3.        <Storyboard x:Key=”动画名字”  RepeatBehavior="Forever">   
  4.   
  5.               <DoubleAnimation Storyboard.TargetName="名字"  
  6.   
  7.                              Storyboard.TargetProperty="变化值"  
  8.   
  9.                              From="数 " To="数 "  
  10.   
  11.                              BeginTime="XX:XX:XX"  
  12.   
  13.                              Duration="XX:XX:XX">  
[html] view plaincopyprint?
  1.      </DoubleAnimation>  
  2.  <!--可以同时变化多个值。-->  
  3.   
  4.      <DoubleAnimation Storyboard.TargetName="名字"  
  5.   
  6.                       Storyboard.TargetProperty="变化值"  
  7.   
  8.                       From="数 " To="数 "  
  9.   
  10.                       BeginTime="XX:XX:XX"  
  11.   
  12.                       Duration="XX:XX:XX">  
  13.   
  14.      </DoubleAnimation>  
  15.   
  16. </Storyboard>                       
  17.   
  18. ndows. Resources>  

在程序调用位置中添加(一般在窗口加载方法中添加)运行动画

Storyboard sbd = Resources["动画名字"]asStoryboard;

sbd.Begin();

 

注意区分这里的名字和动画名字是不同的。一般名字是控件的名字。

 

RepeatBehavior获取或设置此时间线的重复行为。Forever循环动画

DoubleAnimation它在指定的持续时间内将动画从指定的起始值继续到指定的目标值。

From,To 动画开始到结束变化的值

BeginTime,Duration动画开始到结束所用时间

 

 

DoubleAnimation中的值:

AutoReverse="True/False"

是否播放结束后倒序播放,例如:一朵云从左往右飘然后再从右往左飘回来

 

 

下面方式实例:

 

控件部分:

<Image Source="Images/cloud.png" Width="190" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="20,20,0,0">

           <Image.RenderTransform>

               <TranslateTransform x:Name="cloud"></TranslateTransform>

           </Image.RenderTransform>

       </Image>

 

 

 

动画部分:

   <Window.Resources>

       <Storyboard x:Key="sbCloud" RepeatBehavior="Forever">

           <DoubleAnimation Storyboard.TargetName="cloud"

                            Storyboard.TargetProperty="X"

                            From="0" To="280"

                            BeginTime="00:00:00"

                            Duration="00:00:10">

               

           </DoubleAnimation>

           <DoubleAnimation Storyboard.TargetName="cloud"

                            Storyboard.TargetProperty="Y"

                            From="0" To="30"

                            BeginTime="00:00:00"

                            Duration="00:00:10">

               

           </DoubleAnimation>

       </Storyboard>

   </Window.Resources>

上一篇:Angular


下一篇:Angular:使用前端proxy代理解决跨域问题