vue 使用tweenjs(封装) 简单好用

• 安装

  npm i @tweenjs/tween.js@20.0.3 --save
  

• 封装Animate.js

  import TWEEN from '@tweenjs/tween.js';
  
  const Animate = {
    _tween: null,
    _to: null,
    _complete: null,
    start(obj) {
      obj.__number__ = 0;
      this._tween = new TWEEN.Tween(obj);
      return this;
    },
    to(obj) {
      obj.__number__ = 100;
      this._to = obj;
      return this;
    },
    time(time) {
      this._tween.to(this._to, time);
      return this;
    },
    update(callback) {
      var that = this;
      var isOver = false;
      this._tween.start();
      this._tween.onUpdate(to => {
        callback && callback(to);
        if (to.__number__ >= 100) {
          isOver = true;
        }
      });
  
      render();
      function render() {
        if (isOver) {
          that._complete && that._complete();
          return;
        }
        requestAnimationFrame(render);
  
        TWEEN.update();
      }
      return this;
    },
    complete(callback) {
      this._complete = callback;
      return this;
    },
  };
  
  export default Animate;
  

• 使用

  import Animate from '@/utils/Animate.js'
  
  Animate.start({ y: 0 })
      .to({ y: 200 })
      .time(3000)
      .update(({ y }) => {
          let dom = document.getElementById('img');
          if (dom) {
            dom.style.top = y + 'px';
          }
      })
      .complete(() => {
          let dom = document.getElementById('img');
          if (dom) {
            dom.parentNode.removeChild(dom);
          }
  	});