你应该知道的缓动知识点

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

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

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

你应该知道的缓动知识点

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

你应该知道的缓动知识点

基本缓动

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

缓动的作用可以将一个物体移动到另外的地方,放置到空间中,可以对比出 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(时间)的,你当我是奇异博士吗?

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

你应该知道的缓动知识点

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

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

也欢迎大家投币喂养与介绍富婆


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

众妙之门

众妙之门

Smashing Magazine / 腾讯ISUX社交用户体验设计部 / 人民邮电出版社 / 2013-4 / 59.00元

《众妙之门——网站重新设计之道》是一本精彩、实用的网站UI设计宝典,其中的文章来自于世界知名WEB设计与开发博客Smashing Magazine。全书内容丰富,包括:网站重新设计的商业思考,HTML5与CSS3,重新认识JavaScript,构建更优用户体验的技术,移 动用户体验设计,等等。这些都是目前业内热度最高、从业人员最想了解的话题。无论是设计师还是开发人员,无论水平是高还是低,读者都能从......一起来看看 《众妙之门》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

URL 编码/解码
URL 编码/解码

URL 编码/解码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具