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

DoubleAnimation:

<!--Linear interpolation animation 360 degree rotation-->
    <Canvas Background="White">
        <!--trigger-->
        <Canvas.Triggers>
            <!--Event trigger -->
            <EventTrigger RoutedEvent="Canvas.Loaded">
                <!--Perform an action-->
                <EventTrigger.Actions>
                    <!--Start story-->
                    <BeginStoryboard>
                        <!--Create a story version-->
                        <Storyboard x:Name="storyboard1">
                            <!--Create a DoubleAnimation class-->
                            <!--Angle: Rotation angle; RepeatBehavior="Forever": Never stop running-->
                            <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 color-->
            <Rectangle.Fill>
                <ImageBrush ImageSource="Content\images\1037904.jpg"/>
            </Rectangle.Fill>
            <!--RenderTransform Special effect (deformation): it can stretch, rotate and twist elements-->
            <Rectangle.RenderTransform>
                <!--Combinatorial transformation-->
                <TransformGroup>
                    <!--Zoom change-->
                    <ScaleTransform/>
                    <!--Distortion-->
                    <SkewTransform/>
                    <!--Variation of Spin-->
                    <RotateTransform/>
                    <!--Translation change-->
                    <TranslateTransform/>
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>
</Canvas>

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:

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>

Effect screenshots

Tags: Attribute

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