c# wpf 的动画设计问题

Posted 2023-04-27

想用c#的wpf设计一个动画，就是一个圆圈沿着一系列坐标值移动。这一系列坐标值是由一些数据经过运算所得，存在一个List<Point>里面。

想知道，应该用 Frame-based Animation，还是Key Frame Animation，或其它？总之，本人是新手，不知道的太多。请大家告知细节，最好可以有实例代码。谢谢！
我网上找了很多例子，但由于不清楚每个细节，改动起来也没法实现。
(2010-6-16补充)
谢谢回答和例子。这个例子我见过，但不理解的是怎样能灵活地设置自己的路经呢，写在xaml里面的代码都是死的呀。我的路经数据（一串坐标点）需要由cs文件中调用其它函数得到呀。
希望大侠尽快给与指点。
key frame的话，因为我在猜想是否可以把每个坐标点都作为关键帧，然后就跑起来了。不知可否？
还有，看到有个类是PointAnimation，但看到的例子只有两点之间移动的，怎么样在更多的坐标点移动呢？
（2010年6月17日补充）
谢谢你继续回答我。把xaml转化为c#我还不是很熟悉，当然，有很多例子可以参考。
我理解的key frame应该是自动计算平滑路径的，给出duration的呀？跳的那个是frame based,我已经实现啦。的确是“很猛”地跳来跳去，因为是直接render,所以需要自己添加路径的计算才能达到比较好的效果。PointAnimation有个参数就是From,To.所以说是两个点，所以多个点照葫芦画瓢也不是直接就行的。我现在就是尝试把结束的事件用来调动下一个坐标点。
谢谢你，我也在努力尝试，欢迎继续讨论。另外，谢谢你的群，我尽快找时间来加入。：）

（2010年6月18日补充）俺已经搞定了。用PointAnimationUsingKeyFrame最方便简捷！

Key Frame Animation是关键帧动画，你说的应该是基于路径的动画，你复制下面的代码运行看看是不是你要的结果。我也是学WPF的，介绍个群给你：66373396

<Window x:Class="Animation.PathBasedAnimation"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="PathBasedAnimation" Height="381.6" Width="521.6"
>

<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 Storyboard.TargetName="image"
Storyboard.TargetProperty="(Canvas.Top)"
PathGeometry="StaticResource path"
Duration="0:0:5" RepeatBehavior="Forever" Source="Y" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Window.Triggers>
<Canvas Margin="10">
<Path Stroke="Red" StrokeThickness="1" Data="StaticResource path" Canvas.Top="10" Canvas.Left="10">
</Path>
<Image Name="image">
<Image.Source>
<DrawingImage>
<DrawingImage.Drawing>
<GeometryDrawing Brush="LightSteelBlue">
<GeometryDrawing.Geometry>
<GeometryGroup>
<EllipseGeometry Center="10,10" RadiusX="9" RadiusY="4" />
<EllipseGeometry Center="10,10" RadiusX="4" RadiusY="9" />
</GeometryGroup>
</GeometryDrawing.Geometry>
<GeometryDrawing.Pen>
<Pen Thickness="1" Brush="Black" />
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
</Image>
</Canvas>
</Window>

首先，如果你要活得很强的灵活性，可以用纯C#来写，通常用Wpf做游戏就是用纯C#代码，所以你如果觉得上面用XAML不灵活，你完全可以把她转化纯C＃代码，这是完全等价的，而且是一定可行的。

第二个问题，你想把每个点作为关键帧，然后让它跑起来很不好，为什么？因为它不是跑了，二十突然就直接飞过去！没办法灵活控制路径，当然，除非你提供了足够多的点让它看起来很平滑的过渡。

第三个问题，既然能在2个点之间移动，当然也可以在多个点，因为2个点本身就是多个点（2>1），你想要多个点就照葫芦画瓢就可以了。 参考技术A 你好，能否详细说明下是如何实现的。

c# wpf动画结束时运行动作

【中文标题】c# wpf动画结束时运行动作

【英文标题】：Run action when c# wpf animation ends

【发布时间】：2021-11-19 08:53:40

【问题描述】：

我正在学习 wpf 并同时使用它开发应用程序。当双重动画（或其他类型）完成时，我很难弄清楚如何运行某些东西。例如：

DoubleAnimation myanim = new DoubleAnimation();
myanim.From = 10;
myanim.To = 100;
myanim.Duration = new Duration(TimeSpan.FromSeconds(3));
myview.BeginAnimation(Button.OpacityPropert, myanim);

//Code to do something when animation ends

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Media.Animation;

namespace app

/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window

    public MainWindow()
    
        InitializeComponent();
    

    private void button1_Click(object sender, RoutedEventArgs e)
    
        DoubleAnimation widthbutton = new DoubleAnimation();
        widthbutton.From = 55;
        widthbutton.To = 100;
        widthbutton.Duration = new Duration(TimeSpan.FromSeconds(1.5));
        button1.BeginAnimation(Button.HeightProperty, widthbutton);

        DoubleAnimation widthbutton1 = new DoubleAnimation();
        widthbutton1.From = 155;
        widthbutton1.To = 200;
        widthbutton1.Duration = new Duration(TimeSpan.FromSeconds(1.5));
        button1.BeginAnimation(Button.WidthProperty, widthbutton1);

        widthbutton.Completed += new EventHandler(myanim_Completed);
    
    private void myanim_Completed(object sender, EventArgs e)
    
        //your completed action here
        MessageBox.Show("Animation done!");
    

这是如何实现的？我已经阅读了很多关于此的其他帖子，但它们都使用 xaml 进行了解释，但是我想使用 c# 代码来完成。谢谢！

【参考方案1】：

您可以将事件处理程序附加到 DoubleAnimation 的 Completed 事件。

myanim.Completed += new EventHandler(myanim_Completed);

private void myanim_Completed(object sender, EventArgs e)

    //your completed action here

或者，如果你更喜欢内联，你可以这样做

 myanim.Completed += (s,e) => 
     
        //your completed action here
     ;

记得在开始动画之前附加处理程序，否则它不会触发。

【讨论】：

它没有显示代码中的任何错误，但是当动画结束时，什么也没有发生，请参阅我的编辑以获取完整的新代码

您在附加处理程序之前开始动画。您需要先附加处理程序，然后再调用BeginAnimation。

啊啊，好极了。非常感谢！完美运行！