你应该知道的缓动知识点

栏目: 后端 · 发布时间: 6年前

内容简介：最近想写小册的心思越来越重，直到有人告诉了我....我的等级不够，掘力值不够，阅读量不够，好吧，我承认我哭了我问了一下，好像学生证不给打折，真残暴.

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

你应该知道的缓动知识点

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

你应该知道的缓动知识点

基本缓动

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

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

起点与目标点
比例系数

整体来说，可以总结为这两个，因为整个计算的过程都是在维护这两个要素数据，看一段代码

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)；