android 属性动画——贝塞尔曲线

有段时间没写了,最近也有点忙,前段时间看见个有意思的动画,在这里自己学习一下,作为记录,原项目地址

https://github.com/saulmm/Curved-Fab-Reveal-Example

好了现在开始搞起

先看效果图


android 属性动画——贝塞尔曲线_第1张图片

没有见过贝塞尔曲线的小伙伴肯定懵逼了,怎么实现呢,其实这个动画效果就是贝塞尔曲线实现的,不知道的可以去问下度娘。

直接看代码:


android 属性动画——贝塞尔曲线_第2张图片

activity没什么好看的,主要内容在fragment里,按钮点击事件执行方法:


android 属性动画——贝塞尔曲线_第3张图片

可以看出,用到了ObjectAnimator属性动画,看一下ofObject()参数


android 属性动画——贝塞尔曲线_第4张图片

target:传入需要进行属性动画的对象;

propertyName:动画的属性名称;

TypeEvaluator:将在每个动画帧上调用,以在Object值之间提供必要的插值(第四个参数)以导出动画值。就是通过贝塞尔曲线公式算出当前进度点所在的位置。

values:动画随时间变化的一组值。就是路径集合

这时候再看“fabLoc”这个有什么用,你会发现代码里有个这样方法:

android 属性动画——贝塞尔曲线_第5张图片

打了日志,你就会发现在动画执行时将会不断调用这个方法,这个基于ObjectAnimation的实现原理定义:定义setFabLoc函数。参数为路径信息对象,来设置动画的对象的位置。

我们再看new PathEvaluator();

android 属性动画——贝塞尔曲线_第6张图片

这里就是通过贝塞尔曲线公式计算当前进度所在的坐标点,然后通过反射调用setFabLoc时函数的传参

继续看path.getPoints().toArray();这个就是一个添加点坐标的集合

PathPoint类包含了重置起点的路径,三阶贝塞尔移动路径,直线移动的路径;


android 属性动画——贝塞尔曲线_第7张图片

继续设置动画属性anim.setInterpolator(newAccelerateInterpolator());是渐变加速度还是直接加速度等等,这里设置默认;

然后设置动画时长,就可以start了;

好了到这里,整个贝塞尔曲线动画已经结束,

至于变大,渐变可以看一下


android 属性动画——贝塞尔曲线_第8张图片
android 属性动画——贝塞尔曲线_第9张图片

你可能感兴趣的:(android 属性动画——贝塞尔曲线)