Linear interpolation animation

Linear interpolation animation
DoubleAnimation: attributes of Double type can be used to produce linear interpolation animation effect
ColorAnimation: a linear interpolation animation that acts on objects whose attribute is Color type, and is used to change the object's fill Color


<!--Linear interpolation animation 360 degree rotation-->
    <Canvas Background="White">
            <!--Event trigger -->
            <EventTrigger RoutedEvent="Canvas.Loaded">
                <!--Perform an action-->
                    <!--Start story-->
                        <!--Create a story version-->
                        <Storyboard x:Name="storyboard1">
                            <!--Create a DoubleAnimation class-->
                            <!--Angle: Rotation angle; RepeatBehavior="Forever": Never stop running-->
                            <DoubleAnimation Storyboard.TargetName="rec"
                                             From="0" To="360" Duration="0:0:2" RepeatBehavior="Forever">
        <Rectangle x:Name="rec" Height="300" Width="300" Canvas.Left="100" Canvas.Top="100" RenderTransformOrigin="0.5,0.5">
            <!--Rectangle fill color-->
                <ImageBrush ImageSource="Content\images\1037904.jpg"/>
            <!--RenderTransform Special effect (deformation): it can stretch, rotate and twist elements-->
                <!--Combinatorial transformation-->
                    <!--Zoom change-->
                    <!--Variation of Spin-->
                    <!--Translation change-->

1. Translatetransform: including X and Y attributes. Take the original object as the coordinate origin (0,0), and then translate to X and Y axes.
2. RotateTransform: including the attribute Angle, CenterX, and CenterY
3. Scaletransform (scale change): includes the attributes ScaleX, ScaleY, CenterX, and CenterY. The ScaleX and ScaleY attributes represent the multiple of object scaling on the X and Y axes. Use the CenterX and CenterY attributes to specify a center point.
4. Skewtransform: includes the attributes AngleX, AngleY, CenterX, and CenterY. Where AngleX is used to make the element tilt relative to the X axis, and AngleY is the angle to make the element tilt around the Y axis. CenterX and CenterY are also the center point locations.
5. TransformGroup: merge the change effects of scale, rotation, twist, etc
Effect screenshot:


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

Effect screenshots

Tags: Attribute

Posted on Mon, 04 Nov 2019 13:29:19 -0500 by unknown