- 它是一个基于贝塞尔曲线的动效插件。
- 它提供常用的缓动曲线。
- 支持自定义缓动曲线。
- 获取一帧动画数据
- 根据动画数据渲染图像
- 重复...
我们可以使用三组数据去描述一段动画(动画起始状态、动画结束状态、缓动曲线),根据这三组数据我们可以计算出动画过程中每一帧动画的状态。这就是**Transition**所提供的功能,根据每一帧动画的状态,我们不断的进行重绘,动画就产生了。
$ npm install @jiaminghi/transition
import { transition, injectNewCurve } from '@jiaminghi/transition' // do something
<!--调试版--> <script src="https://unpkg.com/@jiaminghi/transition/dist/index.js"></script> <!--压缩版--> <script src="https://unpkg.com/@jiaminghi/transition/dist/index.min.js"></script> <script> const { transition, extendCurves, createAnimator } = window.transition // do something </script>
详细文档及示例请移步HomePage.
/** * @description 基于缓动曲线及起止状态获取若干帧动画状态 * @param {EaseCurve} easeCurve 缓动曲线名或数据 * @param {T} startState 动画起始状态 * @param {T} endState 动画结束状态 * @param {Number} frameNum 动画过渡帧数 * @param {Boolean} deep 是否启用递归模式 * @return {T[]} 过渡帧数据 */ type transition = <T>( easeCurve: EaseCurve, startState: T, endState: T, frameNum = 30, deep = false ) => T[]
Transition 支持三种数据类型以描述动画状态.
import transition from '@jiaminghi/transition' const start = 0 const end = 100 const frameNum = 10 const easeCurve = 'linear' transition(easeCurve, start, end, frameNum) /** * [ * 0, 11.111111111111112, 22.222222222222225, * 33.333333333333336, 44.44444444444445, 55.55555555555556, * 66.66666666666667, 77.77777777777779, 88.8888888888889, 100 * ] */
import transition from '@jiaminghi/transition' const start = [10, 20, 30] const end = [100, 200, 300] const frameNum = 3 const easeCurve = 'linear' transition(easeCurve, start, end, frameNum) /** * [ * [10, 20, 30], * [55, 110, 165], * [100, 200, 300] * ] */
import transition from '@jiaminghi/transition' const start = { x: 0, y: 20 } const end = { x: 100, y: 200 } const frameNum = 3 const easeCurve = 'linear' transition(easeCurve, start, end, frameNum) /** * [ * { x: 0, y: 20 }, * { x: 50, y: 110 }, * { x: 100, y: 200 } * ] */
启用递归模式以计算Array或Object中的深层数据.
import transition from '@jiaminghi/transition' const start = { x: 0, y: 20, radius: [10, 20, { z: 30 }] } const end = { x: 100, y: 200, radius: [50, 90, { z: 10 }] } const frameNum = 3 const easeCurve = 'linear' const deep = true transition(easeCurve, start, end, frameNum, deep) /** * [ * { x: 0, y: 20, radius: [10, 20, { z: 30 }] }, * { x: 50, y: 110, radius: [30, 55, { z: 20 }] }, * { x: 100, y: 200, radius: [50, 90, { z: 10 }] }, * ] */
Notice
- 非数值的属性或元素不参与计算过程.
- 起始状态与结束状态的数据类型(包括属性及元素的数量)必须保持一致.
如果你想扩展新的缓动曲线,你可以使用Transition提供的extendCurves方法去扩展。
import { extendCurves } from '@jiaminghi/transition' const curveName = 'linear' // 可以使用绘制工具获得 const bezierCurve = [[[0, 1]], [[1, 0]]] extendCurves(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
