- 它是一个基于贝塞尔曲线的动效插件。
- 它提供常用的缓动曲线。
- 支持自定义缓动曲线。
- 获取一帧动画数据
- 根据动画数据渲染图像
- 重复...
我们可以使用三组数据去描述一段动画（动画起始状态、动画结束状态、缓动曲线），根据这三组数据我们可以计算出动画过程中每一帧动画的状态。这就是**Transition**所提供的功能，根据每一帧动画的状态，我们不断的进行重绘，动画就产生了。
$ npm install @jiaminghi/transitionimport { 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
