正文

高级动画(代码片段)

lonelyxmas  lonelyxmas  2022-12-22  453

关键词：

1、动态变换。

变换提供了自定义元素的最强大方式之一。每个元素都能以两种不同的方式使用变换，RenderTransform属性和LayoutTransform属性。RenderTransform属性效率更高。因为是在布局之后应用变换，并且用于变换最终的渲染输出。LayoutTransform在布局前应用，从而其他控件需要重新排列以适应变换。

使用 RenderTransform：

<Window.Resources>        
    <Style TargetType="x:Type Button">
        <Setter Property="Width" Value="100"></Setter>
        <Setter Property="Height" Value="60"></Setter>
        <Setter Property="Margin" Value="10"></Setter>
        <Setter Property="FontSize" Value="20"></Setter> 
        <Setter Property="RenderTransformOrigin" Value="0.5,0.5"></Setter>
        <Setter Property="RenderTransform">
            <Setter.Value>
                <!--使用RotateTransform时，一定要使用TransformGroup，否则不能进行动画哦-->
                <TransformGroup>
                    <RotateTransform></RotateTransform>
                </TransformGroup>
            </Setter.Value>
        </Setter>
        
        <Style.Triggers>
            <EventTrigger RoutedEvent="Button.MouseEnter">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard RepeatBehavior="Forever" Storyboard.TargetProperty="RenderTransform.Children[0].Angle">
                            <DoubleAnimation From="0" To="360" Duration="0:0:2"></DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
            
            <EventTrigger RoutedEvent="Button.MouseLeave">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard Storyboard.TargetProperty="RenderTransform.Children[0].Angle">
                            <DoubleAnimation  To="0" Duration="0:0:1"></DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>            
        </Style.Triggers>
    </Style>        
</Window.Resources>
    
<StackPanel>
    <Button Content="Test1"></Button>
    <Button Content="Tes2"></Button>
    <Button Content="Test3"></Button>
    <Button Content="Test4"></Button>
</StackPanel>

效果图：

使用LayOutTransform：

 <Window.Resources>  
    <Style TargetType="x:Type Button">
        <Setter Property="Width" Value="100"></Setter>
        <Setter Property="Height" Value="60"></Setter>
        <Setter Property="Margin" Value="10"></Setter>
        <Setter Property="FontSize" Value="20"></Setter> 
        <Setter Property="RenderTransformOrigin" Value="0.5,0.5"></Setter>
        <Setter Property="LayoutTransform">
            <Setter.Value>
                <RotateTransform></RotateTransform>
            </Setter.Value>
        </Setter>
            
        <Style.Triggers>
            <EventTrigger RoutedEvent="Button.MouseEnter">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard RepeatBehavior="Forever" Storyboard.TargetProperty="LayoutTransform.Angle">
                            <DoubleAnimation From="0" To="360" Duration="0:0:2"></DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
            
            <EventTrigger RoutedEvent="Button.MouseLeave">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard Storyboard.TargetProperty="LayoutTransform.Angle">
                            <DoubleAnimation  To="0" Duration="0:0:1"></DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>                
        </Style.Triggers>
    </Style>
</Window.Resources>    
<StackPanel>
    <Button Content="Test1"></Button>
    <Button Content="Tes2"></Button>
    <Button Content="Test3"></Button>
    <Button Content="Test4"></Button>
</StackPanel>

效果图：

技术分享图片

2、动态改变多个变换。

就是在TransformGroup中放置多个变换类。

xaml代码：

