开发中的动效设计与实现 —— 贝塞尔曲线动画的插值法

本文主要简单讲一下贝塞尔曲线在动效设计与实现中的作用。

01

—

关于

首先介绍最重要的两个概念：

• 动画（Animation） 某个界面控件在一段时间内的变化即产生动画。产生动画的维度可以是它的形状、位置、大小、颜色、透明度等，抑或是它们的叠加。

下面这个是我做的一个非常简单的应用开屏引导动画，滑动时候是元素位移透明度变化。

• 过渡（Transition） 那这个控件在两个状态之间是如何变化的呢？定义这个变化的概念即是过渡。不同的过渡曲线会产生截然不同的效果。通常被提到的有ease in、ease out、bounce等，当然Axure也提供这些效果。以位置为例，一个矩形由下至上移动300px，不同的运动曲线所对应的动效之间有非常明显的区别。

下面借助Google的MD规范动画解释过渡的作用。

一个动画一般有这些参数 —— 动画时间、属性变化量、以及贝塞尔插值曲线。在动效标注的时候，也只需要标注这些参数就可以完整的给UI研发写动效了。一个动效所涉及的元素属性变化，也就是'动画'在设计输出的效果视频中就可以很明确的表述，而'过渡'使用贝塞尔插值和函数来描述可以说是最有效最直观的方法了。

02

—

贝塞尔曲线

一阶贝塞尔曲线（两点），绘制成一条直线

二阶贝塞尔曲线（三点）

三阶贝塞尔曲线（四点）

四阶贝塞尔曲线（五点）

五阶贝塞尔曲线（六点）

03

—

贝塞尔曲线怎么用

设计师怎么用

动画的曲线实现问题是使用感觉和动画体验的核心。往往设计者给到研发的动效预览视频是不能让研发准确知道动画中元素的运动曲线规则（这个深有体会，研发大哥有可能做出的动画全部是线性运动，实现的动画显得非常生硬）。在主流的动画设计中（After Effect、Origami、Principle、FramerJS），由于动画引擎不同的缘故，导致同样的设计效果不同。不过，其中的贝塞尔插值和函数在开发过程中具有相当的借鉴意义。也能很好的兼容Android/iOS/Web多平台动效的实现。

设计师 做好动效之后，只需要把在制作动画时使用的贝塞尔插值曲线参数值交给研发宝宝就可以。我在标注动效的时候会标注不同元素在不同时间所对应的动画运动曲线参数。

这里是开源的一些常用缓动曲线，前端同学可以直接拿来用，在一些网页动画中可以直接加入这些缓动函数。动画效果在执行时的速度，使其看起来更加真实。

下面这个是我做的一个简单的动画，渐变效果加上缓动函数看上去会自然很多。

上面的开屏引导动画使用principle做的，基本使用默认的贝塞尔的缓入缓出曲线(25,.1,.25,1)，看上去才会非常自然。

在这里我们主要利用贝塞尔曲线描述某元素的缓动效果。设计师在动效制作软件中获取想要的曲线数值cubic-bezier.com

研发宝宝怎么用

• Android开发者

可以使用EaseCubicInterpolator这个开源插值器实现；我司研发宝宝亲测可用；

findViewById(R.id.imageView).setY(1200);
findViewById(R.id.imageView).animate().setInterpolator(new android.view.animation.EaseCubicInterpolator(0f,1.5f,0.53f,0.02f)).yBy(-900).setDuration(500).start();

• 前端开发者

可以参考google：自定义缓动 | Web | Google Developers

如何让你的动画更自然 腾讯ISUX写的这篇文章主要讲述的是前端使用曲线的方法，写的过于繁琐，全篇不用细看，只需要参考使用js、css实现曲线动画效果部分就可以，

如果不想重复造轮子的话，可以使用动画曲线实现库jstween和GreenSock。两个库都是挺容易上手使用的，而且还扩展了很多功能，例如按运动曲线同时改变多个属性、动画播放时或完成时执行回调函数等。

可以用这个在线生成工具也是可以用的 CSS cubic-bezier Builder 示例代码：

div {  -webkit-transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);  transition:         all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94); 
}

• iOS开发者

可以利用 Core Animation 中的代码来实现动画的还原，本人没有仔细研究，请左转百度右转Google搜索；

下一篇文章我会写关于设计师怎么产出一份 动效标注文档 ，方便研发宝宝更直观的理解设计师做的动画。