313 lines
7.8 KiB
Markdown
313 lines
7.8 KiB
Markdown
[中文](./README.md)
|
||
|
||
<h1 align="center">Transition</h1>
|
||
|
||
<p align="center">
|
||
<a href="https://travis-ci.com/jiaming743/transition"><img src="https://img.shields.io/travis/com/jiaming743/transition.svg" alt="Travis CI"></a>
|
||
<a href="https://github.com/jiaming743/transition/blob/master/LICENSE"><img src="https://img.shields.io/github/license/jiaming743/transition.svg" alt="LICENSE" /> </a>
|
||
<a href="https://www.npmjs.com/package/@jiaminghi/transition"><img src="https://img.shields.io/npm/v/@jiaminghi/transition.svg" alt="LICENSE" /> </a>
|
||
</p>
|
||
|
||
### What is Transition?
|
||
|
||
- It is a dynamic effect plugin based on **Bezier Curve**.
|
||
- It provides common **easing** curve.
|
||
- **Customizable** easing curve.
|
||
|
||
### How is the animation produced?
|
||
|
||
* Get one frame data of the animation.
|
||
* Draw this frame animation.
|
||
* Repeat...
|
||
|
||
We can use three sets of data to describe an animation (**animation start state**, **animation end state**, **easing curve**).Based on these three sets of data, we can calculate the **state of each frame** of the animation,this is what ***Transition*** provided.According to the data of each frame, we carry out continuous redrawing, and the animation is generated.
|
||
|
||
### Install with npm
|
||
|
||
```shell
|
||
$ npm install @jiaminghi/transition
|
||
```
|
||
|
||
### Use
|
||
|
||
```javascript
|
||
import { transition, injectNewCurve } from '@jiaminghi/transition'
|
||
|
||
// do something
|
||
```
|
||
|
||
### Quick experience
|
||
|
||
```html
|
||
<!--Resources are located on personal servers for experience and testing only, do not use in production environments-->
|
||
<!--Debug version-->
|
||
<script src="http://lib.jiaminghi.com/transition/transition.map.js"></script>
|
||
<!--Compression version-->
|
||
<script src="http://lib.jiaminghi.com/transition/transition.min.js"></script>
|
||
<script>
|
||
const { transition, injectNewCurve } = window.transition
|
||
// do something
|
||
</script>
|
||
```
|
||
|
||
Detailed documents and examples can be viewed on the [HomePage](http://transition.jiaminghi.com/EN/).
|
||
|
||
- [Annotation](#Annotation)
|
||
- [Examples](#examples)
|
||
- [Extend New Easing Curve](#Extend-New-Easing-Curve)
|
||
- [Easing Curve Table](#Easing-curve-table)
|
||
|
||
------
|
||
|
||
<h3 align="center">Annotation</h3>
|
||
|
||
```javascript
|
||
/**
|
||
* @description Get the N-frame animation state by the start and end state
|
||
* of the animation and the easing curve
|
||
* @param {String|Array} tBC Easing curve name or data
|
||
* @param {Number|Arrya|Object} startState Animation start state
|
||
* @param {Number|Arrya|Object} endState Animation end state
|
||
* @param {Number} frameNum Number of Animation frames
|
||
* @param {Boolean} deep Whether to use recursive mode
|
||
* @return {Array} State of each frame of the animation
|
||
*/
|
||
function transition (tBC, startState = false, endState = false, frameNum = 30, deep = false) { // ...
|
||
}
|
||
```
|
||
|
||
<h3 align="center">Examples</h3>
|
||
|
||
**Transition** provides three data types to describe the animation state.
|
||
|
||
* [Number](#Number)
|
||
* [Array](#Array)
|
||
* [Object](#Annotation)
|
||
* [Recursive](#Recursive)
|
||
|
||
#### Number
|
||
|
||
```javascript
|
||
import transition from '@jiaminghi/transition'
|
||
|
||
const beginState = 0
|
||
const endState = 100
|
||
|
||
const animationState = transition('linear', beginState, endState, 10)
|
||
|
||
/**
|
||
* animationState = [
|
||
* 0, 11.03429355281208, 22.126200274348417, 33.259259259259245, 44.41700960219478,
|
||
* 55.58299039780521, 66.74074074074073, 77.87379972565157, 88.96570644718793, 100
|
||
* ]
|
||
* /
|
||
```
|
||
|
||
#### Array
|
||
|
||
```javascript
|
||
import transition from '@jiaminghi/transition'
|
||
|
||
const beginState = [10, 20, 30]
|
||
const endState = [100, 200, 300]
|
||
|
||
const animationState = transition('linear', beginState, endState, 10)
|
||
|
||
/**
|
||
* animationState = [
|
||
* [10, 20, 30],
|
||
* [32.415625, 64.83125, 97.24687499999999],
|
||
* [55, 110, 165],
|
||
* [77.58437500000001, 155.16875000000002, 232.753125],
|
||
* [100, 200, 300]
|
||
* ]
|
||
* /
|
||
```
|
||
|
||
#### Object
|
||
|
||
```javascript
|
||
import transition from '@jiaminghi/transition'
|
||
|
||
const objectBeginState = { x: 10, y: 10, r: 5}
|
||
const objectEndState = { x: 100, y: 10, r: 5}
|
||
|
||
const animationState = transition('linear', objectBeginState, objectEndState, 5)
|
||
|
||
/**
|
||
* animationState = [
|
||
* {x: 10, y: 10, r: 5},
|
||
* {x: 32.415625, y: 10, r: 5},
|
||
* {x: 55, y: 10, r: 5},
|
||
* {x: 77.58437500000001, y: 10, r: 5},
|
||
* {x: 100, y: 10, r: 5}
|
||
* ]
|
||
* /
|
||
```
|
||
|
||
#### Recursive
|
||
|
||
Use recursive mode to calculate deep data in `Array` or `Object`.
|
||
|
||
```javascript
|
||
import transition from '@jiaminghi/transition'
|
||
|
||
const beginState = {
|
||
points: [ [10, 30], [20, 80] ],
|
||
origin: { x: 10, y: 20 },
|
||
radius: 3
|
||
}
|
||
|
||
const endState = {
|
||
points: [ [100, 230], [120, 10] ],
|
||
origin: { x: 100, y: 200 },
|
||
radius: 9
|
||
}
|
||
|
||
const animationState = transition('linear', beginState, endState, 3, true)
|
||
|
||
/**
|
||
* animationState = [
|
||
* {
|
||
* origin: { x: 10, y: 20 },
|
||
* points: [ [10, 30], [20, 80] ],
|
||
* radius: 3
|
||
* },
|
||
* {
|
||
* origin: { x: 55, y: 110 },
|
||
* points: [ [55, 130], [70, 45] ],
|
||
* radius: 6
|
||
* },
|
||
* {
|
||
* origin: { x: 100, y: 200 },
|
||
* points: [ [100, 230], [120, 10] ],
|
||
* radius: 9
|
||
* }
|
||
* ]
|
||
* /
|
||
```
|
||
|
||
**Notice**
|
||
|
||
* Non-Number attribute or element does not participate in calculations.
|
||
* The data type of the start and end state should be consistent（Including the number of attributes and elements）.
|
||
|
||
<h3 align="center">Extend New Easing Curve</h3>
|
||
|
||
If you want to extend the new **easing curve**, you can use the `injectNewCurve` method provided by `Transition` to extend.
|
||
|
||
```javascript
|
||
import { injectNewCurve } from '@jiaminghi/transition'
|
||
|
||
const curveName = 'linear'
|
||
|
||
// Can be obtained by drawing tools
|
||
const bezierCurve = [[[0, 1]],[[1, 0]]]
|
||
|
||
injectNewCurve(curveName, bezierCurve)
|
||
```
|
||
|
||
[Easing curve drawing tool](http://transition.jiaminghi.com/EN/draw/)
|
||
|
||
<h3 align="center">Easing Curve Table</h3>
|
||
|
||
* [linear](#linear)
|
||
* [easeInSine](#easeInSine)
|
||
* [easeOutSine](#easeOutSine)
|
||
* [easeInOutSine](#easeInOutSine)
|
||
* [easeInQuad](#easeInQuad)
|
||
* [easeOutQuad](#easeOutQuad)
|
||
* [easeInOutQuad](#easeInOutQuad)
|
||
* [easeInCubic](#easeInCubic)
|
||
* [easeOutCubic](#easeOutCubic)
|
||
* [easeInOutCubic](#easeInOutCubic)
|
||
* [easeInQuart](#easeInQuart)
|
||
* [easeOutQuart](#easeOutQuart)
|
||
* [easeInOutQuart](#easeInOutQuart)
|
||
* [easeInQuint](#easeInQuint)
|
||
* [easeOutQuint](#easeOutQuint)
|
||
* [easeInOutQuint](#easeInOutQuint)
|
||
* [easeInBack](#easeInBack)
|
||
* [easeOutBack](#easeOutBack)
|
||
* [easeInOutBack](#easeInOutBack)
|
||
* [easeInElastic](#easeInElastic)
|
||
* [easeOutElastic](#easeOutElastic)
|
||
* [easeInOutElastic](#easeInOutElastic)
|
||
* [easeInBounce](#easeInBounce)
|
||
* [easeOutBounce](#easeOutBounce)
|
||
* [easeInOutBounce](#easeInOutBounce)
|
||
|
||
#### linear
|
||
|
||
|
||
#### easeInSine
|
||
|
||
|
||
#### easeOutSine
|
||
|
||
|
||
#### easeInOutSine
|
||
|
||
|
||
#### easeInQuad
|
||
|
||
|
||
#### easeOutQuad
|
||
|
||
|
||
#### easeInOutQuad
|
||
|
||
|
||
#### easeInCubic
|
||
|
||
|
||
#### easeOutCubic
|
||
|
||
|
||
#### easeInOutCubic
|
||
|
||
|
||
#### easeInQuart
|
||
|
||
|
||
#### easeOutQuart
|
||
|
||
|
||
#### easeInOutQuart
|
||
|
||
|
||
#### easeInQuint
|
||
|
||
|
||
#### easeOutQuint
|
||
|
||
|
||
#### easeInOutQuint
|
||
|
||
|
||
#### easeInBack
|
||
|
||
|
||
#### easeOutBack
|
||
|
||
|
||
#### easeInOutBack
|
||
|
||
|
||
#### easeInElastic
|
||
|
||
|
||
#### easeOutElastic
|
||
|
||
|
||
#### easeInOutElastic
|
||
|
||
|
||
#### easeInBounce
|
||
|
||
|
||
#### easeOutBounce
|
||
|
||
|
||
#### easeInOutBounce
|
||
 |