The Chinese front-end UI framework kit (5) supports CSS full attributes, CSS hack, css3 attributes, and color gradient JavaScript animations. It is more powerful than jquery and mooltools. This is not the title party!

At noon, I made several urgent bug fixes, including Firefox and CSS hack. Please feel free to use them.

 

This week, we would like to continue writing about the advanced events of kitjs. However, there are still some technical problems that need to be solved with mouse gestures, so we will not release them for the moment. This week, let's talk about the animation class of kitjs.

Demo address: http://xueduany.github.com/KitJs/KitJs/demo/Animation/demo.html

Kitjs Official Website: http://xueduany.github.com/KitJs

Doc address: http://xueduany.github.com/jsdoc/out/?kit.animation.html

Source code: Https://github.com/xueduany/KitJs

(1) Why should we create an animation class separately?

To be honest, I have used mooltools and jquery and many other CSS animation classes, but I feel uncomfortable and complicated, mainly focusing on the following aspects.

1. The animation effect timeout is basically for a single Dom node. The internal implementation is an interval to control a node.

2. the animation concatenation mode is not free. Basically, it will let you put some animations to be implemented in a queue and then execute them in sequence, it is not convenient to insert an anonymous entry into a blocked train in the queue.

3. css3 attributes are not supported, such as-WebKit-Tranform and 3D Rotation.

* 4. Some class libraries do not support color gradient... Something so simple...

(2) Advantages of kitjs Animation

1. multiple nodes are moved together. You do not need to set the starting point status. You only need to set the ending point status to achieve the same effect.

2. It is very convenient to concatenate an animation. You can directly link any anonymous function by using an anonymous function chain. You can do anything you like.

3. Supports css3, WebKit-transform, 3D rotation, and color gradient.

4. Supports scrolltop and scrollleft

(3) demo

Let's take a look at what we need to do first. To implement an animation, the parameters that need to be set generally include:

El: ". test1" What node needs to be changed? It is most convenient to directly pass a css3 selector.

Duration: animation duration of 300

What is it like to pass a JSON object?

To :{
'Background-color': 'rgba (255,255,255, 0.5 )',
'Color': '#000000 ',
'-WebKit-transform': 'translatey (100px) translatex (100px) Scale (1 )'
}

FX: $ kit. anim. FX. easeoutquad: It depends on the animation function.

Basically, the above three meet the basic requirements. You may need the following parameters:

the initial animation status is also a css json

from: {
'background-color': 'rgba (0, 0, 1) ',
'color':' # ffff ',
'-WebKit-transform': 'translatey (0px) translatex (0px) Scale (3) '
}

Why is the animation finished? Get an anonymous function, just do whatever you want, and add an animation to the anonymous function.

then: function () {

...

}

Besides the preceding parameters, you may not need to use them.

Timeseg: 17, animation Interval

...

Wait. You can reinitialize other parameters.

In fact, for an animation effect, there are only two most important things: what it looks like and what it looks like.

We can simply abstract it into a CSS state at the beginning, and then change it to another CSS state,

Written

$ Kit. anim. Motion ({
Duration: 3000,
El: ". test1 ",
From :{
'Background-color': 'rgba (0, 0, 1, 1 )',
'Color': '# ffff ',
'-WebKit-transform': 'translatey (0px) translatex (0px) Scale (3 )'
},
To :{
'Background-color': 'rgba (255,255,255, 0.5 )',
'Color': '#000000 ',
'-WebKit-transform': 'translatey (100px) translatex (100px) Scale (1 )'
},
Then: function (){
$ Kit. anim. Motion ({
Duration: 3000,
El: ". test1 ",
To :{
'Background-color': 'rgba (0, 0, 1, 1 )',
'Color': '#00c700 ',
'-WebKit-transform': 'translatey (0px) translatex (0px) Scale (3 )'
},
Then: function (){
Export kit.css ($ kit. El ('. test1') [0], {
Position: 'static ',
'-WebKit-transform': 'scale (1 )',
'Background-color': '# CCC ',
Color: 'herit'
})
}
});
}
});

 

From indicates the initial CSS state, and to indicates the CSS state to be changed. When the animation ends, the anonymous method of then is executed.CodeIt is to link the queue with the then parameter to implement the animation queue.

(4) animation methods and parameters

Doc address: http://xueduany.github.com/jsdoc/out/?kit.animation.html

Reference Document on dependencies (kitjs complies with commonjs standards. You can use requirejs to load the above JS)

Usage:

$ Kit. anim. Motion ({

...

})

Method,

The parameters are as follows:

 

(5) extra benefits: fadein/fadeout, slidedown/slideup

In addition, kitjs also provides fade and slide animations similar to JQ. Slide animations are made based on absolute positioning and are compatible with all browsers, rather than the JQ compression height ratio method, give you a real sliding feeling

(6) terminate the current animation or start a new animation during the last animation playback.

Sometimes, we need to terminate an animation when it is in progress and start a new animation, such as fadein and fadeout related animations. For the same element when fadeout to 50%, we clicked fadein again. At this time, we need to terminate the fadeout animation and start fadein from the current State CSS,

Of course, the fadein and fadeout of kitjs have done this internally.

How do I create custom animations,

We can see that the motion method provides a timeout attribute, config. timeout, which can directly pass in a number (the handle returned by setinterval is a unique number ID), or a string (in $ kit. anim. handlemap uses string as the key to save the defined setinterval numeric handle)

We only need

Function (){

$ Kit. anim. Motion ({

Timeout: 'asd ',

})

}

Function B (){

$ Kit. anim. Motion ({

Timeout: 'asd'

})

}

 

The same timeout can be specified. When animation a is executed, animation B is triggered. animation a is immediately stopped and animation B is started.

(7) Animation Algorithm

 

 

 

It is recommended that you directly view the code for convenience with comments.

Source code: https://github.com/xueduany/KitJs/blob/master/KitJs/src/js/anim.js#L307

 

(8) The first animated class that supports CSS hack

You can use IE hack such as _ * + or-WebKit or-Moz.