-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
e359e07
commit 663a4f1
Showing
9 changed files
with
139 additions
and
281 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
export const pi = Math.PI; | ||
export const tau = 2 * pi; | ||
export const epsilon = 0.0001; | ||
export const c1 = 1.70158; | ||
export const c2 = c1 * 1.525; | ||
export const c3 = c1 + 1; | ||
export const c4 = tau / 3; | ||
export const c5 = tau / 4.5; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
const c = `cubic-bezier`; | ||
const s = `step`; | ||
|
||
export const ease = c + `(.25,.1,.25,1)`; | ||
export const easeIn = c + `(.42,0,1,1)`; | ||
export const easeInBack = c + `(.6,-.28,.735,.045)`; | ||
export const easeInCirc = c + `(.6,.04,.98,.335)`; | ||
export const easeInCubic = c + `(.55,.055,.675,.19)`; | ||
export const easeInExpo = c + `(.95,.05,.795,.035)`; | ||
export const easeInOut = c + `(.42,0,.58,1)`; | ||
export const easeInOutBack = c + `(.68,-.55,.265,1.55)`; | ||
export const easeInOutCirc = c + `(.785,.135,.15,.86)`; | ||
export const easeInOutCubic = c + `(.645,.045,.355,1)`; | ||
export const easeInOutExpo = c + `(1,0,0,1)`; | ||
export const easeInOutQuad = c + `(.455,.03,.515,.955)`; | ||
export const easeInOutQuart = c + `(.77,0,.175,1)`; | ||
export const easeInOutQuint = c + `(.86,0,.07,1)`; | ||
export const easeInOutSine = c + `(.445,.05,.55,.95)`; | ||
export const easeInQuad = c + `(.55,.085,.68,.53)`; | ||
export const easeInQuart = c + `(.895,.03,.685,.22)`; | ||
export const easeInQuint = c + `(.755,.05,.855,.06)`; | ||
export const easeInSine = c + `(.47,0,.745,.715)`; | ||
export const easeOut = c + `(0,0,.58,1)`; | ||
export const easeOutBack = c + `(.175,.885,.32,1.275)`; | ||
export const easeOutCirc = c + `(.075,.82,.165,1)`; | ||
export const easeOutCubic = c + `(.215,.61,.355,1)`; | ||
export const easeOutExpo = c + `(.19,1,.22,1)`; | ||
export const easeOutQuad = c + `(.25,.46,.45,.94)`; | ||
export const easeOutQuart = c + `(.165,.84,.44,1)`; | ||
export const easeOutQuint = c + `(.23,1,.32,1)`; | ||
export const easeOutSine = c + `(.39,.575,.565,1)`; | ||
export const elegantSlowStartEnd = c + `(.175,.885,.32,1.275)`; | ||
export const linear = c + `(0,0,1,1)`; | ||
export const stepEnd = s + `(1,0)`; | ||
export const stepStart = s + `(1,1)`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
import { EasingFunction } from '../types'; | ||
import { cubicBezier, ease, easeIn, easeOut, easeInOut, stepStart, stepEnd, linear, step } from './index'; | ||
|
||
const camelCaseRegex = /([a-z])[- ]([a-z])/ig; | ||
const cssFunctionRegex = /([a-z-]+)\(([^\)]+)\)/ig; | ||
const cssEasings = { ease, easeIn, easeOut, easeInOut, stepStart, stepEnd, linear }; | ||
|
||
const camelCaseMatcher = (match: string, p1: string, p2: string) => p1 + p2.toUpperCase(); | ||
|
||
const toCamelCase = (value: string | undefined): string => typeof value === 'string' | ||
? (value as string).replace(camelCaseRegex, camelCaseMatcher) : ''; | ||
|
||
const find = (nameOrCssFunction: string) => { | ||
// search for a compatible known easing | ||
const easingName = toCamelCase(nameOrCssFunction); | ||
const easing = cssEasings[easingName] || nameOrCssFunction; | ||
const matches = cssFunctionRegex.exec(easing); | ||
if (!matches || !matches.length) { | ||
throw new Error('could not parse css function'); | ||
} | ||
return [matches[1]].concat(matches[2].split(',')); | ||
}; | ||
|
||
export const cssFunction = (easingString: string): EasingFunction => { | ||
const p = find(easingString); | ||
const fnName = p[0]; | ||
if (fnName === 'step') { | ||
return step(+p[1], p[2] as number | 'start' | 'end'); | ||
} | ||
if (fnName === 'cubic-bezier') { | ||
return cubicBezier(+p[1], +p[2], +p[3], +p[4]); | ||
} | ||
throw new Error('could not parse css function'); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
import { abs, epsilon } from './index'; | ||
import { EasingFunction } from '../types'; | ||
|
||
const bezier = (n1: number, n2: number, t: number) => | ||
3 * n1 * (1 - t) * (1 - t) * t + 3 * n2 * (1 - t) * t * t + t * t * t; | ||
|
||
export const cubicBezier = (p0: number, p1: number, p2: number, p3: number): EasingFunction => { | ||
if (p0 < 0 || p0 > 1 || p2 < 0 || p2 > 1) { | ||
return (x: number) => x; | ||
} | ||
|
||
return (x: number): number => { | ||
if (x === 0 || x === 1) { | ||
return x; | ||
} | ||
|
||
let start = 0; | ||
let end = 1; | ||
let limit = 19; | ||
|
||
do { | ||
const mid = (start + end) * .5; | ||
const xEst = bezier(p0, p2, mid); | ||
|
||
if (abs(x - xEst) < epsilon) { | ||
return bezier(p1, p3, mid); | ||
} | ||
if (xEst < x) { | ||
start = mid; | ||
} else { | ||
end = mid; | ||
} | ||
} while (--limit); | ||
|
||
// limit is reached | ||
return x; | ||
}; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
export * from './constants'; | ||
export * from './cssEasings'; | ||
export * from './cssFunction'; | ||
export * from './cubicBezier'; | ||
export * from './math'; | ||
export * from './step'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
export const abs = Math.abs; | ||
export const cos = Math.cos; | ||
export const pow = Math.pow; | ||
export const sin = Math.sin; | ||
export const sqrt = Math.sqrt; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import { EasingFunction } from '../types'; | ||
|
||
export const step = (count: number, pos?: number | 'end' | 'start'): EasingFunction => { | ||
const q = count / 1; | ||
const p: number = pos === 'end' | ||
? 0 : pos === 'start' | ||
? 1 : pos || 0; | ||
return (x: number): number => x >= 1 ? 1 : (p * q + x) - (p * q + x) % q; | ||
}; |
Oops, something went wrong.