ENGLISH
Transition
Transition是什么?
- 它是一个基于贝塞尔曲线的动效插件。
- 它提供常用的缓动曲线。
- 支持自定义缓动曲线。
动画是如何产生的?
我们可以使用三组数据去描述一段动画(动画起始状态、动画结束状态、缓动曲线),根据这三组数据我们可以计算出动画过程中每一帧动画的状态。这就是Transition所提供的功能,根据每一帧动画的状态,我们不断的进行重绘,动画就产生了。
npm安装
$ npm install @jiaminghi/transition
使用
import { transition, injectNewCurve } from '@jiaminghi/transition'
快速体验
<script src="http://lib.jiaminghi.com/transition/transition.map.js"></script>
<script src="http://lib.jiaminghi.com/transition/transition.min.js"></script>
<script>
const { transition, injectNewCurve } = window.transition
</script>
详细文档及示例请移步HomePage.
注解
function transition (tBC, startState = null, endState = null, frameNum = 30, deep = false) {
}
示例
Transition 支持三种数据类型以描述动画状态.
Number
import transition from '@jiaminghi/transition'
const beginState = 0
const endState = 100
const animationState = transition('linear', beginState, endState, 10)
Array
import transition from '@jiaminghi/transition'
const beginState = [10, 20, 30]
const endState = [100, 200, 300]
const animationState = transition('linear', beginState, endState, 10)
Object
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)
Recursive
启用递归模式以计算Array
或Object
中的深层数据.
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)
Notice
- 非数值的属性或元素不参与计算过程.
- 起始状态与结束状态的数据类型(包括属性及元素的数量)必须保持一致.
扩展新曲线
如果你想扩展新的缓动曲线,你可以使用Transition
提供的injectNewCurve
方法去扩展。
import { injectNewCurve } from '@jiaminghi/transition'
const curveName = 'linear'
const bezierCurve = [[[0, 1]],[[1, 0]]]
injectNewCurve(curveName, bezierCurve)
缓动曲线绘制工具
缓动曲线表
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