<Window.Triggers>
    <EventTrigger RoutedEvent="Window.Loaded">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard SpeedRatio="1.5">
                    <DoubleAnimation Storyboard.TargetName="border_element"
                            Storyboard.TargetProperty="Opacity"
                            From="0.2" To="1" Duration="0:0:1"></DoubleAnimation>
                    
                    <DoubleAnimation Storyboard.TargetName="border_element"                            
                            Storyboard.TargetProperty="RenderTransform.Children[1].Angle"
                            From="50" To="0" Duration="0:0:2" ></DoubleAnimation>

                    <DoubleAnimation Storyboard.TargetName="border_element"
                            Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                            From="0" To="1" Duration="0:0:2" AccelerationRatio="1"></DoubleAnimation>
                    
                    <DoubleAnimation Storyboard.TargetName="border_element"
                            Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                            From="0" To="1" Duration="0:0:2" AccelerationRatio="1"></DoubleAnimation>

                   <DoubleAnimation Storyboard.TargetName="border_element"
                                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                                        To="0.98" BeginTime="0:0:2" Duration="0:0:0.05"  DecelerationRatio="1"></DoubleAnimation>
                    
                    <DoubleAnimation Storyboard.TargetName="border_element"
                            Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                            To="0.98" BeginTime="0:0:2" Duration="0:0:0.05" DecelerationRatio="1"></DoubleAnimation>

                 
                    <DoubleAnimation Storyboard.TargetName="border_element"
                                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                                        To="1" BeginTime="0:0:2.05" Duration="0:0:0.2"  AccelerationRatio="1"></DoubleAnimation>
                   
                    <DoubleAnimation Storyboard.TargetName="border_element"
                            Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                            To="1" BeginTime="0:0:2.05" Duration="0:0:0.2" AccelerationRatio="1"></DoubleAnimation>

                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</Window.Triggers>
    
<Grid>
    <Border Name="border_element" BorderBrush="Red" BorderThickness="3" CornerRadius="5">
        <Border.RenderTransform>
            <TransformGroup>
                <ScaleTransform></ScaleTransform>
                <RotateTransform></RotateTransform>
            </TransformGroup>
        </Border.RenderTransform>

        <ListBox FontSize="20">
            <ListBoxItem Content="A"></ListBoxItem>
            <ListBoxItem Content="B"></ListBoxItem>
            <ListBoxItem Content="C"></ListBoxItem>
            <ListBoxItem Content="D"></ListBoxItem>
            <ListBoxItem Content="E"></ListBoxItem>
            <ListBoxItem Content="F"></ListBoxItem>
            <ListBoxItem Content="G"></ListBoxItem>
            <ListBoxItem Content="H"></ListBoxItem>
            <ListBoxItem Content="I"></ListBoxItem>
            <ListBoxItem Content="J"></ListBoxItem>
            <ListBoxItem Content="K"></ListBoxItem>
            <ListBoxItem Content="L"></ListBoxItem>
            <ListBoxItem Content="M"></ListBoxItem>
            <ListBoxItem Content="N"></ListBoxItem>
            <ListBoxItem Content="O"></ListBoxItem>
            <ListBoxItem Content="P"></ListBoxItem>
            <ListBoxItem Content="Q"></ListBoxItem>
            <ListBoxItem Content="R"></ListBoxItem>
            <ListBoxItem Content="S"></ListBoxItem>
            <ListBoxItem Content="T"></ListBoxItem>
            <ListBoxItem Content="U"></ListBoxItem>
            <ListBoxItem Content="V"></ListBoxItem>
            <ListBoxItem Content="W"></ListBoxItem>
            <ListBoxItem Content="X"></ListBoxItem>
            <ListBoxItem Content="Y"></ListBoxItem>
            <ListBoxItem Content="Z"></ListBoxItem>
        </ListBox>
    </Border>
</Grid>

效果图：

3、动态改变画刷。

使用ColorAnimation改变颜色，使用PointAnimatin改变坐标。

xaml代码：

<Window.Triggers>
    <EventTrigger RoutedEvent="Window.Loaded">
       <EventTrigger.Actions>
             <BeginStoryboard>
                <Storyboard>
                    <!--设置Fill.GradientOrigin属性。-->
                    <PointAnimation Storyboard.TargetName="ellipse1" 
                                    Storyboard.TargetProperty="Fill.GradientOrigin" 
                                    To="1,1" Duration="0:0:5" ></PointAnimation>

                    <!--设置Fill.GradientStops属性。-->
                    <ColorAnimation Storyboard.TargetName="ellipse1" 
                                    Storyboard.TargetProperty="Fill.GradientStops[0].Color" 
                                    To="Pink" Duration="0:0:5" ></ColorAnimation>

                    <ColorAnimation Storyboard.TargetName="ellipse1" 
                                    Storyboard.TargetProperty="Fill.GradientStops[1].Color" 
                                    To="Gold" Duration="0:0:5" ></ColorAnimation>

                    <ColorAnimation Storyboard.TargetName="ellipse1" 
                                    Storyboard.TargetProperty="Fill.GradientStops[2].Color" 
                                    To="Gray" Duration="0:0:5" ></ColorAnimation>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</Window.Triggers>
    
