有段时间没写了,最近也有点忙,前段时间看见个有意思的动画,在这里自己学习一下,作为记录,原项目地址
https://github.com/saulmm/Curved-Fab-Reveal-Example
好了现在开始搞起
先看效果图
没有见过贝塞尔曲线的小伙伴肯定懵逼了,怎么实现呢,其实这个动画效果就是贝塞尔曲线实现的,不知道的可以去问下度娘。
直接看代码:
activity没什么好看的,主要内容在fragment里,按钮点击事件执行方法:
可以看出,用到了ObjectAnimator属性动画,看一下ofObject()参数
target:传入需要进行属性动画的对象;
propertyName:动画的属性名称;
TypeEvaluator:将在每个动画帧上调用,以在Object值之间提供必要的插值(第四个参数)以导出动画值。就是通过贝塞尔曲线公式算出当前进度点所在的位置。
values:动画随时间变化的一组值。就是路径集合
这时候再看“fabLoc”这个有什么用,你会发现代码里有个这样方法:
打了日志,你就会发现在动画执行时将会不断调用这个方法,这个基于ObjectAnimation的实现原理定义:定义setFabLoc函数。参数为路径信息对象,来设置动画的对象的位置。
我们再看new PathEvaluator();
这里就是通过贝塞尔曲线公式计算当前进度所在的坐标点,然后通过反射调用setFabLoc时函数的传参
继续看path.getPoints().toArray();这个就是一个添加点坐标的集合
PathPoint类包含了重置起点的路径,三阶贝塞尔移动路径,直线移动的路径;
继续设置动画属性anim.setInterpolator(newAccelerateInterpolator());是渐变加速度还是直接加速度等等,这里设置默认;
然后设置动画时长,就可以start了;
好了到这里,整个贝塞尔曲线动画已经结束,
至于变大,渐变可以看一下