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
→ 