线性插值动画

匿名 (未验证) 提交于 2019-12-02 23:35:02

线性插值动画
DoubleAnimation:属于Double类型的属性都可以使用它产生线性插值动画效果
ColorAnimation:作用于属性为Color类型对象的线性插值动画,用于改变对象填充颜色

DoubleAnimation:

<!--线性插值动画 360度旋转-->     <Canvas Background="White">         <!--触发器-->         <Canvas.Triggers>             <!--事件触发器-->             <EventTrigger RoutedEvent="Canvas.Loaded">                 <!--执行一个动作-->                 <EventTrigger.Actions>                     <!--开始故事版-->                     <BeginStoryboard>                         <!--创建一个故事版-->                         <Storyboard x:Name="storyboard1">                             <!--创建一个DoubleAnimation类-->                             <!--Angle:旋转角度;RepeatBehavior="Forever":永不停止运行-->                             <DoubleAnimation Storyboard.TargetName="rec"                                              Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"                                               From="0" To="360" Duration="0:0:2" RepeatBehavior="Forever">                             </DoubleAnimation>                         </Storyboard>                     </BeginStoryboard>                 </EventTrigger.Actions>             </EventTrigger>         </Canvas.Triggers>                  <Rectangle x:Name="rec" Height="300" Width="300" Canvas.Left="100" Canvas.Top="100" RenderTransformOrigin="0.5,0.5">             <!--矩形填充色-->             <Rectangle.Fill>                 <ImageBrush ImageSource="Content\images\1037904.jpg"/>             </Rectangle.Fill>             <!--RenderTransform特效(变形):它可以实现对元素拉伸,旋转,扭曲等效果-->             <Rectangle.RenderTransform>                 <!--组合变换-->                 <TransformGroup>                     <!--缩放变化-->                     <ScaleTransform/>                     <!--扭曲变化-->                     <SkewTransform/>                     <!--旋转变化-->                     <RotateTransform/>                     <!--平移变化-->                     <TranslateTransform/>                 </TransformGroup>             </Rectangle.RenderTransform>         </Rectangle> </Canvas> 

1、TranslateTransform(平移变化):包括X、Y两种属性,以原来的对象为坐标原点(0,0),然后向X轴、Y轴进行平移变换。
2、RotateTransform (旋转变化):包括属性Angle(旋转角度),CenterX、CenterY(旋转的中心)
3、ScaleTransform(缩放变化):包括属性ScaleX、ScaleY、CenterX、CenterY,其中ScaleX、ScaleY属性表示对象在X、Y轴进行缩放的倍数,使 用CenterX 和 CenterY属性指定一个中心点。
4、SkewTransform(扭曲变化): 包括属性AngleX、AngleY、CenterX、CenterY。其中使用AngleX让元素相对X轴倾斜角度,AngleY是让元素围绕Y轴的倾斜 角度。同样CenterX和CenterY是中心点位置。
5、TransformGroup:缩放、旋转、扭曲等变化效果合并起来
效果截图:


ColorAnimation:
<StackPanel Width="150" Height="100">         <Ellipse Width="100" Height="100" Fill="Red" Stroke="Blue" Name="red">             <Ellipse.Triggers>                 <EventTrigger RoutedEvent="FrameworkElement.Loaded">                     <BeginStoryboard>                         <Storyboard>                             <ColorAnimation AutoReverse="True" Storyboard.TargetName="red"          							Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"          							From="Yellow" To="Green" RepeatBehavior="Forever" Duration="0:0:2" By="Blue" />                         </Storyboard>                     </BeginStoryboard>                 </EventTrigger>             </Ellipse.Triggers>         </Ellipse> </StackPanel> 

效果截图

文章来源: https://blog.csdn.net/weixin_44545531/article/details/90597744
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!