A simple example of implementing jquery function animate() animation effect in native js

After a month of internship in the company, I gradually became more familiar with CSS and HTML. I started to study js in the past few days. Today I wrote a jquery animate function in js. After testing it, the performance was okay. Personally, I feel that jquery is not omnipotent. Because it is a framework, some things are relatively poorly written. Just like the animate function, there are not many optional parameters and sometimes it may not be able to achieve the effect we want.

The commented part is for testing. The process of writing the code is not very smooth, because I don’t usually use js in detail. I generally know the method and have used it, but when I wait When it comes to actually implementing the animation function, it may be confusing if the details are written incorrectly.

There are several parameters in the function to explain,

•obj, the object of the function

•json, the value pair, in the form {attr: "value", attr: " value”}, here refers to the motion attribute of the object to be animated

•interval, the interval for each change, what is changed here is the object’s attribute value

•sp, the value transformation Speed, so that the animation has a buffering effect, not just a constant speed (sp is 1)

•fn, callback function, the behavior after executing the animation

The code is relatively simple, but there are There are several details that need to be paid attention to. Here is a reminder:

•The properties of the object do not need to be declared directly, so the first sentence of the function clearInterval(obj.timer); will not report an error.

•You must add a timer for each object, otherwise they will affect each other. The result of a common timer is that the motion of multiple objects of the timer will be stuck.

•son data format: When traversing the animation properties of an object, you need icur != json[arr] to determine whether each property has reached the target value. The function of the flag is to prevent clearInterval(obj.timer) from clearing the timer when one of the attributes first reaches the target value. As a result, other animation attributes do not reach the target value. Therefore, the flag value is initialized to true during each traversal. As long as an object that does not reach the target attribute is encountered, the flag is set to false until all attributes of the object reach the target value and the timer is cleared.

•speed = speed > 0 ? Math.ceil(speed): Math.floor(speed);

The function of this sentence is to round the attribute value, because the attribute value except opacity No decimals.

•At the end of the call, pay attention to the animated object. When using a for loop, you cannot use the arr[i] form arbitrarily, especially when the value of i has become the maximum value when using nested loops.

js

function animate(obj, json, interval, sp, fn) {
  clearInterval(obj.timer);
  //var k = 0;
  //var j = 0;
  function getStyle(obj, arr) {
    if(obj.currentStyle){
      return obj.currentStyle[arr];  //针对ie
    } else {
      return document.defaultView.getComputedStyle(obj, null)[arr]; 
    }
  }
  obj.timer = setInterval(function(){
    //j ++;
    var flag = true;
    for(var arr in json) {
      var icur = 0;
      //k++;
      if(arr == "opacity") {
        icur = Math.round(parseFloat(getStyle(obj, arr))*100);
      } else {
        icur = parseInt(getStyle(obj, arr));
      }
      var speed = (json[arr] - icur) * sp;
      speed = speed > 0 ? Math.ceil(speed): Math.floor(speed);
      if(icur != json[arr]){
        flag = false;
      } 
      if(arr == "opacity"){
        obj.style.filter = "alpha(opacity : '+(icur + speed)+' )";
        obj.style.opacity = (icur + speed)/100;
      }else {
        obj.style[arr] = icur + speed + "px";
      }
      //console.log(j + "," + arr +":"+ flag);
    }
 
    if(flag){
      clearInterval(obj.timer);
      //console.log(j + ":" + flag); 
      //console.log("k = " + k);
      //console.log("j = " + j);
      //console.log("DONE");
      if(fn){
        fn();
      }
    }
  },interval);
}

Calling method:

<script>
  var move = document.getElementById("move").getElementsByTagName("li");
  for(var i = 0; i < move.length; i ++){
    move[i].onmouseover = function(){
      var _this = this;
      animate(_this, {width: 500, height: 200},10, 0.01, function(){
        animate(_this, {width: 300, height: 200},10, 0.01);
      });
 
    }
  }
 
</script>

The above simple example of the native js implementing the jquery function animate() animation effect is all the content shared by the editor. , I hope it can give everyone a reference, and I also hope everyone will support the PHP Chinese website.

For more simple examples of native js implementing the jquery function animate() animation effect, please pay attention to the PHP Chinese website for related articles!