<Grid>
    <Ellipse Name="ellipse1" Width="150" Height="150">
        <Ellipse.Fill>
            <RadialGradientBrush GradientOrigin="0.1,0.1">
                <RadialGradientBrush.GradientStops>
                    <GradientStop Offset="0.3" Color="Red"></GradientStop>
                    <GradientStop Offset="0.6" Color="Green"></GradientStop>
                    <GradientStop Offset="0.9" Color="Yellow"></GradientStop>
                </RadialGradientBrush.GradientStops>
            </RadialGradientBrush>                
        </Ellipse.Fill>
    </Ellipse>
</Grid>

效果图：

4、动态改变像素着色器。

 <Window.Triggers>
    <EventTrigger RoutedEvent="Button.MouseEnter">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard Storyboard.TargetName="btn1" Storyboard.TargetProperty="Effect.Radius">
                    <DoubleAnimation To="10" Duration="0:0:2" ></DoubleAnimation>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
    
    <EventTrigger RoutedEvent="Button.MouseLeave">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard Storyboard.TargetName="btn1" Storyboard.TargetProperty="Effect.Radius">
                    <DoubleAnimation To="0" Duration="0:0:1" ></DoubleAnimation>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</Window.Triggers>    
    
<StackPanel>        
    <Button Name="btn1" Width="200" Height="80" Content="Hello,World!!!" FontSize="20">
        <Button.Effect>
            <BlurEffect Radius="0"></BlurEffect>
        </Button.Effect>
    </Button>
</StackPanel>

效果图：

技术分享图片

5、关键帧动画。

如果需要创建具有多个分段的动画和不规则移动的动画，这个时候可以使用关键帧动画。关键帧动画是由许多较短的段构成的动画，每段表示动画的初始值、最终值或中间值。当运行动画时，她平滑地从一个值移动到另一个值。关键帧对象基本上都有Value属性和KeyTime属性。和其他普通动画不同的是Value属性的数据类型，在LinearPointKeyFrame类中是Point类型，在DoubleKeyFrame类中是double类型。

xaml代码：

 <Window.Triggers>
    <EventTrigger RoutedEvent="Window.Loaded">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="Fill.GradientOrigin">
                    <!--PointAnimationUsingKeyFrames：使用线性插值-->
                    <PointAnimationUsingKeyFrames>
                        <!--LinearPointKeyFrame:关键帧对象-->
                        <LinearPointKeyFrame Value="0.7,0.3" KeyTime="0:0:0"></LinearPointKeyFrame>
                        <LinearPointKeyFrame Value="0.3,0.7" KeyTime="0:0:3"></LinearPointKeyFrame>
                        <LinearPointKeyFrame Value="0.5,0.2" KeyTime="0:0:5"></LinearPointKeyFrame>
                    </PointAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</Window.Triggers>  
  
<Grid>
    <Ellipse Width="200" Height="200" Name="ellipse1">
        <Ellipse.Fill>
            <RadialGradientBrush>
                <RadialGradientBrush.GradientStops>
                    <GradientStop Offset="0.3" Color="Red"></GradientStop>
                    <GradientStop Offset="0.6" Color="Yellow"></GradientStop>
                    <GradientStop Offset="0.9" Color="Green"></GradientStop>
                </RadialGradientBrush.GradientStops>
            </RadialGradientBrush>
        </Ellipse.Fill>
    </Ellipse>
</Grid>

效果图：

6、离散的关键帧动画。

