spogulis no
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-06-12 13:19:31 +08:00
v1.0.0-beta 源码正式开源
Šī revīzija ir iekļauta:
小莫唐尼
@@ -0,0 +1,109 @@
|
||||
export const linear = [[[0, 1], '', [0.33, 0.67]], [[1, 0], [0.67, 0.33]]]
|
||||
|
||||
/**
|
||||
* @description Sine
|
||||
*/
|
||||
|
||||
export const easeInSine = [[[0, 1]], [[0.538, 0.564], [0.169, 0.912], [0.880, 0.196]], [[1, 0]]]
|
||||
|
||||
export const easeOutSine = [[[0, 1]], [[0.444, 0.448], [0.169, 0.736], [0.718, 0.16]], [[1, 0]]]
|
||||
|
||||
export const easeInOutSine = [[[0, 1]], [[0.5, 0.5], [0.2, 1], [0.8, 0]], [[1, 0]]]
|
||||
|
||||
/**
|
||||
* @description Quad
|
||||
*/
|
||||
|
||||
export const easeInQuad = [[[0, 1]], [[0.550, 0.584], [0.231, 0.904], [0.868, 0.264]], [[1, 0]]]
|
||||
|
||||
export const easeOutQuad = [[[0, 1]], [[0.413, 0.428], [0.065, 0.816], [0.760, 0.04]], [[1, 0]]]
|
||||
|
||||
export const easeInOutQuad = [[[0, 1]], [[0.5, 0.5], [0.3, 0.9], [0.7, 0.1]], [[1, 0]]]
|
||||
|
||||
/**
|
||||
* @description Cubic
|
||||
*/
|
||||
|
||||
export const easeInCubic = [[[0, 1]], [[0.679, 0.688], [0.366, 0.992], [0.992, 0.384]], [[1, 0]]]
|
||||
|
||||
export const easeOutCubic = [[[0, 1]], [[0.321, 0.312], [0.008, 0.616], [0.634, 0.008]], [[1, 0]]]
|
||||
|
||||
export const easeInOutCubic = [[[0, 1]], [[0.5, 0.5], [0.3, 1], [0.7, 0]], [[1, 0]]]
|
||||
|
||||
/**
|
||||
* @description Quart
|
||||
*/
|
||||
|
||||
export const easeInQuart = [[[0, 1]], [[0.812, 0.74], [0.611, 0.988], [1.013, 0.492]], [[1, 0]]]
|
||||
|
||||
export const easeOutQuart = [[[0, 1]], [[0.152, 0.244], [0.001, 0.448], [0.285, -0.02]], [[1, 0]]]
|
||||
|
||||
export const easeInOutQuart = [[[0, 1]], [[0.5, 0.5], [0.4, 1], [0.6, 0]], [[1, 0]]]
|
||||
|
||||
/**
|
||||
* @description Quint
|
||||
*/
|
||||
|
||||
export const easeInQuint = [[[0, 1]], [[0.857, 0.856], [0.714, 1], [1, 0.712]], [[1, 0]]]
|
||||
|
||||
export const easeOutQuint = [[[0, 1]], [[0.108, 0.2], [0.001, 0.4], [0.214, -0.012]], [[1, 0]]]
|
||||
|
||||
export const easeInOutQuint = [[[0, 1]], [[0.5, 0.5], [0.5, 1], [0.5, 0]], [[1, 0]]]
|
||||
|
||||
/**
|
||||
* @description Back
|
||||
*/
|
||||
|
||||
export const easeInBack = [[[0, 1]], [[0.667, 0.896], [0.380, 1.184], [0.955, 0.616]], [[1, 0]]]
|
||||
|
||||
export const easeOutBack = [[[0, 1]], [[0.335, 0.028], [0.061, 0.22], [0.631, -0.18]], [[1, 0]]]
|
||||
|
||||
export const easeInOutBack = [[[0, 1]], [[0.5, 0.5], [0.4, 1.4], [0.6, -0.4]], [[1, 0]]]
|
||||
|
||||
/**
|
||||
* @description Elastic
|
||||
*/
|
||||
|
||||
export const easeInElastic = [[[0, 1]], [[0.474, 0.964], [0.382, 0.988], [0.557, 0.952]], [[0.619, 1.076], [0.565, 1.088], [0.669, 1.08]], [[0.770, 0.916], [0.712, 0.924], [0.847, 0.904]], [[0.911, 1.304], [0.872, 1.316], [0.961, 1.34]], [[1, 0]]]
|
||||
|
||||
export const easeOutElastic = [[[0, 1]], [[0.073, -0.32], [0.034, -0.328], [0.104, -0.344]], [[0.191, 0.092], [0.110, 0.06], [0.256, 0.08]], [[0.310, -0.076], [0.260, -0.068], [0.357, -0.076]], [[0.432, 0.032], [0.362, 0.028], [0.683, -0.004]], [[1, 0]]]
|
||||
|
||||
export const easeInOutElastic = [[[0, 1]], [[0.210, 0.94], [0.167, 0.884], [0.252, 0.98]], [[0.299, 1.104], [0.256, 1.092], [0.347, 1.108]], [[0.5, 0.496], [0.451, 0.672], [0.548, 0.324]], [[0.696, -0.108], [0.652, -0.112], [0.741, -0.124]], [[0.805, 0.064], [0.756, 0.012], [0.866, 0.096]], [[1, 0]]]
|
||||
|
||||
/**
|
||||
* @description Bounce
|
||||
*/
|
||||
|
||||
export const easeInBounce = [[[0, 1]], [[0.148, 1], [0.075, 0.868], [0.193, 0.848]], [[0.326, 1], [0.276, 0.836], [0.405, 0.712]], [[0.600, 1], [0.511, 0.708], [0.671, 0.348]], [[1, 0]]]
|
||||
|
||||
export const easeOutBounce = [[[0, 1]], [[0.357, 0.004], [0.270, 0.592], [0.376, 0.252]], [[0.604, -0.004], [0.548, 0.312], [0.669, 0.184]], [[0.820, 0], [0.749, 0.184], [0.905, 0.132]], [[1, 0]]]
|
||||
|
||||
export const easeInOutBounce = [[[0, 1]], [[0.102, 1], [0.050, 0.864], [0.117, 0.86]], [[0.216, 0.996], [0.208, 0.844], [0.227, 0.808]], [[0.347, 0.996], [0.343, 0.8], [0.480, 0.292]], [[0.635, 0.004], [0.511, 0.676], [0.656, 0.208]], [[0.787, 0], [0.760, 0.2], [0.795, 0.144]], [[0.905, -0.004], [0.899, 0.164], [0.944, 0.144]], [[1, 0]]]
|
||||
|
||||
export default new Map([
|
||||
['linear', linear],
|
||||
['easeInSine', easeInSine],
|
||||
['easeOutSine', easeOutSine],
|
||||
['easeInOutSine', easeInOutSine],
|
||||
['easeInQuad', easeInQuad],
|
||||
['easeOutQuad', easeOutQuad],
|
||||
['easeInOutQuad', easeInOutQuad],
|
||||
['easeInCubic', easeInCubic],
|
||||
['easeOutCubic', easeOutCubic],
|
||||
['easeInOutCubic', easeInOutCubic],
|
||||
['easeInQuart', easeInQuart],
|
||||
['easeOutQuart', easeOutQuart],
|
||||
['easeInOutQuart', easeInOutQuart],
|
||||
['easeInQuint', easeInQuint],
|
||||
['easeOutQuint', easeOutQuint],
|
||||
['easeInOutQuint', easeInOutQuint],
|
||||
['easeInBack', easeInBack],
|
||||
['easeOutBack', easeOutBack],
|
||||
['easeInOutBack', easeInOutBack],
|
||||
['easeInElastic', easeInElastic],
|
||||
['easeOutElastic', easeOutElastic],
|
||||
['easeInOutElastic', easeInOutElastic],
|
||||
['easeInBounce', easeInBounce],
|
||||
['easeOutBounce', easeOutBounce],
|
||||
['easeInOutBounce', easeInOutBounce]
|
||||
])
|
||||
@@ -0,0 +1,310 @@
|
||||
import curves from './config/curves'
|
||||
|
||||
const defaultTransitionBC = 'linear'
|
||||
|
||||
/**
|
||||
* @description Get the N-frame animation state by the start and end state
|
||||
* of the animation and the easing curve
|
||||
* @param {String|Array} tBC Easing curve name or data
|
||||
* @param {Number|Array|Object} startState Animation start state
|
||||
* @param {Number|Array|Object} endState Animation end state
|
||||
* @param {Number} frameNum Number of Animation frames
|
||||
* @param {Boolean} deep Whether to use recursive mode
|
||||
* @return {Array|Boolean} State of each frame of the animation (Invalid input will return false)
|
||||
*/
|
||||
export function transition (tBC, startState = null, endState = null, frameNum = 30, deep = false) {
|
||||
if (!checkParams(...arguments)) return false
|
||||
|
||||
try {
|
||||
// Get the transition bezier curve
|
||||
const bezierCurve = getBezierCurve(tBC)
|
||||
|
||||
// Get the progress of each frame state
|
||||
const frameStateProgress = getFrameStateProgress(bezierCurve, frameNum)
|
||||
|
||||
// If the recursion mode is not enabled or the state type is Number, the shallow state calculation is performed directly.
|
||||
if (!deep || typeof endState === 'number') return getTransitionState(startState, endState, frameStateProgress)
|
||||
|
||||
return recursionTransitionState(startState, endState, frameStateProgress)
|
||||
} catch(e) {
|
||||
console.warn('Transition parameter may be abnormal!')
|
||||
|
||||
return [endState]
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Check if the parameters are legal
|
||||
* @param {String} tBC Name of transition bezier curve
|
||||
* @param {Any} startState Transition start state
|
||||
* @param {Any} endState Transition end state
|
||||
* @param {Number} frameNum Number of transition frames
|
||||
* @return {Boolean} Is the parameter legal
|
||||
*/
|
||||
function checkParams (tBC, startState = false, endState = false, frameNum = 30) {
|
||||
if (!tBC || startState === false || endState === false || !frameNum) {
|
||||
console.error('transition: Missing Parameters!')
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
if (typeof startState !== typeof endState) {
|
||||
console.error('transition: Inconsistent Status Types!')
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
const stateType = typeof endState
|
||||
|
||||
if (stateType === 'string' || stateType === 'boolean' || !tBC.length) {
|
||||
console.error('transition: Unsupported Data Type of State!')
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
if (!curves.has(tBC) && !(tBC instanceof Array)) {
|
||||
// console.warn('transition: Transition curve not found, default curve will be used!')
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Get the transition bezier curve
|
||||
* @param {String} tBC Name of transition bezier curve
|
||||
* @return {Array} Bezier curve data
|
||||
*/
|
||||
function getBezierCurve (tBC) {
|
||||
let bezierCurve = ''
|
||||
|
||||
if (curves.has(tBC)) {
|
||||
bezierCurve = curves.get(tBC)
|
||||
} else if (tBC instanceof Array) {
|
||||
bezierCurve = tBC
|
||||
} else {
|
||||
bezierCurve = curves.get(defaultTransitionBC)
|
||||
}
|
||||
|
||||
return bezierCurve
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Get the progress of each frame state
|
||||
* @param {Array} bezierCurve Transition bezier curve
|
||||
* @param {Number} frameNum Number of transition frames
|
||||
* @return {Array} Progress of each frame state
|
||||
*/
|
||||
function getFrameStateProgress (bezierCurve, frameNum) {
|
||||
const tMinus = 1 / (frameNum - 1)
|
||||
|
||||
const tState = new Array(frameNum).fill(0).map((t, i) => i * tMinus)
|
||||
|
||||
const frameState = tState.map(t => getFrameStateFromT(bezierCurve, t))
|
||||
|
||||
return frameState
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Get the progress of the corresponding frame according to t
|
||||
* @param {Array} bezierCurve Transition bezier curve
|
||||
* @param {Number} t Current frame t
|
||||
* @return {Number} Progress of current frame
|
||||
*/
|
||||
function getFrameStateFromT (bezierCurve, t) {
|
||||
const tBezierCurvePoint = getBezierCurvePointFromT(bezierCurve, t)
|
||||
|
||||
const bezierCurvePointT = getBezierCurvePointTFromReT(tBezierCurvePoint, t)
|
||||
|
||||
return getBezierCurveTState(tBezierCurvePoint, bezierCurvePointT)
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Get the corresponding sub-curve according to t
|
||||
* @param {Array} bezierCurve Transition bezier curve
|
||||
* @param {Number} t Current frame t
|
||||
* @return {Array} Sub-curve of t
|
||||
*/
|
||||
function getBezierCurvePointFromT (bezierCurve, t) {
|
||||
const lastIndex = bezierCurve.length - 1
|
||||
|
||||
let [begin, end] = ['', '']
|
||||
|
||||
bezierCurve.findIndex((item, i) => {
|
||||
if (i === lastIndex) return
|
||||
|
||||
begin = item
|
||||
end = bezierCurve[i + 1]
|
||||
|
||||
const currentMainPointX = begin[0][0]
|
||||
const nextMainPointX = end[0][0]
|
||||
|
||||
return t >= currentMainPointX && t < nextMainPointX
|
||||
})
|
||||
|
||||
const p0 = begin[0]
|
||||
const p1 = begin[2] || begin[0]
|
||||
const p2 = end[1] || end[0]
|
||||
const p3 = end[0]
|
||||
|
||||
return [p0, p1, p2, p3]
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Get local t based on t and sub-curve
|
||||
* @param {Array} bezierCurve Sub-curve
|
||||
* @param {Number} t Current frame t
|
||||
* @return {Number} local t of sub-curve
|
||||
*/
|
||||
function getBezierCurvePointTFromReT (bezierCurve, t) {
|
||||
const reBeginX = bezierCurve[0][0]
|
||||
const reEndX = bezierCurve[3][0]
|
||||
|
||||
const xMinus = reEndX - reBeginX
|
||||
|
||||
const tMinus = t - reBeginX
|
||||
|
||||
return tMinus / xMinus
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Get the curve progress of t
|
||||
* @param {Array} bezierCurve Sub-curve
|
||||
* @param {Number} t Current frame t
|
||||
* @return {Number} Progress of current frame
|
||||
*/
|
||||
function getBezierCurveTState ([[, p0], [, p1], [, p2], [, p3]], t) {
|
||||
const { pow } = Math
|
||||
|
||||
const tMinus = 1 - t
|
||||
|
||||
const result1 = p0 * pow(tMinus, 3)
|
||||
|
||||
const result2 = 3 * p1 * t * pow(tMinus, 2)
|
||||
|
||||
const result3 = 3 * p2 * pow(t, 2) * tMinus
|
||||
|
||||
const result4 = p3 * pow(t, 3)
|
||||
|
||||
return 1 - (result1 + result2 + result3 + result4)
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Get transition state according to frame progress
|
||||
* @param {Any} startState Transition start state
|
||||
* @param {Any} endState Transition end state
|
||||
* @param {Array} frameState Frame state progress
|
||||
* @return {Array} Transition frame state
|
||||
*/
|
||||
function getTransitionState (begin, end, frameState) {
|
||||
let stateType = 'object'
|
||||
|
||||
if (typeof begin === 'number') stateType = 'number'
|
||||
if (begin instanceof Array) stateType = 'array'
|
||||
|
||||
if (stateType === 'number') return getNumberTransitionState(begin, end, frameState)
|
||||
if (stateType === 'array') return getArrayTransitionState(begin, end, frameState)
|
||||
if (stateType === 'object') return getObjectTransitionState(begin, end, frameState)
|
||||
|
||||
return frameState.map(t => end)
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Get the transition data of the number type
|
||||
* @param {Number} startState Transition start state
|
||||
* @param {Number} endState Transition end state
|
||||
* @param {Array} frameState Frame state progress
|
||||
* @return {Array} Transition frame state
|
||||
*/
|
||||
function getNumberTransitionState (begin, end, frameState) {
|
||||
const minus = end - begin
|
||||
|
||||
return frameState.map(s => begin + minus * s)
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Get the transition data of the array type
|
||||
* @param {Array} startState Transition start state
|
||||
* @param {Array} endState Transition end state
|
||||
* @param {Array} frameState Frame state progress
|
||||
* @return {Array} Transition frame state
|
||||
*/
|
||||
function getArrayTransitionState (begin, end, frameState) {
|
||||
const minus = end.map((v, i) => {
|
||||
if (typeof v !== 'number') return false
|
||||
|
||||
return v - begin[i]
|
||||
})
|
||||
|
||||
return frameState.map(s =>
|
||||
minus.map((v, i) => {
|
||||
if (v === false) return end[i]
|
||||
|
||||
return begin[i] + v * s
|
||||
}))
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Get the transition data of the object type
|
||||
* @param {Object} startState Transition start state
|
||||
* @param {Object} endState Transition end state
|
||||
* @param {Array} frameState Frame state progress
|
||||
* @return {Array} Transition frame state
|
||||
*/
|
||||
function getObjectTransitionState (begin, end, frameState) {
|
||||
const keys = Object.keys(end)
|
||||
|
||||
const beginValue = keys.map(k => begin[k])
|
||||
const endValue = keys.map(k => end[k])
|
||||
|
||||
const arrayState = getArrayTransitionState(beginValue, endValue, frameState)
|
||||
|
||||
return arrayState.map(item => {
|
||||
const frameData = {}
|
||||
|
||||
item.forEach((v, i) => (frameData[keys[i]] = v))
|
||||
|
||||
return frameData
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Get the transition state data by recursion
|
||||
* @param {Array|Object} startState Transition start state
|
||||
* @param {Array|Object} endState Transition end state
|
||||
* @param {Array} frameState Frame state progress
|
||||
* @return {Array} Transition frame state
|
||||
*/
|
||||
function recursionTransitionState (begin, end, frameState) {
|
||||
const state = getTransitionState(begin, end, frameState)
|
||||
|
||||
for (let key in end) {
|
||||
const bTemp = begin[key]
|
||||
const eTemp = end[key]
|
||||
|
||||
if (typeof eTemp !== 'object') continue
|
||||
|
||||
const data = recursionTransitionState(bTemp, eTemp, frameState)
|
||||
|
||||
state.forEach((fs, i) => (fs[key] = data[i]))
|
||||
}
|
||||
|
||||
return state
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Inject new curve into curves as config
|
||||
* @param {Any} key The key of curve
|
||||
* @param {Array} curve Bezier curve data
|
||||
* @return {Undefined} No return
|
||||
*/
|
||||
export function injectNewCurve (key, curve) {
|
||||
if (!key || !curve) {
|
||||
console.error('InjectNewCurve Missing Parameters!')
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
curves.set(key, curve)
|
||||
}
|
||||
|
||||
export default transition
|
||||
Atsaukties uz šo jaunā problēmā
Block a user