JQuery 1.9.1 Source Analysis Series (15) animation processing of the slow motion animation core Tween_jquery

Called Createtweens () in the jquery internal function animation to create the easing animation group, and the result is:

You can see that the Ease animation group above consists of four atomic animations. The information for each atom animation is contained inside.

A closer look at the Createtweens function is actually traversing the function in the array that called tweeners ["*"] (in fact, there is only one element).

  function Createtweens (animation, props) {
    Jquery.each (props, function (prop, value) {
      var collection = (Tween ers[Prop] | | []). Concat (tweeners["*"]),
      index = 0,
      length = collection.length;
      for (; index < length; index++) {
        if (collection[index].call (animation, prop, value)) {
          //we ' re done w ith this property return
          ;
        }
      }
    );
  

Look again at this tweeners ["*"][0] function, the main code is as follows

function (prop, value) {var end, Unit,////////////////Tween = This.createtween (prop, value), parts = RFXN, based on CSS eigenvalues Um.exec (value), target = Tween.cur (), start = +target | |
  0, Scale = 1, maxiterations = 20;
    if (parts) {end = +parts[2]; Unit = Parts[3] | | (jquery.cssnumber[prop]?
    "": "px"); Properties of non pixel units if (unit!== "px" && start) {//start iteration from a non 0 starting point,//for the current property, if it uses the same unit the process would be negligible/ Fallback for end, or a simple constant start = Jquery.css (Tween.elem, prop, true) | | End | |
      1; Do {//If the previous iteration zero, double until we get * something *//use String multiplication factor, so we won't accidentally see scale unchanged scale = Scale | |
        ". 5";
        Adjust and run start = Start/scale;
        Jquery.style (Tween.elem, prop, start + unit); Update scale, default 0 or Nan from tween.cur () to get/out of the loop, if the scale is not changed or completed, or we already feel enough} while (scale!== (scale = Tween.cu
    R ()/target) && scale!== 1 &&--maxiterations);
    } tween.unit = unit; Tween.start = StarT If a +=/-= notation is provided, it means we are doing a relative animation tween.end = parts[1]?
    Start + (Parts[1] + 1) * end:end;
  return tween;  }]
};

You can see that other than the Hide/show two animations have passed tweeners ["*"][0] This function encapsulates the animation group. There are several key array start/end/unit. In particular, the animation start value for non pixel units takes some effort.

There is also a more critical place is to use the This.createtween to get a single CSS feature based on the animation features. and animation. Createtween directly by calling Jquery.tween to process. Next we explain.

A.jquery.tween

--------------------------------------------------------------------------------

Jquery.tween's structure is similar to jquery's.

function Tween (elem, options, prop, end, easing) {return to
  new Tween.prototype.init (Elem, options, prop, end, easing );
}
Jquery.tween = Tween;
Tween.prototype = {
  Constructor:tween,
  init:function (elem, options, prop, end, easing, unit) {
    This.elem = Elem;
    This.prop = prop;
    this.easing = Easing | | "Swing";
    this.options = options;
    This.start = This.now = This.cur ();
    This.end = end;
    This.unit = Unit | | (jquery.cssnumber[prop]? "": "px");
  },
  cur:function () {...},
  run:function (percent) {...}}
;

Is there a very familiar hurrying feet.

Inside the CUR function is used to get the current CSS feature value

Cur:function () {
  var hooks = tween.prophooks[This.prop];

  Return hooks && hooks.get?
  Hooks.get (This):
  tween.prophooks._default.get (this);

The run function then processes each characteristic value of the animation that is in progress at each animation point in time.

　　There are two main steps:

　　1. Calculate the current progress of the animation Pos and animation current position now

If there is an animated length, use jquery.easing to calculate the ease animation progress eased, otherwise the progress eased to percent
//and the current animation position according to the progress now
if (this.options.duration) {
  This.pos = eased = jquery.easing[this.easing] (
    percent, this.options.duration * percent, 0, 1, this.options.du Ration
    );
} else {
  This.pos = eased = percent;
}
This.now = (this.end-this.start) * eased + This.start;

2. Set CSS eigenvalues based on current progress

Sets the CSS eigenvalue
if (hooks && hooks.set) {
  hooks.set (this);
} else {
  tween.prophooks._ Default.set (this);
}

Visible Build Ease Animation This step is the core of the entire animation:

Create an easing animation group, each of which contains all the necessary parameters and animation functions for each Atom CSS property animation

The difference is that Hide/show creates the easing animation group directly in Defaultprefilter (all attributes are PX units), and other animations create the easing animation group when the Createtweens is invoked.

Remember when you create an animation that has a tick function, which is called once every step of the length of the tick function.

   tick = function () {
      ...
        length = Animation.tweens.length;
      for (; index < length; index++) {
        animation.tweens[index].run (percent);
      }
...
    

See, every atom animation has its own run function to perform its own animation, which is built when you create the Ease animation group.

All right, tidy up the whole core process of the animation:

1. First, according to the parameters of the call Jquery.speed get animation related parameters, get a similar object like the following, and generate animation execution function doanimation use. Queue to press in and execute immediately

opt = {
    complete:fnction () {...},//animation execution complete callback
    duration:400,//animation execution length
    easing: "Swing",//animation effect
    queue : "FX",//Animation queue
    old:false/fnction () {...},

2.doAnimation call to create a delay object, use the Promise method of the delay object to construct an animated object animation (Delay object + animated Feature list), and finally add the callback function to animation after the completion of the animation execution.

3. Call the jquery internal function profilter Modify the CSS feature name so that it can be identified by the current browser and decompose some of the composite CSS features (such as padding into Paddingtop/right/bottom/left).

4. Call the jquery internal function defaultprefilter to do the normal operation of the premise conditions correction: For example height/width animation display and overflow need a specific value. In particular, it is necessary to note that

For Show/hide animations, the previous call to GenFX extracts the CSS features needed to perform animations, Call an animated object directly in the Defaultprefilter function Animation.createtween add a corresponding easing animation object (including animation parameters and animation functions such as run) to each CSS animated property to press in the Ease animation group Animation.tweens

5. Call the jquery internal function Createtweens will be excluding show/ Animations outside of hide each CSS animation feature uses Animation.createtween to create an easing animation object (including animation parameters and animation functions such as run), pressing into the easing animation group Animation.tweens

6. Start the animation timing, perform the tick function at each point in time to set the values for the corresponding CSS eigenvalues.

The progress percentage of the CSS feature value movement is

Remaining = Math.max (0, Animation.starttime + animation.duration-currenttime),
temp = Remaining/animation.durati On | | | 0,
percent = 1-temp

The obtained percent is in accordance with the time rule. Use this percent to set an exact CSS feature value to refresh the animation display.

8. Call the animation complete callback after the animation completes.

About the small set to share the jquery 1.9.1 Source Analysis Series (15) animation processing of the ease of animation core tween all the content is over, there are questions welcome to my message I will be in the first time and get in touch with you.