如上图，使用的是线性关键帧动画，所以，它在关键帧动画之间平滑地过度。另一种选择是使用离散关键帧，离散关键帧不是进行插值，当到达关键时间时，属性突然改变为新值。线性关键帧类通常使用"Linear"+数据类型+KeyFrame"的形式进行命名，离散关键帧类使用"Discrete数据类型+KeyFrame"的形式命名。当运行这个动画时中心点会在适当的时间从一个位置跳转到下一个位置。所有关键帧动画类都支持离散关键帧，但只有一部分关键动画类支持线性关键帧。

Xaml代码：

<Window.Triggers>
    <EventTrigger RoutedEvent="Button.Click" SourceName="btn1">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="Fill.GradientOrigin">
                    <PointAnimationUsingKeyFrames>
                        <DiscretePointKeyFrame Value="0.2,0.8" KeyTime="0:0:1"></DiscretePointKeyFrame>
                        <DiscretePointKeyFrame Value="0.7,0.8" KeyTime="0:0:2"></DiscretePointKeyFrame>
                        <DiscretePointKeyFrame Value="0.3,0.2" KeyTime="0:0:3"></DiscretePointKeyFrame>
                    </PointAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</Window.Triggers>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition Height="3*"></RowDefinition>
    </Grid.RowDefinitions>        
    <Button Name="btn1" Content="点击进行关键帧动画" Width="150" Margin="10" Grid.Row="0"></Button>        
    <Ellipse Name="ellipse1" Grid.Row="1" Width="180"  Height="180">
        <Ellipse.Fill >
            <RadialGradientBrush>
                <RadialGradientBrush.GradientStops>
                    <GradientStop Offset="0.2" Color="Red"></GradientStop>
                    <GradientStop Offset="0.4" Color="Yellow"></GradientStop>
                    <GradientStop Offset="0.6" Color="Gray"></GradientStop>
                    <GradientStop Offset="0.8" Color="Khaki"></GradientStop>
                </RadialGradientBrush.GradientStops>
            </RadialGradientBrush>
        </Ellipse.Fill>
    </Ellipse>
</Grid>

效果图：

技术分享图片

7、缓动关键帧。

由离散关键帧可以得出：尽管关键帧动画被分割成多段，但每段仍使用普通的线性插值。常用的缓动关键帧类有：EasingDoubleKeyFrame、EasingColorKeyFrame、EasyingPointKeyFrame。每个缓动关键帧类和对应的线性插值关键帧类的工作方式相同，但是额外提供了EasyingFunction属性。

Xaml代码：

<Window.Triggers>
    <EventTrigger RoutedEvent="Button.Click" SourceName="btn1">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="Fill.GradientOrigin">
                    <PointAnimationUsingKeyFrames>                       
                        <LinearPointKeyFrame Value="0.7,0.3" KeyTime="0:0:5"></LinearPointKeyFrame>
                         <!--使用缓动函数类-->
                        <EasingPointKeyFrame Value="0.3,0.7" KeyTime="0:0:5">
                            <EasingPointKeyFrame.EasingFunction>
                                <CircleEase></CircleEase>
                            </EasingPointKeyFrame.EasingFunction>
                        </EasingPointKeyFrame>
                        <LinearPointKeyFrame Value="0.5,0.9" KeyTime="0:0:8"></LinearPointKeyFrame>
                        <LinearPointKeyFrame Value="0.9,0.6" KeyTime="0:0:10"></LinearPointKeyFrame>
                        <LinearPointKeyFrame Value="0.8,0.2" KeyTime="0:0:12"></LinearPointKeyFrame>
                        <LinearPointKeyFrame Value="0.7,0.3" KeyTime="0:0:14"></LinearPointKeyFrame>
                    </PointAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</Window.Triggers>
    
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition Height="3*"></RowDefinition>
    </Grid.RowDefinitions>        
    <Button Name="btn1" Content="点击进行关键帧动画" Width="150" Margin="10" Grid.Row="0"></Button>        
    <Ellipse Name="ellipse1" Grid.Row="1" Width="180"  Height="180">
        <Ellipse.Fill >
            <RadialGradientBrush>
                <RadialGradientBrush.GradientStops>
                    <GradientStop Offset="0.2" Color="Red"></GradientStop>
                    <GradientStop Offset="0.4" Color="Yellow"></GradientStop>
                    <GradientStop Offset="0.6" Color="Gray"></GradientStop>
                    <GradientStop Offset="0.8" Color="Khaki"></GradientStop>
                </RadialGradientBrush.GradientStops>
            </RadialGradientBrush>
        </Ellipse.Fill>
    </Ellipse>
