WPF中动态创建动画（二）

最新推荐文章于 2025-05-30 15:31:12 发布

原创最新推荐文章于 2025-05-30 15:31:12 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#wpf #timer #object #class

WPF相关专栏收录该内容

2 篇文章

订阅专栏

本文介绍了使用 CompositionTarget 创建自定义动画的方法，并通过实例演示如何让一个矩形元素平滑移动到鼠标点击的位置。虽然动画效果较为基础，但揭示了 CompositionTarget 的工作原理及其与 Storyboard 动画的区别。

上次说过了使用Storyboard创建动画，这次讲讲另外一种创建动画的方法：使用CompositonTarget创建动画。

官方描述为：CompositionTarget对象可以根据每个帧回调来创建自定义动画。其实直接点，CompositionTarget创建的动画是基于每次界面刷新后触发的，与窗体刷新率保持一致，所以频率是固定的，很难人工介入控制。

xaml代码和上次的一样：

</Window>

接下来，代码如下：

Rectangle rect; double speed = 1; Point moveTo; public MainWindow() { InitializeComponent(); rect = new Rectangle(); rect.Fill = new SolidColorBrush(Colors.Red); rect.Width = 50; rect.Height = 50; rect.RadiusX = 5; rect.RadiusY = 5; Carrier.Children.Add(rect); Canvas.SetLeft(rect, 0); Canvas.SetTop(rect, 0); CompositionTarget.Rendering += new EventHandler(Timer_Tick); } private void Carrier_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { moveTo = e.GetPosition(Carrier); } private void Timer_Tick(object sender, EventArgs e) { double rect_X = Canvas.GetLeft(rect); double rect_Y = Canvas.GetTop(rect); Canvas.SetLeft(rect, rect_X + (rect_X < moveTo.X ? speed : -speed)); Canvas.SetTop(rect, rect_Y + (rect_Y < moveTo.Y ? speed : -speed)); }

可是大家会发现一个很大的问题：这方块移动得也太勉强了吧，抖来抖去的而且移动得也不平滑，是不是CompositionTarget有问题？其实不然，因为之前的Storyboard动画它不存在X，Y轴的速度，只需要设定起点和终点以及过程经历的时间就可以平滑的移动了，而CompositionTarget需要分别设定X，Y轴的速度，而我们这为了简单演示，X，Y轴的速度speed均设置成了1，这在现实使用中是绝对不合理的。因此，如果要模拟实际效果，必须计算终点和起点的正切值Tan，然后再根据直线速度speed通过Tan值计算出speed_X,speed_Y，最后改写成：　　　　　　
　　　　　　　Canvas.SetLeft(rect, rect_X + (rect_X < moveTo.X ? speed_X : -speed_X));
　　　　　　　Canvas.SetTop(rect, rect_Y + (rect_Y < moveTo.Y ? speed_Y : -speed_Y));

具体的做法就不累赘了。。。

OK，今天就到这里了~~~