线性插值动画
作者:互联网
线性插值动画
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>
效果截图
→
标签:动画,缩放,线性插值,CenterX,CenterY,属性 来源: https://blog.csdn.net/weixin_44545531/article/details/90597744