您的位置:首页 > 其它

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

2017-04-10 10:59 323 查看
      前段时间工作中需要实现一种控件类似贝塞尔曲线轨迹运动的效果,也是折腾了几天,刚开始本着不重复造轮子的想法,去网上搜类似的效果,结果没搜到,后来自己实现了,抽成一个Demo,希望有需要的朋友以后可以直接用到而不用再折腾。
关于贝塞尔曲线的概念可以移步到这儿贝塞尔曲线的介绍
原理其实很简单,根据贝塞尔公式,用四个点确定一个轨迹,然后通过给控件设置动画,根据时间计算出控件此刻应该在的位置(可以理解为在屏幕上的坐标),只要四个点设置的恰当,可以让控件运行任何的轨迹
先上个效果图(电脑太卡,录制gif效果不好,请见谅):



运行效果

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



自定义TypeEvaluator的构造方法

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



贝塞尔曲线
通过上图,我们对这几个参数可能有更好的理解,上下两个点代表动画的起点和中点,中间两个圆弧的拐点就是我们这里说的另外两个点,我们只要确定了起点和终点,再通过参数控制中间两个点,就可以让控件按不同的轨迹移动。同时,由于属性动画的特性,还可以给移动中的控件设置点击事件。
最后附上代码,欢迎有兴趣的朋友共同优化。源码下载请戳 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: