其他分享
首页 > 其他分享> > 线性插值动画

线性插值动画

作者:互联网

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