</Grid>

效果图：

8、关键帧动画。

<Window.Resources>
    <PathGeometry x:Key="path">
        <PathFigure IsClosed="True">
            <ArcSegment Point="100,200" Size="15,10" SweepDirection="Clockwise"></ArcSegment>
            <ArcSegment Point="400,50" Size="5,5"></ArcSegment>
        </PathFigure>
    </PathGeometry>
</Window.Resources>

<Window.Triggers>
    <EventTrigger RoutedEvent="Window.Loaded">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimationUsingPath Storyboard.TargetName="image" 
                                              Storyboard.TargetProperty="(Canvas.Left)" 
                                              PathGeometry="StaticResource path"
                                              Duration="0:0:5" RepeatBehavior="Forever" Source="X">                            
                                              </DoubleAnimationUsingPath>
                                              
                    <DoubleAnimationUsingPath Storyboard.TargetName="image"
                                               Storyboard.TargetProperty="(Canvas.Top)" 
                                              PathGeometry="StaticResource path"
                                              Duration="0:0:5" RepeatBehavior="Forever" Source="Y">                            
                    </DoubleAnimationUsingPath>                        
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</Window.Triggers>

<Canvas>
    <Path Stroke="Red" StrokeThickness="1" Data="StaticResource path" Canvas.Top="10" Canvas.Left="10"></Path>
    <!--<Ellipse  Name="image" Width="15" Height="15" Fill="Green"></Ellipse>-->
    
    <Image Name="image">
        <Image.Source>
            <DrawingImage>
                <DrawingImage.Drawing>
                    <GeometryDrawing Brush="LightSkyBlue">
                        <GeometryDrawing.Geometry>
                            <GeometryGroup>
                                <EllipseGeometry Center="10,10" RadiusX="9" RadiusY="4"></EllipseGeometry>
                                <EllipseGeometry Center="10,10" RadiusX="4" RadiusY="9"></EllipseGeometry>
                            </GeometryGroup>
                        </GeometryDrawing.Geometry>
                        <GeometryDrawing.Pen>
                            <Pen Thickness="1" Brush="Black"></Pen>
                        </GeometryDrawing.Pen>                        
                    </GeometryDrawing>
                </DrawingImage.Drawing>
            </DrawingImage>
        </Image.Source>
    </Image>    
</Canvas>

效果图：

9、基于帧的动画。

使用帧的动画要为静态的CompositionTarger.Rendering事件关联事件处理程序，一旦关联这个处理程序，WPF就开始不断地调用这个事件处理程序，WPF将每秒调用60次。当动画结束后，分离事件处理程序。

xaml代码：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition Height="3*"></RowDefinition>
    </Grid.RowDefinitions>
    <Button Width="100" Name="btnStart" Content="开始" FontSize="20" HorizontalAlignment="Left" Click="btnStart_Click"></Button>
    <Button Width="100" Name="btnStop" Content="停止" FontSize="20" HorizontalAlignment="Right" Click="btnStop_Click"></Button>
    <Canvas Name="canvas" Grid.Row="1">            
    </Canvas>
</Grid>

后台代码(EllipseInfo类)：

public class EllipseInfo

    public Ellipse Ellipse  get; set; 

    /// <summary>
    /// Y轴的速度。
    /// </summary>
    public double VelocityY  get; set; 

    public EllipseInfo(Ellipse _ellipse, double _velocityY)
    
        Ellipse = _ellipse;
        VelocityY = _velocityY;

后台代码：

