How to implement motion buffering effect in JS (detailed tutorial)

This article mainly introduces the encapsulation function of JS to realize the motion buffering effect, involving JavaScript time function and numerical operation related operation skills. Friends in need can refer to it

The example of this article tells the JS to realize the motion buffering effect encapsulation function. I would like to share it with you for your reference. The details are as follows:

I used to write a lot of motion functions, but later I found a way to encapsulate them. (motion buffering).

/*
  物体多属性同时运动的函数
  obj：运动的物体
  oTarget：对象，属性名为运动的样式名，属性值为样式运动的终点值
  ratio：速度的系数
*/
function bufferMove(obj, oTarget, fn,ratio = 8) {
  clearInterval(obj.iTimer);
  obj.iTimer = setInterval(function () {
    // 此处设定开关bBtn，假设所有的属性均已运动完毕true
    var bBtn = true;
    for(var sAttr in oTarget){
      // 获取当前值，此处兼容透明度的变化
      if(sAttr === 'opacity') {
        var iCur = parseFloat(getStyle(obj, sAttr) * 100);
      } else {
        var iCur = parseInt(getStyle(obj, sAttr));
      }
      // 计算速度，此处可判定方向，如向左或向右，先透明后出现或先出现后透明等
      var iSpeed = (oTarget[sAttr] - iCur) / ratio;
      iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
      // 计算下一次的值
      var iNext = iCur + iSpeed;
      // 赋值给对应样式
      if(sAttr ==='opacity') {
        obj.style.opacity = iNext / 100;
        obj.style.filter = 'alpha(opacity=' + iNext +')';
      } else {
        obj.style[sAttr] = iNext + 'px';
      }
      // 清除定时器，当前的位置和终点值是否相等，相等则说明结束
      if(iNext !== oTarget[sAttr]) {
        bBtn = false;
      }
    }
    // 如果bBtn的值为true，则说明所有的属性均已运动完毕，回调函数fn()
    if(bBtn) {
      clearInterval(obj.iTimer);
      if(fn){
        fn();
      }
    }
  }, 50);
}

The above encapsulated functions can also be used for single attributes and multi-style movements, such as:

bufferMove(obj,{"left":200,"width":400,"opacity":80},fn,8);

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to change a certain value in the data requested by vue

JavaScript starry navigation bar Implementation method

Detailed explanation of the usage and differences of computed, filter, get, set of vue.js

The above is the detailed content of How to implement motion buffering effect in JS (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!