属性动画实现控件类似贝塞尔曲线轨迹移动效果

2018-06-28 16:25:27 浏览数 (1)

      前段时间工作中需要实现一种控件类似贝塞尔曲线轨迹运动的效果,也是折腾了几天,刚开始本着不重复造轮子的想法,去网上搜类似的效果,结果没搜到,后来自己实现了,抽成一个Demo,希望有需要的朋友以后可以直接用到而不用再折腾。


关于贝塞尔曲线的概念可以移步到这儿贝塞尔曲线的介绍 。

原理其实很简单,根据贝塞尔公式,用四个点确定一个轨迹,然后通过给控件设置动画,根据时间计算出控件此刻应该在的位置(可以理解为在屏幕上的坐标),只要四个点设置的恰当,可以让控件运行任何的轨迹

先上个效果图(电脑太卡,录制gif效果不好,请见谅):

运行效果

代码重要的部分其实只有自定义的TypeEvaluator,构造方法如下:

自定义TypeEvaluator的构造方法

构造方法中有五个参数,这五个参数决定了中间两个点的位置以及控件的动画范围,通过这几个参数,我们可以定义控件动画的幅度或大或小。决定贝塞尔曲线轨迹的四个点如下图:

贝塞尔曲线

通过上图,我们对这几个参数可能有更好的理解,上下两个点代表动画的起点和中点,中间两个圆弧的拐点就是我们这里说的另外两个点,我们只要确定了起点和终点,再通过参数控制中间两个点,就可以让控件按不同的轨迹移动。同时,由于属性动画的特性,还可以给移动中的控件设置点击事件。

最后附上代码,欢迎有兴趣的朋友共同优化。源码下载请戳

lua

0 人点赞