public partial class MainWindow : Window

    public MainWindow()
    
        InitializeComponent();
    

    private List<EllipseInfo> listEllipse = new List<EllipseInfo>(); //声明一个Ellipse类型的list集合。
    private double acclerationY = 0.1;//Y轴加速度。
    private int minStartingSpeed = 1; //开始时最慢的速度。
    private int maxStartingSpeed = 50; //开始时最快速度。
    private double speedRatio = 0.1;  //速度比率：0.1
    private int minEllipses = 20;   //最少椭圆数量。
    private int maxEllipses = 100;  //最多椭圆数量。
    private int ellipseRadius = 10; //椭圆的半径。
    private bool rendering = false;

    private void btnStart_Click(object sender, RoutedEventArgs e)
    
        if (rendering == false)
        
            listEllipse.Clear();
            canvas.Children.Clear();
            CompositionTarget.Rendering += CompositionTarget_Rendering;
            rendering = true;
        
    

    void CompositionTarget_Rendering(object sender, EventArgs e)
    
        if (listEllipse.Count == 0)
        
            int halfCanvasWidth = (int)canvas.ActualWidth / 2;
            Random random = new Random();
            int ellipseCount = random.Next(minEllipses, maxEllipses + 1);
            for (int i = 0; i < ellipseCount; i++)
            
                Ellipse ellipse = new Ellipse();//创建一个椭圆。                   
                ellipse.Fill = new SolidColorBrush(Colors.LimeGreen);//设置椭圆颜色。
                ellipse.Width = ellipseRadius;//设置椭圆的宽。
                ellipse.Height = ellipseRadius;//设置椭圆的高。
                Canvas.SetLeft(ellipse, halfCanvasWidth + random.Next(-halfCanvasWidth, halfCanvasWidth)); //设置椭圆位置。
                Canvas.SetTop(ellipse, 0); //设置椭圆位置。
                canvas.Children.Add(ellipse); //将创建出来的椭圆加入到canvas面板中。
                EllipseInfo info = new EllipseInfo(ellipse, speedRatio * random.Next(minStartingSpeed, maxStartingSpeed)); //实例化EllipseInfo。
                listEllipse.Add(info); //将创建好的EllipseInfo加入到listEllipse集合中。
            
        
        else
        
            for (int i = listEllipse.Count-1; i >= 0; i--)
            
                EllipseInfo info = listEllipse[i]; //得到椭圆。                   
                double top = Canvas.GetTop(info.Ellipse);//得到top坐标值。
                Canvas.SetTop(info.Ellipse, top + 1 * info.VelocityY);
                if (top >= canvas.ActualHeight - ellipseRadius * 2 - 10)
                
                    listEllipse.Remove(info);
                
                else
                
                    info.VelocityY += acclerationY;
                
                if (listEllipse.Count == 0)
                
                    StopRendering();                        
                
            
        
    
    //取消关联事件处理程序。
    private void StopRendering()
    
        CompositionTarget.Rendering -= CompositionTarget_Rendering;
        rendering = false;
    

    private void btnStop_Click(object sender, RoutedEventArgs e)
    
        StopRendering();

效果图：

技术分享图片

End!

css高级篇——过渡动画(代码片段)

CSSTransitions让我们不写一行JavaScript代码也能实现过渡动画。举一个最简单的例子：a:linkcolor:hsl(36,50%,50%);a:hovercolor:hsl(36,100%,50%);当鼠标悬浮于某个链接时，它的颜色会从hsl(36,50%,50%)瞬间变化为hsl(36,100%,50%)。这个变化因为没... 查看详情

css高级篇——过渡动画(代码片段)

javascript学习之dom高级操作（动画）(代码片段)

DOM动画效果让一个元素从左至右进行运动<divid="box"></div>varbox=document.getElementById("box");vart=null;t=setInterval(function())运动的终止条件t=setInterval(function()终止条件) 查看详情

ios核心动画高级技巧-8(代码片段)

iOS核心动画高级技巧-1 iOS核心动画高级技巧-2 iOS核心动画高级技巧-3 iOS核心动画高级技巧-4 iOS核心动画高级技巧-5 iOS核心动画高级技巧-6 iOS核心动画高级技巧-715.图层性能图层性能要更快性能，也要做对正... 查看详情

swiftui之深入解析高级动画的路径paths(代码片段)

一、前言本文将深入探讨一些创建SwiftUI动画的高级技术，讨论Animatable的协议，它可靠的伙伴AnimatableData，强大但经常被忽略的GeometryEffect以及完全被忽视但全能的AnimatableModifier协议。这些都是被官方文档完全忽略的主... 查看详情

