jquery 2024-02-19 20:59

基于贝塞尔曲线的动效插件，提供常用缓动曲线

ENGLISH

Transition

Transition 是什么? 它是一个基于贝塞尔曲线的动效插件。它提供常用的缓动曲线。支持自定义缓动曲线。动画是如何产生的? 获取一帧动画数据根据动画数据渲染图像重复...

我们可以使用三组数据去描述一段动画（动画起始状态、动画结束状态、缓动曲线），根据这三组数据我们可以计算出动画过程中每一帧动画的状态。这就是**Transition**所提供的功能，根据每一帧动画的状态，我们不断的进行重绘，动画就产生了。

npm 安装

$ 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 支持三种数据类型以描述动画状态.

Number Array Object Recursive Number

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 * ] */ Array

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] * ] */ Object

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 } * ] */ Deep

启用递归模式以计算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 linear