- It is a dynamic effect plugin based on Bezier Curve.
- It provides common easing curve.
- Customizable easing curve.
- 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.
$ npm install @jiaminghi/transitionimport { transition, extendCurves, createAnimator } from '@jiaminghi/transition'
// do something<!--Debug version-->
<script src="https://unpkg.com/@jiaminghi/transition/dist/index.js"></script>
<!--Compression version-->
<script src="https://unpkg.com/@jiaminghi/transition/dist/index.min.js"></script>
<script>
const { transition, extendCurves, createAnimator } = window.transition
// do something
</script>Detailed documents and examples can be viewed on the HomePage.
/**
* @description Get the N-frame animation state by the start and end state
* of the animation and the ease curve
* @param {EaseCurve} easeCurve Ease curve name or data
* @param {T} startState Animation start state
* @param {T} endState Animation end state
* @param {Number} frameNum Number of Animation frames
* @param {Boolean} deep Whether to use recursive mode
* @return {T[]} State of each frame of the animation
*/
function transition<T>(
easeCurve: EaseCurve,
startState: T,
endState: T,
frameNum = 30,
deep = false
): T[]Transition provides three data types to describe the animation state.
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 }
* ]
*/Use recursive mode to calculate deep data in Array or 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
- 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）.
If you want to extend the new easing curve, you can use the extendCurves method provided by Transition to extend.
import { extendCurves } from '@jiaminghi/transition'
const curveName = 'linear'
// Can be obtained by drawing tools
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
