bezier degree 3 with 1 second duration
{ name: 'animation1', containerId: 'animation1container', childId: 'circle1', childOrigin: 'center', degree: 3, points: [{ x: 0, y: 0 }, { x: 1, y: 0 }, { x: 1, y: 1 }, { x: 0, y: 1 }], loop: false, duration: 1000 }
bezier degree 3 with 2 seconds duration forming a circle (looped)
{ name: 'animation2', containerId: 'animation2container', childId: 'circle2', childOrigin: 'center', degree: 3, points: [{ x: 0.5, y: 0 }, { x: 0, y: 1 }, { x: 1, y: 1 }, { x: 0.5, y: 0 }], loop: true, duration: 2000 }
autostart, bezier degree 3 with points outside 'normalized' square
{ name: 'animation3', containerId: 'animation3container', childId: 'circle3', childOrigin: 'center', degree: 3, points: [{ x: -1, y: 0.75 }, { x: 4, y: 0.5 }, { x: -3, y: 0.25 }, { x: 2, y: 0.25 }], loop: true, run: true, duration: 1000 }
bezier degree 2 with spinning coin image, img source
{ name: 'animation4', containerId: 'animation4container', childId: 'circle4', childOrigin: 'center', degree: 2, points: [{ x: 0.5, y: 0.5 }, { x: 0.5, y: 1.5 }, { x: 0.5, y: 0 }], loop: false, run: false, duration: 500, hideOnAnimationEnd: true }
easeOutBounce easing
{ name: 'animation5', containerId: 'animation5container', childId: 'circle5', childOrigin: 'bottom', degree: 1, points: [{ x: 0.5, y: 1 }, { x: 0.5, y: 0 }], loop: true, easing: 'easeOutBounce', run: true, duration: 1000, hideOnAnimationEnd: false }
easeInOutCubic easing
{ name: 'animation6', containerId: 'animation6container', childId: 'circle6', childOrigin: 'right', degree: 1, points: [{ x: 0, y: 0.5 }, { x: 1, y: 0.5 }], loop: true, easing: 'easeInOutCubic', run: true, duration: 1000, hideOnAnimationEnd: true }
option | type | description |
---|---|---|
name | string | Animation name |
containerId | string | Animation container DOM id |
childId | string | Animated element DOM id |
childOrigin | string (optional, default 'top-left') | Center animated element origin |
degree | number (optional, defaut 3) | Bezier degree, starting from 1 (linear line) |
points | Array [{x: __ , y: __ }] | Array of points |
duration | number (int milliseconds) | Animation duration |
easing | string | Easing type |
loop | boolean | Looped animation |
hideOnAnimationEnd | boolean | Hide the child when the animation ends (with display=none) |
run | boolean | Run the animation immediately |
Possible childOrigin as follows:
I use the easing functions from easings.net, the list as follows:
Here are my bezier functions (I used de Casteljau's algorithm)
static bezier(degree, points, t) { const newPoints = [] for (let i=0; i < degree; i++) { let newPoint = ttBezier.linearFunction(points[i].x, points[i+1].x, points[i].y, points[i+1].y, t) newPoints.push(newPoint) } if (newPoints.length === 1) { return newPoints[0] } else { return ttBezier.bezier(degree - 1, newPoints, t) } } static linearFunction(x1, x2, y1, y2, t) { let x = (1 - t) * x1 + t * x2 let y = (1 - t) * y1 + t * y2 return { x, y } }