此曲线可通过在绘图软件中调整起点和终点的节点获得
在使用贝塞尔曲线制作弹性动画之前,我们先了解一下贝塞尔曲线的实现原理,了解一下什么是符合物理运动规律的动画效果。
安卓开始在动画效果的实现方法上有了飞跃,零散的动画效果主要是没有统一的理论支撑。最后,安卓L、Bezier曲线、SVG动画广泛应用后,使得安卓原生系统的动画设计成为宣传亮点。
这是贝塞尔曲线。很多人一开始觉得是一个特别专业的词,其实不是。学过设计或者有绘图软件基础的同学,那么就能理解贝塞尔曲线的原理。
百度百科里的解释是:‘贝塞尔’工具在photoshop里叫‘钢笔工具’;在CorelDraw中翻译成“贝塞尔工具”;在烟花中,它被称为“画笔”。它是一个专业的画线工具。当然也有很多工具可以画线,比如photoshop中常用的画线、喷枪和画笔工具,Fireworks中的画线、铅笔和画笔工具,CorelDraw中的freepen,手绘工具等等。
两张图懂怎么画:
如何理解贝塞尔曲线?贝塞尔曲线在开发和实现中可以看作位移曲线(位置和时间的关系)。
上面的曲线是一条均匀的曲线,这意味着物体从开始到停止都以相同的速度移动。
众所周知,移动端各大ROM厂商或APP公司都在宣称做出符合物理运动原理、满足用户心理预期、还原生活场景、有感情、动画效果更逼真有效等声明。将这些隐式语句转化为开发语言就是画一条看起来舒服的运动曲线。那么什么样的曲线才符合物理运动规律,真实有效呢?
试着想一想,你手里扔石头的时候是不是有一个加速的过程,就是速度从0增加到0,然后变得越来越快。下落时速度开始下降,最后下落速度为0。石头运动的轨迹实际上是一条完整的抛物线(即速度曲线):
我们把速度曲线转换成位移曲线,这条曲线就是我们需要的:
这条曲线是从现实生活场景中推断出来的,具体参数比较模糊,但我们已经了解了物理运动的真实规律:物体的运动是一个从静止加速到停止减速的过程。
通常我们在动画软件(如AE、Flash)中调整这条曲线,最终得到我们看到的动画效果:
如何将这条位移曲线转换成开发语言?获取有效参数的方法如下:(以PS为例)
在PS中创建新的1000*1000像素的画板(只要是正方形就好计算和舍入),将动画软件中曲线的截图导入到搭建好的PS画板中,将曲线的起点和终点分别与画板的左下角和右上角对齐,从而形成正方形的位移曲线:
然后在绘图软件中复制这条曲线,调整节点时的支点坐标就是开发需要的参数(以画板左下角为原点(0,0),右上角为终点(1,1))。上图中黄色点的坐标是起点(0.26,0.05)和终点(0.26,0.97)。
这条曲线是最简单的贝塞尔曲线。您可以通过在绘图软件中调整起点和终点的节点来获得这条曲线,一条更复杂的贝塞尔曲线。
线是由多个节点组成,那是更复杂的函数公式。时间有限,以上是在工作时间仅用了两个小时整理出来的经验分享给大家,如果有不准确的地方请多多交流。后面的章节会介绍根据不同需求制作不同的曲线,以及android和iOS曲线的区别。在移动设备上经常会看到弹性的动画效果,如点开图片放大的过程、对话框出现反弹的效果等,这些动画效果用贝塞尔曲线的原理只要绘制一条你想要的曲线,把相应的参数提供给开发就可以轻松实现了,并且可以非常方便的修改效果。
它的原理是什么呢?
在上一章节中,我们学会了在一个正方形内绘制曲线,这个正方形内包含了时间和位移的关系,正常的运动曲线都是在这个正方形范围内完成,即从一个点到到另一个点的运动方式。那么抖动动画就相当于运动到终点时没刹住车超过了目标终点后又返回来,所以相对应的抖动动画曲线也要超出了这个正方形的范围。如下图:
版权声明:此曲线可通过在绘图软件中调整起点和终点的节点获得是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。