JavaScript animations: Velocity.js Learning

Chapter II: Basic Knowledge

I, Velocity and jquery:

The velocity function is independent of jquery, but can be used in combination. The advantage of doing this often is that you can use jquery's chained operations: Once you have selected an element with jquery, you can use this element to invoke. Velocity () to animate it. For example:

Assigns a variable to a jquery element object.

var $div = $ ("div");

Animate the element using velocity

$div. Velocity ({opacity:0});

The syntax of this sentence is the same as jquery's own animate function;

$div. Animate ({opatity:0});

Second, the parameters:

Velocity accepts multiple parameters. The first parameter is an object that maps CSS properties to the final expected value. For example:

Animate the value of the set element's Width property to "500px" and its Opacity property value changes to 1.

$element. Velocity ({width:500px, opacity:1});

★ Tip: If you provide property values that contain letters, enclose them in half-width quotation marks.

You can pass in an object of the specified animation as the second parameter.

There is also a parameter shorthand syntax, which is to not pass the option object as the second argument, but instead use a comma to separate the argument syntax. This type of writing needs to enumerate the duration of the drawing, the easing form, and a destroy function triggered after the animation has been executed.

Third, attribute

There are two differences between CSS-based property animations and JavaScript-based attribute animations:

1.velocity for each CSS property, only one unique value is accepted, which is different from CSS. So you can pass in animations like this:

$element. Velocity ({padding:10});

To pass in multiple values, you must list them:

$element. Velocity ({

Paddingtop:10,

Paddingright:10,

PADDINGLEFT:20,

Paddingbottom:20

});

In the attribute name of 2.javascript, the connection number between words is removed, except for the first word, and the remaining words are capitalized in the first letter. For example: Padding-left became a paddingleft.

Four, the value

Velocity supports px, EM, REM,%, deg, VW, and VH units, and if no units are supplied for numeric values, a unit is automatically assigned to it based on the CSS property type. For most properties, PX is the default unit.

Five, chain-operated

When an element is chained to multiple velocity functions, they are automatically queued, which means that an animation begins at the end of the previous animation.

Vi. using velocity: Options

1.duration (Duration)

You can specify the duration option in milliseconds, which specifies how long an animation call takes to complete, or you can designate duration as one of the following three shorthand duration: "Slow" (equivalent to 600ms), "normal" (equivalent to 400ms) or "fast" (equivalent to 200ms). When specifying the duration value in milliseconds, provide an integer value with no units.

2.easing (Slow motion)

The "ease-in-out" easing type means that the animation begins to accelerate gradually and eventually slows down gradually.

The "ease-in" easing type causes the animation to accelerate at the very beginning and then until the end of the animation.

The "ease-out" ease type causes the animation to start at a constant speed and last for a period of time, and then gradually decelerate before the animation ends.

(1) Triangular function easing in JQuery UI:

$div. Velocity ({width: "300px"}, "Easeinoutsine");

(2) CSS easing:

"Ease-in", "Ease-in-out", "ease-out", "ease" (another more moderate version of "Ease-in-out")

(3) CSS Bezier curve: With Bezier easing, you can fully control the structure of an easing acceleration curve. The parameter format is an array that contains four decimals.

$div. Velocity ({width: "300px"},[0.17,0.67,0.83,0.67]);

(4) Spring physics

This type of easing is the act of simulating a spring that is suddenly released after stretching. The parameter format is an array containing two values [tension, friction]. The greater the tension (default: 500), the greater the overall speed and the amplitude of the projectile. The smaller the friction (default: 20), the faster the vibration at the end of the spring.

$div. Velocity ({width: "300px"},[250,15]);

(5) If you do not want to experiment with various values of tension and friction, "spring" easing is a readily available spring physical easing preset.

$div. Velocity ({width: "500px"}, "Spring");

3.begin (start) and complete (completed)

Use the Begin and complete options to specify which functions to trigger at a specific point in the animation: the function set for begin is triggered before the animation starts. In contrast, the function set for complete is called when the animation finishes. With these two options, the specified function is called once each time the animation is invoked, even if you animate multiple elements at the same time.

$div. Velocity (

{opacity:0, Width: "500px"},

{

Begin:function () {

Alert ("begin!");

},

Complete:function () {

Alert ("complete!")

}

})

4.loop (Loop)

Set the loop option to an integer that is a few times, and the animation alternates between the value of the call's property map rollup and the value of the previous element before the call.

$div. Velocity ({height: "10em"},{loop:2});

In addition to passing in integers, you can pass true to loop, which will trigger the loop indefinitely.

An infinite loop can be helpful for loading indicators. (Police light)

$div. Velocity ({opacity:0},{loop:true});

5.delay (delayed)

Specifies how many milliseconds the delay will be paused before the animation starts. The purpose of the delay option is to keep the timing logic of the animation completely within velocity, rather than relying on the $.delay () function of jquery when the velocity animation begins.

$div. Velocity ({opacity:0},{delay:100});

You can set the delay and loop options at the same time so that you can create a pause between alternating loops.

Loops four times, waits 1000 milliseconds between each loop

$div. Velocity ({height: "+=100px", Width: "+=100px"},{loop:4,delay:1000});

6.display (display) and visibility (visibility)

The display and visibility options in velocity correspond to property one by one with the same name in CSS, and accept the same values, including "none", "inline", "Inline-block", "Block", "Flex" and so on.

$div. Velocity ({opacity:0},{display: "block"});

Seven, other functions

Other features worth mentioning in Velocity.js include: reverse (inversion), scrolling (scrolling), color (color), and transform (transformations, including translation "Pan", rotate "rotate", and "scale" Zoom

JavaScript animations: Velocity.js Learning