WPF 基于路径的动画和旋转动画

<UserControl x:Class="CMApplication1.Views.AnimiationStudyView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
             xmlns:cal="http://www.caliburnproject.org"
             mc:Ignorable="d"  Width="800" Height="600"  cal:Message.Attach="[Loaded] = [Load($source)]"
             d:DesignHeight="300" d:DesignWidth="300">
       
    <UserControl.Background>
        <ImageBrush ImageSource="/CMApplication1;component/Images/TransitionalsViewBG.jpg" />
    </UserControl.Background>
    <UserControl.Resources>
        <!--<EllipseGeometry x:Key="path" Center="50, 50" RadiusX="100" RadiusY="100" />-->
        <PathGeometry x:Key="path1">
            <PathFigure StartPoint="0, 50" IsClosed="True">
                <ArcSegment Point="100, 50" Size="50, 50"></ArcSegment>
                <ArcSegment Point="0, 50" Size="50, 50"></ArcSegment>
            </PathFigure>
        </PathGeometry>
        <PathGeometry x:Key="path2">
            <PathFigure StartPoint="0, 50" IsClosed="True">
                <ArcSegment Point="100, 50" Size="50, 50"></ArcSegment>
                <ArcSegment Point="0, 50" Size="50, 50"></ArcSegment>
            </PathFigure>
        </PathGeometry>
    </UserControl.Resources>
    <UserControl.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimationUsingPath Storyboard.TargetName="image"
                                      Storyboard.TargetProperty="(Canvas.Left)"
                                        PathGeometry="{StaticResource path2}"
                                      Duration="0:0:5" RepeatBehavior="Forever" Source="X" />
                        <DoubleAnimationUsingPath Storyboard.TargetName="image"
                                      Storyboard.TargetProperty="(Canvas.Top)"
                                     PathGeometry="{StaticResource path2}"
                                      Duration="0:0:5" RepeatBehavior="Forever" Source="Y" />
                        <DoubleAnimation Storyboard.TargetName="image1" Storyboard.TargetProperty="RenderTransform.Angle" To="360" Duration="0:0:5" RepeatBehavior="Forever" />
                        <DoubleAnimation Storyboard.TargetName="image2" Storyboard.TargetProperty="RenderTransform.Angle" To="360" Duration="0:0:15" RepeatBehavior="Forever" />
                        <DoubleAnimation Storyboard.TargetName="image3" Storyboard.TargetProperty="RenderTransform.Angle" To="360" Duration="0:0:45" RepeatBehavior="Forever" />
                           
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </UserControl.Triggers>
    <UniformGrid Columns="2" Rows="2">
        <Grid VerticalAlignment="Center" HorizontalAlignment="Center" Margin="5">
            <Canvas>
                <Path Stroke="Red" StrokeThickness="1" Data="{StaticResource path1}" Canvas.Left="30" Canvas.Top="30" />
                <Path x:Name="image1" Stroke="Pink" StrokeThickness="5" Canvas.Left="30" Canvas.Top="30">
                    <Path.Data>
                        <PathGeometry>
                            <PathFigure StartPoint="-15, 50">
                                <ArcSegment Point="115, 50" Size="60, 60"></ArcSegment>
                            </PathFigure>
                        </PathGeometry>
                    </Path.Data>
                    <Path.RenderTransform>
                        <RotateTransform CenterX="50" CenterY="50" />
                    </Path.RenderTransform>
                </Path>
                <Path x:Name="image2" Stroke="Gray" StrokeThickness="5" Canvas.Left="30" Canvas.Top="30">
                    <Path.Data>
                        <PathGeometry>
                            <PathFigure StartPoint="-30, 50">
                                <ArcSegment Point="130, 50" Size="70, 70"></ArcSegment>
                            </PathFigure>
                        </PathGeometry>
                    </Path.Data>
                    <Path.RenderTransform>
                        <RotateTransform CenterX="50" CenterY="50" />
                    </Path.RenderTransform>
                </Path>
                <Path x:Name="image3" Stroke="Orange" StrokeThickness="5" Canvas.Left="30" Canvas.Top="30">
                    <Path.Data>
                        <PathGeometry>
                            <PathFigure StartPoint="-45, 50">
                                <ArcSegment Point="145, 50" Size="80, 80"></ArcSegment>
                            </PathFigure>
                        </PathGeometry>
                    </Path.Data>
                    <Path.RenderTransform>
                        <RotateTransform CenterX="50" CenterY="50" />
                    </Path.RenderTransform>
                </Path>
                <!--<Image x:Name="image" Canvas.Top="55">
                    <Image.Source>
                        <DrawingImage>
                            <DrawingImage.Drawing>
                                <GeometryDrawing Brush="Sienna">
                                    <GeometryDrawing.Geometry>
                                        <GeometryGroup>
                                            <EllipseGeometry Center="5, 5" RadiusX="10" RadiusY="10" />
                                        </GeometryGroup>
                                    </GeometryDrawing.Geometry>
                                    <GeometryDrawing.Pen>
                                        <Pen Thickness="1" Brush="Transparent" />
                                    </GeometryDrawing.Pen>
                                </GeometryDrawing>
                            </DrawingImage.Drawing>
                        </DrawingImage>
                    </Image.Source>
                </Image>-->
                <!--<Image x:Name="image" Canvas.Top="55">
                    <Image.Source>
                        <DrawingImage>
                            <DrawingImage.Drawing>
                                <GeometryDrawing Brush="Sienna">
                                    <GeometryDrawing.Geometry>
                                        <GeometryGroup>
                                            <EllipseGeometry Center="5, 5" RadiusX="10" RadiusY="10" />
                                            <EllipseGeometry Center="5, 5" RadiusX="5" RadiusY="5" />
                                        </GeometryGroup>
                                    </GeometryDrawing.Geometry>
                                    <GeometryDrawing.Pen>
                                        <Pen Thickness="1" Brush="Transparent" />
                                    </GeometryDrawing.Pen>
                                </GeometryDrawing>
                            </DrawingImage.Drawing>
                        </DrawingImage>
                    </Image.Source>
                </Image>-->
                   
            </Canvas>
        </Grid>
        <Grid VerticalAlignment="Center" HorizontalAlignment="Center" Margin="5">
            <Canvas>
                <Path Stroke="Red" StrokeThickness="1" Data="{StaticResource path2}" Canvas.Left="10" Canvas.Top="10" />
                <Image x:Name="image" Canvas.Top="55">
                    <Image.Source>
                        <DrawingImage>
                            <DrawingImage.Drawing>
                                <GeometryDrawing Brush="Sienna">
                                    <GeometryDrawing.Geometry>
                                        <GeometryGroup>
                                            <EllipseGeometry Center="5, 5" RadiusX="10" RadiusY="10" />
                                            <EllipseGeometry Center="5, 5" RadiusX="5" RadiusY="5" />
                                        </GeometryGroup>
                                    </GeometryDrawing.Geometry>
                                    <GeometryDrawing.Pen>
                                        <Pen Thickness="1" Brush="Transparent" />
                                    </GeometryDrawing.Pen>
                                </GeometryDrawing>
                            </DrawingImage.Drawing>
                        </DrawingImage>
                    </Image.Source>
                </Image>
            </Canvas>
        </Grid>
    </UniformGrid>
</UserControl>


知识共享许可协议
《WPF 基于路径的动画和旋转动画》常伟华 创作。
采用 知识共享 署名-相同方式共享 3.0 中国大陆 许可协议进行许可。
相邻依据:发表时间
  • 多说评论
  • 签名
  • 新浪微博
  • 默认评论
  • Tab Header 5

0 条评论 / 点击此处发表评论

Tab Content 5

开发技术


开发平台和工具

sitemap     712.25ms