36-vue之echarts高级-动画的使用(代码片段)

ECharts高级-动画的使用前言加载动画增量动画动画的配置前言本篇来学习下ECharts中动画的使用加载动画showLoading()：显示加载动画，一般在获取图表数据之前显示加载动画hideLoading()：隐藏加载动画，在获取图表数... 查看详情

swiftui之深入解析高级动画的animatablemodifier使用(代码片段)

一、前言在我之前的SwiftUI之深入解析高级动画的路径Paths和SwiftUI之深入解析高级动画的几何效果GeometryEffect两篇博客中，已经对Animatable协议使用做详细的分析，本文将分析AnimatableModifier，使用它可以完成更多的动画... 查看详情

如何使用css创建高级动画，这个函数必须掌握(代码片段)

微信搜索【大迁世界】,我会第一时间和你分享前端行业趋势，学习途径等等。本文GitHubhttps://github.com/qq449245884/xiaozhi已收录，有一线大厂面试完整考点、资料以及我的系列文章。我们每天都在网上摸鱼，作为前端开发... 查看详情

视觉高级篇18#如何生成简单动画让图形动起来？(代码片段)

说明【跟月影学可视化】学习笔记。动画的三种形式固定帧动画：预先准备好要播放的静态图像，然后将这些图依次播放，实现起来最简单，只需要为每一帧准备一张图片，然后循环播放即可。增量动画：... 查看详情

echarts高级动画的使用交互api(代码片段)

1.1.动画的使用1.1.1.加载动画ECharts已经内置好了加载数据的动画,我们只需要在合适的时机显示或者隐藏即可显示加载动画mCharts.showLoading()一般,我们会在获取图表数据之前显示加载动画隐藏加载动画mCharts.hideLoading()一般,我们会... 查看详情

jquery高级操作详解(代码片段)

文章目录JQuery高级操作详解1.动画2.遍历3.事件绑定4.插件JQuery高级操作详解1.动画三种方式显示和隐藏元素：默认显示和隐藏方式show([speed,[easing],[fn]])。（显示）hide([speed,[easing],[fn]])。（隐藏）toggle([speed,[easing]... 查看详情

矢量图形svg&高级动画(代码片段)

前言 SVG，全名ScalableVectorGraphics可伸缩矢量图形，这种图像格式在前端已经是非常广泛了，矢量图像：SVG是W3C退出的一种开放标准的文本格式的矢量图形描述语言，他也是基于XML的、专门为网络而设... 查看详情

视觉高级篇19#如何用着色器实现像素动画？(代码片段)

说明【跟月影学可视化】学习笔记。如何用着色器实现固定帧动画<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/>&l... 查看详情

css高级篇——过渡动画(代码片段)

ue4高级动画系统ml_dowhile(truefalse)的含义(代码片段)

当condition=true时第一次运行：第二次运行通过模拟得出各自的意思：目前还不知道对于C++代码来说意义大不大，我在YouTube上看到有大佬将DoOnce写成C++结构体的形式，封装起来确实容易理解，但是... 查看详情

svg动画精髓(代码片段)

TL;DR本文主要是讲解关于SVG的一些高级动画特效，比如SVG动画标签，图形渐变，路径动画，线条动画，SVG裁剪等。例如：路径动画图形渐变：线条动画：以及，相关的动画的矩阵知识，这个也是现在CSS动画里面最重要，同时也是... 查看详情

p24:react高级-css3的关键帧keyframes动画(代码片段)

React16基础阐述keyframes动画介绍使用动画完整CSS代码的实现总结阐述用transition只能作一些最简单的动画，如果你想稍微复杂点，transition就做不出来了。这时候就可以用CSS3中的关键帧动画keyframes。本文就花几分钟学习一下k... 查看详情

wpf动画(代码片段)

原文:WPF动画1、基本动画。WPF提供了一个更高级的模型，通过该模型可以只关注动画的定义，而不考虑它们的渲染方式，这个模型基于依赖项属性基础架构，本质上，WPF动画只不过是在一段时间间隔内修改依赖项属性值的一种方... 查看详情