## Intro
From version 2.7, JSAN provides two new classes (TweenAnim and FrameAnim) to replace many animation classes in the old version. The two animation-control classes in old version now be replaced by new control class Timeline.
## Tween Animation
The tween animation will change one or some properties values of targets from begin value to end value within the specified duration. The change function from begin value to end value is called: EasingFunction。
### Initialize
### Set Tartgets
Set Tartgets with CSS selector:
Set Tartgets with NodeList:
Set Tartgets with JS Object:
Set Tartgets with array:
### Animated Keys
During the initialization, TweenAnim will automatically judge which property type that a key contained in the keys is of the targets.
When key is CSS property:
When key is CSS Transfrom:
When key is Dom Attribute:
When key is JS Object Property:
### Animated Value Types
### Easing Function
Standard Easing Functions:
STEPS Easing Function:
Custom Easing Function:
### Controls
Play, Pause, Stop and Replay:
Seek Play:
### Events
## Frame Animation
Frame animation will change background image of HTMLElement in specified duration, that it will produce an animation effect similar to movie or GIF.
### Image Frame
We usually concentrate many image frames in one image file, and use CSS style to display an image frame.
For example, in 1945.gif there are eight image frames:
We can define a ImageFrameSet to represent the eight frames:
```javascript
let fs = {
src: '../js2d/1945.gif',
w: 32,
h: 32,
items: [ //8 frames offset data
[4, 4], //[offsetX, offsetY]
...
[228, 228]
]
})
```
When all the frames in a set are aligned in a row or column, it can be defined in a simpler way:
Using offset data of the first frame and the total number of all frames, FrameAnim class will automatically calculate all frame data.
```javascript
let fs = {
src: '../js2d/1945.gif',
w: 32,
h: 32,
items: {
ox: 4, //first frame's offsetX
oy: 4, //first frame's offsetY
split: 1, //split width between every frame
axis: 'x', //aligned direction
total: 8 //total frames number
}
})
```
### Initialize
Initialize a FrameAnim object with a ImageFrameSet:
### Controls
### Events
The event types supported by frame animation are same as that of tween animation. Please refer to the events chapter of tween animation.
## Multi-Animations Controls
Timeline class can controls the sequential and parallel execution of multi-animations.
### Sequential Animations
### Parallel Animation
### Composite Frame Animations