Jquery animation plug-in Creation

Jquery animation plug-in Creation
Extended $. animate

Currently, jquery provides animations in the form of {key: value}, but this function can only be used for simple"Number + unit"(10px ). The background-position: 10% 10% and transform formats are not supported. Therefore, we need to write our own animation plug-in to extend it.

1. Take extended background-position as an example. First, we need to insert the corresponding attribute in $. Tween. propHooks:

 (function($){    $.Tween.propHooks['backgroundPosition']={        set:function(tween){      }   };}(jQuery));

2.$.Tween.propHooks['backgroundPosition']There are two functions, set and get. Each time an animation is called, the set function is continuously cyclically updated to update the style value:

(Function ($) {$. Tween. propHooks ['backgroundposition'] = {set: function (tween) {// ensure that the initialization is set once, and the attribute value at the end is if (! Tween. set) {initBackgroundPosition (tween);} // set the style: // formula: pos * (end-start) + start // pos to 0 ~ The time-related ratio of 1 (tween.elemental .css ('background-position', (tween. pos * (tween. end [0] [1]-tween. start [0] [1]) + tween. start [0] [1] * 1) + tween. end [0] [2] + ''+ (tween. pos * (tween. end [1] [1]-tween. start [1] [1]) + tween. start [1] [1] * 1) + tween. end [1] [2]) ;}};/* It is used to initialize the start value and end value of the style attribute and set the parsed tween. end, tween. start */function initBackgroundPosition (tween) {tween.start?parsebackgroundposition($(tween.elem;.css ("background-position"); tween. end = parseBackgroundPosition (tween. end); for (var I = 0; I
  

Scaling Animation

Easing: The speed at which an attribute changes over time. It is non-linear.

A easing is implemented as a function that returns the attribute value of a given time. To cater to the needs of Custom Animation durations and attribute ranges, this function is standardized to receive a time between 0.0-1.0 and the returned value is between 0.0-1.0.
For example, the following swing easing function:

JQuery. easing = {/* New Version * @ param p: A very time-proportional number to 1 * @ return a book between 0 and 1 that is proportional to the Y axis of the curve */swing: function (p) {return 0.5-Math. cos (p * Math. PI)/2;} // old version/** t: current time (current time) * B: beginning value (initial value, default value: 0) * c: change in value (the default value is 1) * d: duration (duration) */swing: function (p, t, B, c, d) {return c * (0.5-Math. cos (t/d * Math. PI)/2) * B ;}}