"Native JS component" JavaScript motion frame

As we all know, Jquerry has animate methods for the movement of DOM elements, and there are transition and transform in the CSS3. Using native JavaScript to control the movement of elements requires writing a lot of motion details and compatibility.

However, when your boss does not allow you to use the large JQ framework, and the products you develop need to run in some incompatible CSS3 browsers, do you think it is very laborious to open a timer every time to figure out how to do the exercise?

So the benefits come, the author recently summed up two commonly used motion framework, and write it into components,
It is easy to use as long as it is called by the following method.

1. Introduce JS to your page

<script src="Mover.js"></script>

2. Create a Mover object in your JS code

<script>window.onload=function(){    var mover = new Mover();};</script>

3. Start using mover!
Usage Note: The component I wrote contains two motion frames for use, one based on speed, and one based on time, let's take a look at the usage of speed-based motion framework

Startmovebyspeed (obj, JSON, ENDFN);

Parameter obj: Passing in the object to be moving

Parameter JSON: The property to move in JSON, including left, top, width, height, and so on PX properties and transparency opacity, their value is the end of the movement

Parameter ENDFN (optional): The method to be executed after the motion is finished

<script>//Speed-based motion framework usageWindow.onload= function(){    //Get the elements you want to exercise    varOdiv = document.getElementsByTagName (' div ')[0];//Use the motion frame    varMover =NewMover (); odiv.onclick= function(){Mover.startmovebyspeed ( This,{' left ': $,' width ': -,' opacity ': -});//Odiv left motion to 200px, width to 300px, transparency to 50%}};</script>

Let's take a look at another time-based motion framework

Startmovebytime (obj, JSON, options, ENDFN)

Parameter obj: Passing in the object to be moving

Parameter JSON: The property to move in JSON, including left, top, width, height, and so on PX properties and transparency opacity, their value is the end of the movement

Parameters Options: The total amount of time and movement of incoming motion in JSON, such as:
{
' Times ': 1000,//total movement time is 1s
' FX ': ' Linear '//movement in the form of constant speed
}
When the options incoming parameter is empty json{}, the default setting is used (motion time 500ms, uniform motion)

Parameter ENDFN (optional): The method to be executed after the motion is finished

//Event-based motion framework usageWindow.onload= function(){    //Get the elements you want to exercise    varOdiv = document.getElementsByTagName (' div ')[0];//Use the motion frame    varMover =NewMover (); odiv.onclick= function(){Mover.startmovebytime ( This,             {' left ': -,' Top ': $},             {' Times ': +,' FX ':' EaseIn '}, function(){Mover.startmovebytime ( This,{' opacity ': -},{}); });//Make the left of Odiv into 500px, height to 200px, end the above movement and then turn the transparency into 20%}}

Now say the difference between the two ways, when using the first way to move, the elements need to change the properties of the same movement speed, and because each property from the beginning to the end of the distance is not the same, so the various properties reach the end of the motion is not the same time. The second movement is fixed directly with the same total time of movement, so the attributes of all incoming parameters are changed together and terminated together.

The following is the code of the Mover.js component, the author is a rookie, welcome to correct, the back of time will also be elastic motion, collision motion, gravity movement together to write the framework

/ * JS Native Motion component * ///mover constructor Function function Mover(){     This. setting = {' Times ': -,' FX ':' linear '}}//Get current styleMover.prototype.getStyle = function(obj,attr){    returnObj.currentstyle? OBJ.CURRENTSTYLE[ATTR]: getComputedStyle (obj) [attr];}//Get current timeMover.prototype.now = function(){        return(New Date()). GetTime ();}//Speed version Motion frameMover.prototype.startMoveBySpeed = function (obj,json,fnend){Clearinterval (Obj.timer); _this = This; Obj.timer = SetInterval ( function(){Obj.bstop =true; for(varattrinchJSON) {varCur =0;varSpeed =0;if(attr = = =' opacity ') {cur = _this.getstyle (obj,attr); Cur =Math. Round (parsefloat(cur* -) ); }Else{cur =parseint(_this.getstyle (obj,attr)); }varSpeed = (json[attr]-cur)/8; Speed = speed?Math. Ceil (Speed):Math. Floor (speed);if(cur!== json[attr]) {obj.bstop =false; }if(attr = = =' opacity ') {obj.style.opacity = (cur+speed)/ -; Obj.style.filter =' Alpha (opacity: '+ (Cur+speed) +' ) '; }Else{Obj.style[attr] = (cur+speed) +' px '; }        }if(obj.bstop) {clearinterval (Obj.timer);        Fnend && fnend.call (obj); }    }, -);}//Time Version motion frameMover.prototype.startMoveByTime = function(OBJ,JSON,OPTIONS,ENDFN){    //For the time frame, the initial value of B is fixed, so write it out of the timer    var_this = This;//Default settingsExtend (_this.setting,options);varIcur = {};//Get current value     for(attrinchJSON) {Icur[attr] =0;if(attr = = =' opacity ') {Icur[attr] =Math. Round (parsefloat(_this.getstyle (obj,attr)) * -); }Else{Icur[attr] =parseint(_this.getstyle (obj,attr)); }    };varIstarttime = _this.now ();    Clearinterval (Obj.timer); Obj.timer = SetInterval ( function(){        varIcurtime = _this.now ();vart = _this.setting.times-Math. Max (0, istarttime-icurtime+_this.setting.times); for(attrinchJSON) {/ * TWEEN[FX] Function 4 parameters t:current time (current) b:beginning value (initial value) C:change in Value (change) d:duration (duration) return (target point) */            varValue = _this. TWEEN[_THIS.SETTING.FX] (t,//t 0~timesICUR[ATTR],//bJSON[ATTR]-ICUR[ATTR],//c_this.setting.times//d);if(attr = = =' opacity ') {Obj.style[attr] =parsefloat(value/ -); Obj.style.filter =' alpha (opacity: '+value+' ) '; }Else{Obj.style[attr] = value +' px '; }        }if(t = = = _this.setting.times)            {clearinterval (Obj.timer);        ENDFN && endfn.call (obj); }    }, -);}//override default settings function extend(child,father){     for(varattrinchFather) {child[attr] = father[attr]; }}//tween Motion AlgorithmMover.prototype.Tween = {/ * 4 parameters t:current Time (current) b:beginning value (initial value) C:change in value (change) d:d Uration (duration) return (target point) */Linear function (t, B, C, D){  //constant speed        returnC*T/D + b; }, EaseIn: function(t, B, C, D){  //Acceleration curve        returnc* (T/=d) *t + b; }, EaseOut: function(t, B, C, D){  //Deceleration curve        return-c * (t/=d) * (t2) + B; }, Easeboth: function(t, B, C, D){  //acceleration deceleration curve        if((t/=d/2) <1) {returnc/2*t*t + b; }return-c/2* ((--T) * (t2) -1) + B; }, Easeinstrong: function(t, B, C, D){  //Plus acceleration curve        returnc* (T/=d) *t*t*t + b; }, Easeoutstrong: function(t, B, C, D){  //Deceleration curve        return-C * (t=t/d-1) *t*t*t-1) + B; }, Easebothstrong: function(t, B, C, D){  //Plus accelerated deceleration curve        if((t/=d/2) <1) {returnc/2*t*t*t*t + b; }return-c/2* ((t-=2) *t*t*t-2) + B; }}

Copyright NOTICE: This article for Bo Master original article, reprint also please message.

"Native JS component" JavaScript motion frame