欢迎光临散文网 会员登陆 & 注册

缓动函数Easing Equations以及Fabric.js缓动效果屏蔽

2020-08-30 13:01 作者:象喻  | 我要投稿

  现实生活中,物体并不是突然启动或者停止,当然也不可能一直保持匀速移动。缓动函数是通过时间的变化控制参数值变化的速率,模拟现实中的物体运动。在使用Fabric.js的时候,发现这个库内置了丰富的缓动函数,但是我只想要匀速运动,没找到怎么屏蔽缓动效果。上网搜索后,发现缓动函数比我想象中还有意思,下面这个网站推荐给大家,可以很直观的理解缓动函数:


https://easings.net/cn

网址二维码:

easings.net


Fabric.js

  Fabric.js的缓动函数来自于 gizma 在这个网站上可以看到第一个就是 simple linear tweening - no easing, no acceleration 匀速函数。所以按照该函数自己写一个匀速函数:

function noease(t, b, c, d) {
    return c*t/d + b;
  }


放在自己的JS脚本中(不需要改Fabric.js源文件),在移动动画配置中的easing直接使用即可,比如:

动画对象.animate({top:移动终点},{
            onChange: canvas.renderAll.bind(画布),
            duration: 动画时长,
            easing: noease
        })


gizma网址    http://gizma.com/easing/

网址二维码:

gizma



缓动函数Easing Equations以及Fabric.js缓动效果屏蔽的评论 (共 条)

分享到微博请遵守国家法律