线性插值动画
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