WPF动画基础小实例

动画效果如下：

源码如下：

     <UniformGrid>
            <Canvas
                x:Name="cvs1"
                Width="340"
                Height="215"
                Margin="0"
                HorizontalAlignment="Left">
                <Path
                    x:Name="path1"
                    Margin="0"
                    HorizontalAlignment="Left"
                    Data="M10,80 L120,80 180,200 300,200"
                    Stroke="LightGreen"
                    StrokeEndLineCap="Round"
                    StrokeLineJoin="Round"
                    StrokeStartLineCap="Round"
                    StrokeThickness="5" />
            </Canvas>
            <Canvas
                x:Name="cvs2"
                Width="340"
                Height="215"
                Margin="0"
                HorizontalAlignment="Left">
                <Canvas.Triggers>
                    <EventTrigger RoutedEvent="Loaded">
                        <BeginStoryboard Name="MyStoryboard">
                            <Storyboard>
                                <!--  Animates the button along the path.  -->
                                <PointAnimationUsingPath
                                    AutoReverse="True"
                                    RepeatBehavior="Forever"
                                    Storyboard.TargetName="myTransform"
                                    Storyboard.TargetProperty="Center"
                                    Duration="0:0:5">
                                    <PointAnimationUsingPath.PathGeometry>
                                        <PathGeometry Figures="M10,100 L120,100 180,200 300,200" />
                                    </PointAnimationUsingPath.PathGeometry>
                                </PointAnimationUsingPath>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Canvas.Triggers>
                <Path
                    x:Name="path2"
                    Margin="0"
                    VerticalAlignment="Top"
                    Data="M10,100 L120,100 180,200 300,200"
                    Stroke="LightGreen"
                    StrokeEndLineCap="Round"
                    StrokeStartLineCap="Round"
                    StrokeThickness="5" />

                <Path Margin="0,0,0,5" Fill="Orange">
                    <Path.Data>
                        <EllipseGeometry
                            x:Name="myTransform"
                            Center="5,100"
                            RadiusX="5"
                            RadiusY="5" />
                    </Path.Data>
                    <!--<Path.RenderTransform>
                        <MatrixTransform x:Name="myTransform">
                            <MatrixTransform.Matrix>
                                <Matrix OffsetX="10" OffsetY="100" />
                            </MatrixTransform.Matrix>
                        </MatrixTransform>
                    </Path.RenderTransform>-->
                </Path>
            </Canvas>
            <Canvas
                Width="340"
                Height="240"
                HorizontalAlignment="Left">
                <Canvas.Triggers>
                    <EventTrigger RoutedEvent="Loaded">
                        <BeginStoryboard>
                            <Storyboard>

                                <!--  Animates the button along the path.  -->
                                <MatrixAnimationUsingPath
                                    AutoReverse="True"
                                    RepeatBehavior="Forever"
                                    Storyboard.TargetName="myMatrixTransform"
                                    Storyboard.TargetProperty="Matrix"
                                    Duration="0:0:5">
                                    <MatrixAnimationUsingPath.PathGeometry>
                                        <PathGeometry Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
                                    </MatrixAnimationUsingPath.PathGeometry>
                                </MatrixAnimationUsingPath>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Canvas.Triggers>

                <!--  This Path is only to show the path that the animated object will follow.  -->
                <Path
                    Margin="15,15,15,15"
                    VerticalAlignment="Top"
                    Data="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100"
                    Stretch="None"
                    Stroke="Black"
                    StrokeThickness="2" />

                <!--  The Button that is animated across the screen.  -->
                <Path Margin="0,0,15,15" Fill="Blue">
                    <Path.Data>
                        <RectangleGeometry x:Name="MyAnimatedRectGeometry" Rect="0,0 30 30" />
                    </Path.Data>
                    <Path.RenderTransform>
                        <MatrixTransform x:Name="myMatrixTransform">
                            <MatrixTransform.Matrix>
                                <Matrix OffsetX="10" OffsetY="100" />
                            </MatrixTransform.Matrix>
                        </MatrixTransform>
                    </Path.RenderTransform>
                </Path>
            </Canvas>
            <Canvas
                Width="340"
                Height="215"
                Margin="0"
                HorizontalAlignment="Left">
                <Canvas.Triggers>
                    <EventTrigger RoutedEvent="Loaded">
                        <BeginStoryboard Name="MyBeginStoryboard">
                            <Storyboard>
                                <!--  Animates the rectangle horizotally along the path.  -->
                                <DoubleAnimationUsingPath
                                    AutoReverse="False"
                                    RepeatBehavior="Forever"
                                    Source="X"
                                    Storyboard.TargetName="MyAnimatedTransform"
                                    Storyboard.TargetProperty="X"
                                    Duration="0:0:5">
                                    <DoubleAnimationUsingPath.PathGeometry>
                                        <PathGeometry Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
                                    </DoubleAnimationUsingPath.PathGeometry>
                                </DoubleAnimationUsingPath>
                                <!--  Animates the rectangle vertically along the path.  -->
                                <DoubleAnimationUsingPath
                                    AutoReverse="False"
                                    RepeatBehavior="Forever"
                                    Source="Y"
                                    Storyboard.TargetName="MyAnimatedTransform"
                                    Storyboard.TargetProperty="Y"
                                    Duration="0:0:5">
                                    <DoubleAnimationUsingPath.PathGeometry>
                                        <PathGeometry Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
                                    </DoubleAnimationUsingPath.PathGeometry>
                                </DoubleAnimationUsingPath>

                                <ColorAnimation
                                    AutoReverse="True"
                                    RepeatBehavior="Forever"
                                    Storyboard.TargetName="opacityAnimatedColorRectangle"
                                    Storyboard.TargetProperty="(Rectangle.Fill).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"
                                    Duration="0:0:5">
                                    <ColorAnimation.By>
                                        <Color
                                            ScA="-1.0"
                                            ScB="0.0"
                                            ScG="0.0"
                                            ScR="0.0" />
                                    </ColorAnimation.By>
                                </ColorAnimation>

                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Canvas.Triggers>
                <!--  This Path is only to show the path that the animated object will follow.  -->
                <Path
                    Name="opacityAnimatedColorRectangle"
                    Margin="15,15,15,15"
                    VerticalAlignment="Top"
                    Data="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100"
                    Stretch="None"
                    Stroke="Black"
                    StrokeThickness="2">
                    <Path.Fill>
                        <LinearGradientBrush>
                            <LinearGradientBrush.GradientStops>
                                <GradientStop Offset="0.0" Color="Green" />
                                <GradientStop Offset="0.75" Color="LightGreen" />
                            </LinearGradientBrush.GradientStops>
                        </LinearGradientBrush>
                    </Path.Fill>
                </Path>
                <!--  This geometry renders the rectangle that is animated across the screen.  -->
                <Path Margin="0,0,15,15" Fill="Blue">
                    <Path.Data>
                        <RectangleGeometry x:Name="MyAnimatedRectGeometryX" Rect="0,0 30 30" />
                    </Path.Data>
                    <Path.RenderTransform>
                        <TranslateTransform x:Name="MyAnimatedTransform" X="10" Y="100" />
                    </Path.RenderTransform>
                </Path>
            </Canvas>
        </UniformGrid>

        /// <summary>
        /// 后台设置动画
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Window1_Loaded(object sender, RoutedEventArgs e)
        {
            AnimationByPath(cvs1, path1, path1.StrokeThickness);
        }

        /// <summary>
        /// 路径动画
        /// </summary>
        /// <param name="cvs">画板</param>
        /// <param name="path">路径</param>
        /// <param name="target">动画对象</param>
        /// <param name="duration">时间</param>
        private void AnimationByPath(Canvas cvs, Path path, double targetWidth, int duration = 5)
        {
            #region 创建动画对象
            Rectangle target = new Rectangle();
            target.Width = targetWidth;
            target.Height = targetWidth;
            target.Fill = new SolidColorBrush(Colors.Orange);

            DropShadowEffect effect = new DropShadowEffect();
            effect.Color = Colors.Red;
            effect.BlurRadius = 5;
            effect.ShadowDepth = 0;
            effect.Direction = 0;
            target.Effect = effect;

            cvs.Children.Add(target);
            Canvas.SetLeft(target, -targetWidth / 2);
            Canvas.SetTop(target, -targetWidth / 2);
            target.RenderTransformOrigin = new Point(0.5, 0.5);
            #endregion

            MatrixTransform matrix = new MatrixTransform();
            TransformGroup groups = new TransformGroup();
            groups.Children.Add(matrix);
            target.RenderTransform = groups;
            string registname = "matrix" + Guid.NewGuid().ToString().Replace("-", "");
            this.RegisterName(registname, matrix);
            MatrixAnimationUsingPath matrixAnimation = new MatrixAnimationUsingPath();
            matrixAnimation.PathGeometry = PathGeometry.CreateFromGeometry(Geometry.Parse(path.Data.ToString()));
            matrixAnimation.Duration = new Duration(TimeSpan.FromSeconds(duration));
            matrixAnimation.DoesRotateWithTangent = true;//跟随路径旋转
            matrixAnimation.RepeatBehavior = RepeatBehavior.Forever;//循环
            Storyboard story = new Storyboard();
            story.Children.Add(matrixAnimation);
            Storyboard.SetTargetName(matrixAnimation, registname);
            Storyboard.SetTargetProperty(matrixAnimation, new PropertyPath(MatrixTransform.MatrixProperty));

            story.FillBehavior = FillBehavior.Stop;
            story.Begin(target, true);
        }