你应该知道的缓动知识点

最近想写小册的心思愈来愈重，直到有人告诉了我....个人等级不够，掘力值不够，阅读量不够，好吧，我认可我哭了

我问了一下，好像学生证不给打折，真残暴.

基本缓动

基本的缓动常见的有匀速运动，也能够"缓入""缓出"，固然也包含了正弦，跃动等效果。

缓动的做用能够将一个物体移动到另外的地方，放置到空间中，能够对比出X1(x,y)与x2(x,y),在缓动中，包含了几个比较重要的要素

1. 起点与目标点

2. 比例系数

总体来讲，能够总结为这两个，由于整个计算的过程都是在维护这两个要素数据，看一段代码

var easing = 0.5    //比例系数
var ori = new Vector(0,0),  //起始位置
    target = new Vector(20,20), //目标点
    ball.pos = new Vector(0,0)
​
var to = ori.subtrac(target).dot(easing)    //递增量(20 - 0，20 - 0)*0.5 = (10，10)
ball.pos.add(to)  复制代码

也就是意味着每次更新都会增长5个增量，两次到达，这也就是匀速缓动的原理，稍微加工一下

var easing = 0.5    //比例系数
var ball.pos = new Vector(0,0), //起始位置
    target = new Vector(20,20), //目标点
​
var to = ball.pos.subtrac(target).dot(easing)   //递增量(20 - x，20 - y)*0.5 = (x1，y1)
ball.pos.add(to)    复制代码

咱们会发现每次更新的时候，ball的pos都会更新，这致使在计算增量的时候，每次都会有不同的值，这也使得ball的移动每次都不同，并且是愈来愈慢，是否是感受有点像缓出了，但是仍是感受不太同样。看一下别人的代码。

缓动

缓动这里须要维护的要素就多了很多，也是目前大多数的缓动算法通用的几个参数，至于少数的那几个我不知道，我也没敢问

• t:time：缓动经历过的时间

• b:beforeMove：起始位置

• c:changeDistance：起始位置与目标位置的距离,也就是距离上的一个变化量

• d:duration：咱们要求对象从起始位置移动到目标位置所需的时间，也就是缓动的总时长

function easeIn (t,b,c,d){
   return c*t/d + b;
}复制代码

分析一下这个代码，用c乘以这个时间t占缓动总时长d的比例，能够获得移动的距离，再加上初始位置就是下一次缓动的值,是否是清晰了不少

因为y愈来愈大，这也致使下一次的值愈来愈大，实现了位移愈来愈大的效果，也就是缓入，缓出的效果只须要返回值愈来愈小就好

function easeOut (t, b, c, d){
        return -c*t/d + b;
    }复制代码

缓动的效果是做用于速度的，因此在处理缓动的效果的时候，能够利用不少的数学模型

Linear：无缓动效果，f(t) = t；

Quadratic：二次方的缓动，f(t) = t^2；

Cubic：三次方的缓动，f(t) = t^3；

Quartic：四次方的缓动，f(t) = t^4；

Quintic：五次方的缓动，f(t) = t^5；

Sinusoidal：正弦曲线的缓动，f(t) = sin(t)；

Exponential：指数曲线的缓动，f(t) = 2^t；

Circular：圆形曲线的缓动，f(t) = sqrt(1 – t^2)；

也许你会发现这些公式都是操控t(时间)的，你当我是奇异博士吗?

有了时间跟位移，难道不是速度吗....

好了，下一个知识点，我赶时间去挣掘力

这里欢迎你们提出在开发中遇到的动画与交互问题，我会即时回答的，包括实现与算法方面，我会第一时间来回复~

也欢迎你们投币喂养与介绍富婆