A detailed introduction to multi-valued motion in the JavaScript motion framework (4)

This article mainly introducesJavaScriptMotionFrameworkThe fourth part, multi-value movement, has certain reference value. Interested friends can refer to it.

Multi-valued motion, that is, for a certainobject, not only one of theattributevalues is changing, but several, such as width, height , font, transparency, etc. change simultaneously

Of course, multi-value movement will cause a problem, which is the problem oftimerwhen to turn off! Of course, the timer can only be cleared when all attribute values have moved to the target value, that is, waiting for the slowest one. It's like ten people having a dinner together. You can't wait until one person arrives to start eating!

The previous articles talked about the movement of a certain attribute in an element object. This time we talked about the buffer movement of multiple attribute values in the same element object. Then each attribute has an end point. (Target point), we write these attributes and their target values in the form of an object, or in the form ofjson! The problem that easily arises is as mentioned above. The common speedfunctionis used here, but some attribute values are from 100 –> 101, and some attribute values are from 100 –> 600. You have to wait. Only when the longest attribute value reaches the target value can the timer owned by the obj be turned off. The design idea is to set a bStob = true each time the polling function is executed; when traversing and scanning the attributes in json, as long as the target value is not reached, The value attribute is set to false, so that the timer will not be turned off. Even if some attribute values have reached the end point, the polling will still perform scanning at this time, but at this time the movement speed of the attribute is 0, and it will not Got some exercise. That is, before:

if(attr == cur) { cleartInterval(obj.timer); }

will be enhanced to:

if (bStop) { clearInterval(obj.timer); }

The above is the detailed content of A detailed introduction to multi-valued motion in the JavaScript motion framework (4). For more information, please follow other related articles on the PHP Chinese website!