Today I briefly learned js sports animation, recorded my experiences and shared them with everyone.
Below are the results I have sorted out.
Knowledge point 1: Speed animation.
1. First, the first step is to implement speed motion animation, encapsulate a function, the knowledge used is setInterval(function(){
The code copy is as follows:
oDiv.style.left=oDiv.offsetLeft+10+"px";
},30).
Regarding why offsetLeft is used here, I specially Baidu, and the useful information I got is:
a.offsetLeft and left are the same as representing the left position of the child node relative to the parent node.
b. But left is both readable and writeable, while offsetLeft is read-only;
c. And offsetLeft has no unit, and it does not contain px when obtaining the child node position.
I am extending other knowledge here. Thank you to this blogger, http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201372885729561/.
2. Let the moving node stop. Here we use the if statement to verify. If offsetLeft==0, clearInterval(timer), the timer here should initialize =null in advance, and then assign the previous motion animation to it.
3. There is a problem here. If the movement is triggered again before the end of the movement, the speed of the movement will accumulate. Here, as long as the entire movement begins, clearInterval (timer) is enough.
4. Set the moving and removal effect and set parameters for the motion, one is the speed speed and the other is the target position iTarget. We found that the speed can also be judged by the position of the ITarget, so only one parameter is needed.
Knowledge Point 2: Transparency Gradient
1. In fact, it is similar to just now, except that the value of ITarget is transparent, and the process is to clear the timer and turn on another timer to make judgments, etc.
2. Define a parameter alpha=transparency, note that the timer should be written like this:
The code copy is as follows:
alpha+=speed;
oDiv.style.filter='alpha(opacity:'+alpha+')'; //This is a very important method, please note that it is written like this
oDiv.style.opacity=alpha/100; //Be careful not to forget to divide by 100
3. The above are all in-line styles.
Knowledge point three: Buffering movement
1. Buffering motion means that the larger the distance, the larger the speed, and the smaller the distance, the smaller the speed, that is, the speed is related to the distance.
2. According to the above statement, the speed is redefined. The speed is 0 at the beginning, and now:
The code copy is as follows:
var speed=iTarget-oDiv.offsetLeft;
Redefine the timer:
The code copy is as follows:
oDiv.style.left=oDiv.offsetLeft+speed+'px';
At this time, we found that the speed was too high, so we could do it like this:
The code copy is as follows:
var speed=(iTarget-oDiv.offsetLeft)/10;
3. There will be a serious problem at this time. Because the minimum unit of the screen is px, the final left value will appear as a decimal, and the iTarget will not be the target. It can be solved by judgment. Math.floor() should be introduced here, which is rounding down, and Math.ceil() will also appear, which is rounding up. After defining the speed, we write this:
The code copy is as follows:
speed=speed>0?Math.ceil(speed):Math.floor(speed);
This will ensure that the speed is an integer and that it is 0 in the critical value.
Knowledge Point 4: Multi-object motion
1. First get all the objects, form an array, and then use a for loop to do it (how classic this method!), add node events in the for loop, and use this to replace the current node in the function, eg: startMove (this, iTarget), startMove (obj, iTarget) when defining the function.
2. When taking the current width offsetWidth, you must use the value of obj.
3. When the mouse moves very fast, the width of the node cannot be restored to its original state. This is because the timer is a timer that everyone uses. The next node has cleared the timer before the previous node has returned to its original state. The solution is to add an index to each node, which is to add aDiv[i].timer=null to the above for loop; and then define the function to replace the timer with obj.timer. Therefore, we should pay attention to the fact that something happens when sharing the timer.
4. In the transparency movement, alpha replaces speed, but even if the timer is not shared, the movement of multiple objects will have problems. This is because alpha is common, causing each object to tear each other. The solution is to assign alpha to each node in the for loop like a timer.
Summary: Resolving conflict issues, either initialize or personalize.
Knowledge point 5. Obtain style
1. In a timer that changes the width of the node (move in large, remove small), if you add a border to the node, it is smaller than the target node when it is moved in and larger than the target node when it is moved out. Pay attention to width+padding+scrollbar(scrollbar)+border, so the reason is that every offset will increase border*2- (the value of each decrease in the timer).
2. The solution to the above problem is to write width in the line and use parseInt (oDiv.style.width) instead of offsetLeft, but it cannot always be written in the line, so we define a function to get the chain style:
The code copy is as follows:
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr]; //ie browser
}
else{
return getComputerStyle(obj,false)[attr]; //Other browsers
}
}
3. For font-size, there is only the writing method of fontSize in js.
Knowledge Point 6: Any attribute value
1. All offset- will have small bugs. Use the getStyle function. This function is often used with parseInt() and is usually saved with variables.
2. When writing style.width, you can also write it as style['width'].
3. For the adjustment of the attribute value of multiple objects, you can encapsulate the style as a parameter, so that the functions of the attributes of multiple objects include the three attribute values (obj, attr, iTarget).
4. The above motion frame is not suitable for transparency changes, because transparency is all decimal. For two reasons, the first is parseInt, and the second is attr=...+px. Here we can use an if interpretation to process transparency separately, replace parseInt with parseFloat, and remove px.
5. The computer itself has a bug, 0.07*100 does not equal 7, so we introduce a function that is Math.round(), which is a rounded value.
Knowledge Point 7: Chain Movement
1.Introduce the move.js framework.
2. Pass in a callback function fn() and use if to judge. If there is fn(), then execute fn().
Knowledge Point 8: Simultaneous Exercise
1. If two motion functions are written to control simultaneous motion, function overwriting will occur.
2. Use json as a knowledge point. The json loop uses for (i in json), and the parameters of the motion function are obj, json, and fn.
3. There is no value of iTarget, and it is replaced by json[attr].
After writing this, it's completely over. I hope everyone can like it. I also hope it will be helpful to everyone to learn js sports animation.