diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/animation/Controller.js | 60 | ||||
| -rw-r--r-- | src/animation/Timeline.js | 1 | ||||
| -rw-r--r-- | src/elements/Dom.js | 11 | ||||
| -rw-r--r-- | src/modules/core/attr.js | 2 | ||||
| -rw-r--r-- | src/types/Box.js | 2 |
5 files changed, 62 insertions, 14 deletions
diff --git a/src/animation/Controller.js b/src/animation/Controller.js index 1716545..537a075 100644 --- a/src/animation/Controller.js +++ b/src/animation/Controller.js @@ -21,9 +21,65 @@ export let easing = { '<>': function (pos) { return -Math.cos(pos * Math.PI) / 2 + 0.5 }, '>': function (pos) { return Math.sin(pos * Math.PI / 2) }, '<': function (pos) { return -Math.cos(pos * Math.PI / 2) + 1 }, - bezier: function (t0, x0, t1, x1) { + bezier: function (x1, y1, x2, y2) { + // see https://www.w3.org/TR/css-easing-1/#cubic-bezier-algo return function (t) { - // TODO: FINISH + if (t < 0) { + if (x1 > 0) { + return y1 / x1 * t + } else if (x2 > 0) { + return y2 / x2 * t + } else { + return 0 + } + } else if (t > 1) { + if (x2 < 1) { + return (1 - y2) / (1 - x2) * t + (y2 - x2) / (1 - x2) + } else if (x1 < 1) { + return (1 - y1) / (1 - x1) * t + (y1 - x1) / (1 - x1) + } else { + return 1 + } + } else { + return 3 * t * (1 - t) ** 2 * y1 + 3 * t ** 2 * (1 - t) * y2 + t ** 3 + } + } + }, + // https://www.w3.org/TR/css-easing-1/#step-timing-function-algo + steps: function (steps, stepPosition = 'end') { + // deal with "jump-" prefix + stepPosition = stepPosition.split('-').reverse()[0] + + let jumps = steps + if (stepPosition === 'none') { + --jumps + } else if (stepPosition === 'both') { + ++jumps + } + + // The beforeFlag is essentially useless + return (t, beforeFlag = false) => { + // Step is called currentStep in referenced url + let step = Math.floor(t * steps) + const jumping = (t * step) % 1 === 0 + + if (stepPosition === 'start' || stepPosition === 'both') { + ++step + } + + if (beforeFlag && jumping) { + --step + } + + if (t >= 0 && step < 0) { + step = 0 + } + + if (t <= 1 && step > jumps) { + step = jumps + } + + return step / jumps } } } diff --git a/src/animation/Timeline.js b/src/animation/Timeline.js index 619e50a..3a731cb 100644 --- a/src/animation/Timeline.js +++ b/src/animation/Timeline.js @@ -183,7 +183,6 @@ export default class Timeline { if (this._paused) return // Get the time delta from the last time and update the time - // TODO: Deal with window.blur window.focus to pause animations var time = this._timeSource() var dtSource = time - this._lastSourceTime var dtTime = this._speed * dtSource + (this._time - this._lastStepTime) diff --git a/src/elements/Dom.js b/src/elements/Dom.js index 16aefd8..e31c15c 100644 --- a/src/elements/Dom.js +++ b/src/elements/Dom.js @@ -56,19 +56,12 @@ export default class Dom extends EventTarget { } // Clone element - clone (parent) { + clone () { // write dom data to the dom so the clone can pickup the data this.writeDataToDom() // clone element and assign new id - let clone = assignNewId(this.node.cloneNode(true)) - - // insert the clone in the given parent or after myself - if (parent) parent.add(clone) - // FIXME: after might not be available here - else this.after(clone) - - return clone + return assignNewId(this.node.cloneNode(true)) } // Iterates over all children and invokes a given block diff --git a/src/modules/core/attr.js b/src/modules/core/attr.js index ed34dc9..7c9e2c1 100644 --- a/src/modules/core/attr.js +++ b/src/modules/core/attr.js @@ -30,7 +30,7 @@ export default function attr (attr, val, ns) { } else if (val == null) { // act as a getter if the first and only argument is not an object val = this.node.getAttribute(attr) - return val == null ? defaults[attr] // FIXME: do we need to return defaults? + return val == null ? defaults[attr] : isNumber.test(val) ? parseFloat(val) : val } else { diff --git a/src/types/Box.js b/src/types/Box.js index b51415f..21672b1 100644 --- a/src/types/Box.js +++ b/src/types/Box.js @@ -112,7 +112,7 @@ function getBox (cb) { } } catch (e) { try { - let clone = this.clone(parser().svg).show() + let clone = this.clone().addTo(parser().svg).show() box = cb(clone.node) clone.remove() } catch (e) { |