JavaScript animation effect (3) _javascript tips

We've already covered speed animations, transparency animations, multiple object motions, and arbitrary value changes, and we've covered a simple prototype of the plugin in JavaScript animation (b), and we're going to expand on the previous animation effect and try to make our framework more practical. Here we also need to understand two movements, one is chain movement, one is simultaneous motion. The difference between them is that chain movement is the movement of one after another (one movement completes immediately the next movement), while the movement is all the movement at the same time. Here, how do we achieve it?

1, chain-type movement

In the previous effect, we have been able to change any value, how do we add an animation after an animation?

Train of thought: can we pass in a function in the parameter, when an effect completes immediately after executes the function (effect), this function may be wants the animation effect

Implementation: in function Startmove (obj,attr,itarget), a parameter, FN, is passed in to represent a function. At this point we need to modify the addition of the timer to add a judgment if (FN) {fn ();}, execute the FN function when there is a FN function, and clear the timer when there is no FN function. So our window.onload function should change accordingly, the code is as follows:

Window.onload = function () {
  var Li = document.getElementById (' li1 ');
  Li.onmouseover = function () {
    startmove (li, ' width ', p, function () {
      startmove (li, ' height '), function () { C5/>startmove (Li, ' opacity ', m);
      });
  Li.onmouseout = function () {
    startmove (li, ' opacity '), function () {
      startmove (li, ' height '), function () {
        startmove (Li, ' width ',];}
      );
  };

So we get the following code for chained motion:

<! DOCTYPE html>  

2. Simultaneous movement

When it comes to moving at the same time, you may find it very simple to add two different starmove () functions directly after the onmouseover event (the wrong idea!). In fact, this is not the case, when there are multiple effects, we see the last added effect. That is, we want to change both the width and the height (height in the back), we get the effect of only changing the height, the width does not change. Should we continue to pass the parameters here? From the chain movement, the effect of passing parameters can only be added after the function to get the continuous animation effect.

Idea: Can we use JSON to change multiple animation effects at the same time?

Implementation: Merges the attr and itarget in function Startmove (OBJ,ATTR,ITARGET,FN) into one parameter: JSON, we use the For/in method to traverse the data in JSON, for example:

var json = {"A":, "B":};
for (Var attr in JSON) {
  alert (JSON);//The results are: a,b
  alert (json[attr]), and/or the results are: 12,21
}

In this way, we change the previous code in turn: Add code after the timer function: for (var attr in json) {...}, and modify ITarget to Json[attr], and then modify the Window.onload function to:

Window.onload = function () {
  var Li = document.getElementById (' li1 ');
  Li.onmouseover = function () {
    Startmove (Li, {
      width:400,
      height:200,
      opacity:100
    });
  Li.onmouseout = function () {
    Startmove (Li, {
      width:200,
      height:100,
      opacity:30
    });
};

At this point we can almost get the effect we want, but this is a little bit more than the final result, for example, we modify the width of the starmove in the onmouseover event to 202, and then execute our code, We will find that the final height is not 200px,opacity or 100, as shown in figure:

This is very embarrassing, before our effect is not good? We go back to our JS code to analyze the structure, think the most likely error is the Starmove function, we found that the meaning of this code is a bit difficult to understand:

if (json[attr] = = icur) {
  clearinterval (obj.timer);
  if (FN) {
    fn ();
  }
}

We don't know whether all the movements stop at the end of the movement or when only one movement reaches the finish line and stops all movement immediately. But the actual result, as we can see in the previous operation, is that when only one movement reaches the end point, all of the movement stops (and the motion is not finished), how do we operate?

Idea: We can assume that a parameter is flag, and that the assignment is true, before we perform clearinterval (Obj.timer), we first judge if (json[attr)!= icur) {flag = false; After executing the statement before else, execute the following statement if (flag = True) {clearinterval (Obj.timer); if (FN) {fn ();}} so that we can get the complete code to move at the same time as follows:

<! DOCTYPE html>  

The animation effect of our motion at the same time is realized. Do you think it's amazing here?

Here we have a simple moving plug-in package completed, we will explain the code inside, and save it as a foodoir.animate.js file, the code is as follows:

* * Simple Motion Frame * Author: Foodoir * This framework is for reference only!!!
  * * Use the method See Bowen/function GetStyle (obj, attr) {if (Obj.currentstyle) {return obj.currentstyle[attr];
  else {return getComputedStyle (obj, false) [attr]; } function Startmove (obj, JSON, fn) {clearinterval (Obj.timer);//clear timer, avoid repeatedly generating multiple timers Obj.timer = SetInterval (func
      tion () {var flag = true;//Assume that all movements have been completed for (Var attr in JSON) {//traversal JSON var icur = null at first
      1. Judgment type if (attr = = ' opacity ') {icur = Math.Round (parsefloat (GetStyle (obj, attr)) * 100);
      else {icur = parseint (GetStyle (obj, attr));
      //2 speed var speed = (json[attr]-icur)/5; Speed = speed > 0?
      Math.ceil (Speed): Math.floor (speed);
      3. Detect stop if (icur!= json[attr]) {flag = false;
        } if (attr = = ' opacity ') {obj.style.filter = ' alpha (opacity: ' + (Icur + speed) + ') ';
      Obj.style.opacity = (icur + speed)/100; } else {obj.STYLE[ATTR] = icur + speed + ' px ';
      } if (flag) {//When all movements are complete, clear the timer clearinterval (Obj.timer);
      if (FN) {fn ();
}}, 30);
 }

Later, we'll introduce our own framework to achieve multiple animations and compare them to the animation effects in jquery.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.