缓动动画js小算法

后宫请翻Tween.js

1. 先快后慢的缓动动画

用一个简单的公式表示就是:

A = A + (B - A) / 2;

用人话讲就是:

我下一秒的位置 = 现在位置 + 现在和初恋之间距离的一半

先来介绍下requestAnimationFrame,对于不支持的浏览器,采用下面的兼容写法:

if (!window.requestAnimationFrame) {
  requestAnimationFrame = function(fn) {
    setTimeout(fn, 17);  
  }
}

下面来看一个🍐子:

var back_to_top = function(rate) {
  var doc = document.body.scrollTop ? document.body : document.documentElement,
  scrollTop = doc.scrollTop;
  var top = function() {
    scrollTop += (0 - scrollTop) / (rate || 2);
    // 临界判断,终止动画
    if (scrollTop < 1) {
      doc.scrollTop = 0;
      return;
    }
    doc.scrollTop = scrollTop;
    requestAnimationFrame(top);
  };
  top();
}

2. 小算法变身

Math.easeOut = function(A, B, rate, callback) {
  if (A == B || typeof A != 'number') {
    return;
  }
  B = B || 0;
  rate = rate || 2;
  var step = function() {
    A = A + (B - A) / rate;
    if (A < 1) {
      callback(B, true);
      return;
    }
    callback(A, false);
    requestAnimationFrame();
  };
  step();
}

于是,我们的返回顶部效果可以这么使用:

var doc = document.body.scrollTop? document.body : document.documentElement;
Math.easeout(doc.scrollTop, 0, 4, function (value) {
    doc.scrollTop = value;
});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印象,因...
    DCbryant阅读 755评论 0 2
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,126评论 25 709
  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 4,756评论 2 32
  • React Native 进阶(二)--动画 动画 流畅、有意义的动画对于移动应用用户体验来说是非常必要的。我们可...
    呼呼哥阅读 2,847评论 2 5
  • 不喜欢成功学,却听了好多的成功学。后来发现所有成功学的书讲到最后,道理都是差不多的,梦想,目标,欲望,行动,信念,...
    听雨廖哥阅读 125评论 0 0