diff options
Diffstat (limited to 'src/animation')
| -rw-r--r-- | src/animation/Animator.js | 18 | ||||
| -rw-r--r-- | src/animation/Controller.js | 28 | ||||
| -rw-r--r-- | src/animation/Morphable.js | 30 | ||||
| -rw-r--r-- | src/animation/Queue.js | 4 | ||||
| -rw-r--r-- | src/animation/Runner.js | 119 | ||||
| -rw-r--r-- | src/animation/Timeline.js | 40 |
6 files changed, 123 insertions, 116 deletions
diff --git a/src/animation/Animator.js b/src/animation/Animator.js index 21c735c..fc3df10 100644 --- a/src/animation/Animator.js +++ b/src/animation/Animator.js @@ -11,7 +11,7 @@ const Animator = { frame (fn) { // Store the node - var node = Animator.frames.push({ run: fn }) + const node = Animator.frames.push({ run: fn }) // Request an animation frame if we don't have one if (Animator.nextDraw === null) { @@ -26,10 +26,10 @@ const Animator = { delay = delay || 0 // Work out when the event should fire - var time = Animator.timer().now() + delay + const time = Animator.timer().now() + delay // Add the timeout to the end of the queue - var node = Animator.timeouts.push({ run: fn, time: time }) + const node = Animator.timeouts.push({ run: fn, time: time }) // Request another animation frame if we need one if (Animator.nextDraw === null) { @@ -41,7 +41,7 @@ const Animator = { immediate (fn) { // Add the immediate fn to the end of the queue - var node = Animator.immediates.push(fn) + const node = Animator.immediates.push(fn) // Request another animation frame if we need one if (Animator.nextDraw === null) { Animator.nextDraw = globals.window.requestAnimationFrame(Animator._draw) @@ -65,8 +65,8 @@ const Animator = { _draw (now) { // Run all the timeouts we can run, if they are not ready yet, add them // to the end of the queue immediately! (bad timeouts!!! [sarcasm]) - var nextTimeout = null - var lastTimeout = Animator.timeouts.last() + let nextTimeout = null + const lastTimeout = Animator.timeouts.last() while ((nextTimeout = Animator.timeouts.shift())) { // Run the timeout if its time, or push it to the end if (now >= nextTimeout.time) { @@ -80,13 +80,13 @@ const Animator = { } // Run all of the animation frames - var nextFrame = null - var lastFrame = Animator.frames.last() + let nextFrame = null + const lastFrame = Animator.frames.last() while ((nextFrame !== lastFrame) && (nextFrame = Animator.frames.shift())) { nextFrame.run(now) } - var nextImmediate = null + let nextImmediate = null while ((nextImmediate = Animator.immediates.shift())) { nextImmediate() } diff --git a/src/animation/Controller.js b/src/animation/Controller.js index ae49de9..303fb71 100644 --- a/src/animation/Controller.js +++ b/src/animation/Controller.js @@ -140,15 +140,15 @@ export class Controller extends Stepper { function recalculate () { // Apply the default parameters - var duration = (this._duration || 500) / 1000 - var overshoot = this._overshoot || 0 + const duration = (this._duration || 500) / 1000 + const overshoot = this._overshoot || 0 // Calculate the PID natural response - var eps = 1e-10 - var pi = Math.PI - var os = Math.log(overshoot / 100 + eps) - var zeta = -os / Math.sqrt(pi * pi + os * os) - var wn = 3.9 / (zeta * duration) + const eps = 1e-10 + const pi = Math.PI + const os = Math.log(overshoot / 100 + eps) + const zeta = -os / Math.sqrt(pi * pi + os * os) + const wn = 3.9 / (zeta * duration) // Calculate the Spring values this.d = 2 * zeta * wn @@ -173,11 +173,11 @@ export class Spring extends Controller { dt /= 1000 // Get the previous velocity - var velocity = c.velocity || 0 + const velocity = c.velocity || 0 // Apply the control to get the new position and store it - var acceleration = -this.d * velocity - this.k * (current - target) - var newPosition = current + const acceleration = -this.d * velocity - this.k * (current - target) + const newPosition = current + velocity * dt + acceleration * dt * dt / 2 @@ -208,10 +208,10 @@ export class PID extends Controller { if (dt === Infinity) return target if (dt === 0) return current - var p = target - current - var i = (c.integral || 0) + p * dt - var d = (p - (c.error || 0)) / dt - var windup = this._windup + const p = target - current + let i = (c.integral || 0) + p * dt + const d = (p - (c.error || 0)) / dt + const windup = this._windup // antiwindup if (windup !== false) { diff --git a/src/animation/Morphable.js b/src/animation/Morphable.js index 3344480..3f98b8c 100644 --- a/src/animation/Morphable.js +++ b/src/animation/Morphable.js @@ -50,7 +50,7 @@ export default class Morphable { } at (pos) { - var _this = this + const _this = this return this._morphObj.fromArray( this._from.map(function (i, index) { @@ -60,7 +60,7 @@ export default class Morphable { } done () { - var complete = this._context + const complete = this._context .map(this._stepper.done) .reduce(function (last, curr) { return last && curr @@ -108,17 +108,21 @@ export default class Morphable { this.type(getClassForType(value)) } - var result = (new this._type(value)) + let result = (new this._type(value)) if (this._type === Color) { - result = this._to ? result[this._to[4]]() - : this._from ? result[this._from[4]]() - : result + result = this._to + ? result[this._to[4]]() + : this._from + ? result[this._from[4]]() + : result } if (this._type === ObjectBag) { - result = this._to ? result.align(this._to) - : this._from ? result.align(this._from) - : result + result = this._to + ? result.align(this._to) + : this._from + ? result.align(this._from) + : result } result = result.toArray() @@ -181,7 +185,7 @@ export class TransformBag { } toArray () { - var v = this + const v = this return [ v.scaleX, @@ -236,7 +240,7 @@ export class ObjectBag { } objOrArr = objOrArr || {} - var entries = [] + const entries = [] for (const i in objOrArr) { const Type = getClassForType(objOrArr[i]) @@ -255,8 +259,8 @@ export class ObjectBag { } valueOf () { - var obj = {} - var arr = this.values + const obj = {} + const arr = this.values // for (var i = 0, len = arr.length; i < len; i += 2) { while (arr.length) { diff --git a/src/animation/Queue.js b/src/animation/Queue.js index e01c3d6..ba484dc 100644 --- a/src/animation/Queue.js +++ b/src/animation/Queue.js @@ -16,7 +16,7 @@ export default class Queue { push (value) { // An item stores an id and the provided value - var item = typeof value.next !== 'undefined' ? value : { value: value, next: null, prev: null } + const item = typeof value.next !== 'undefined' ? value : { value: value, next: null, prev: null } // Deal with the queue being empty or populated if (this._last) { @@ -47,7 +47,7 @@ export default class Queue { shift () { // Check if we have a value - var remove = this._first + const remove = this._first if (!remove) return null // If we do, remove it and relink things diff --git a/src/animation/Runner.js b/src/animation/Runner.js index faeeed6..cf18201 100644 --- a/src/animation/Runner.js +++ b/src/animation/Runner.js @@ -73,9 +73,9 @@ export default class Runner extends EventTarget { static sanitise (duration, delay, when) { // Initialise the default parameters - var times = 1 - var swing = false - var wait = 0 + let times = 1 + let swing = false + let wait = 0 duration = duration || timeline.duration delay = delay || timeline.delay when = when || 'last' @@ -121,8 +121,8 @@ export default class Runner extends EventTarget { } animate (duration, delay, when) { - var o = Runner.sanitise(duration, delay, when) - var runner = new Runner(o.duration) + const o = Runner.sanitise(duration, delay, when) + const runner = new Runner(o.duration) if (this._timeline) runner.timeline(this._timeline) if (this._element) runner.element(this._element) return runner.loop(o).schedule(o.delay, o.when) @@ -196,16 +196,16 @@ export default class Runner extends EventTarget { } loops (p) { - var loopDuration = this._duration + this._wait + const loopDuration = this._duration + this._wait if (p == null) { - var loopsDone = Math.floor(this._time / loopDuration) - var relativeTime = (this._time - loopsDone * loopDuration) - var position = relativeTime / this._duration + const loopsDone = Math.floor(this._time / loopDuration) + const relativeTime = (this._time - loopsDone * loopDuration) + const position = relativeTime / this._duration return Math.min(loopsDone + position, this._times) } - var whole = Math.floor(p) - var partial = p % 1 - var time = loopDuration * whole + this._duration * partial + const whole = Math.floor(p) + const partial = p % 1 + const time = loopDuration * whole + this._duration * partial return this.time(time) } @@ -217,13 +217,13 @@ export default class Runner extends EventTarget { position (p) { // Get all of the variables we need - var x = this._time - var d = this._duration - var w = this._wait - var t = this._times - var s = this._swing - var r = this._reverse - var position + const x = this._time + const d = this._duration + const w = this._wait + const t = this._times + const s = this._swing + const r = this._reverse + let position if (p == null) { /* @@ -235,25 +235,27 @@ export default class Runner extends EventTarget { // Figure out the value without thinking about the start or end time const f = function (x) { - var swinging = s * Math.floor(x % (2 * (w + d)) / (w + d)) - var backwards = (swinging && !r) || (!swinging && r) - var uncliped = Math.pow(-1, backwards) * (x % (w + d)) / d + backwards - var clipped = Math.max(Math.min(uncliped, 1), 0) + const swinging = s * Math.floor(x % (2 * (w + d)) / (w + d)) + const backwards = (swinging && !r) || (!swinging && r) + const uncliped = Math.pow(-1, backwards) * (x % (w + d)) / d + backwards + const clipped = Math.max(Math.min(uncliped, 1), 0) return clipped } // Figure out the value by incorporating the start time - var endTime = t * (w + d) - w - position = x <= 0 ? Math.round(f(1e-5)) - : x < endTime ? f(x) - : Math.round(f(endTime - 1e-5)) + const endTime = t * (w + d) - w + position = x <= 0 + ? Math.round(f(1e-5)) + : x < endTime + ? f(x) + : Math.round(f(endTime - 1e-5)) return position } // Work out the loops done and add the position to the loops done - var loopsDone = Math.floor(this.loops()) - var swingForward = s && (loopsDone % 2 === 0) - var forwards = (swingForward && !r) || (r && swingForward) + const loopsDone = Math.floor(this.loops()) + const swingForward = s && (loopsDone % 2 === 0) + const forwards = (swingForward && !r) || (r && swingForward) position = loopsDone + (forwards ? p : 1 - p) return this.loops(position) } @@ -279,7 +281,7 @@ export default class Runner extends EventTarget { initialised: false, finished: false }) - var timeline = this.timeline() + const timeline = this.timeline() timeline && this.timeline()._continue() return this } @@ -321,16 +323,16 @@ export default class Runner extends EventTarget { // Update the time and get the new position dt = dt == null ? 16 : dt this._time += dt - var position = this.position() + const position = this.position() // Figure out if we need to run the stepper in this frame - var running = this._lastPosition !== position && this._time >= 0 + const running = this._lastPosition !== position && this._time >= 0 this._lastPosition = position // Figure out if we just started - var duration = this.duration() - var justStarted = this._lastTime <= 0 && this._time > 0 - var justFinished = this._lastTime < duration && this._time >= duration + const duration = this.duration() + const justStarted = this._lastTime <= 0 && this._time > 0 + const justFinished = this._lastTime < duration && this._time >= duration this._lastTime = this._time if (justStarted) { @@ -340,19 +342,20 @@ export default class Runner extends EventTarget { // Work out if the runner is finished set the done flag here so animations // know, that they are running in the last step (this is good for // transformations which can be merged) - var declarative = this._isDeclarative + const declarative = this._isDeclarative this.done = !declarative && !justFinished && this._time >= duration // Runner is running. So its not in reseted state anymore this._reseted = false + let converged = false // Call initialise and the run function if (running || declarative) { this._initialise(running) // clear the transforms on this runner so they dont get added again and again this.transforms = new Matrix() - var converged = this._run(declarative ? dt : position) + converged = this._run(declarative ? dt : position) this.fire('step', this) } @@ -387,7 +390,7 @@ export default class Runner extends EventTarget { } unschedule () { - var timeline = this.timeline() + const timeline = this.timeline() timeline && timeline.unschedule(this) return this } @@ -398,12 +401,12 @@ export default class Runner extends EventTarget { if (!running && !this._isDeclarative) return // Loop through all of the initialisers - for (var i = 0, len = this._queue.length; i < len; ++i) { + for (let i = 0, len = this._queue.length; i < len; ++i) { // Get the current initialiser - var current = this._queue[i] + const current = this._queue[i] // Determine whether we need to initialise - var needsIt = this._isDeclarative || (!current.initialised && running) + const needsIt = this._isDeclarative || (!current.initialised && running) running = !current.finished // Call the initialiser if we need to @@ -428,7 +431,7 @@ export default class Runner extends EventTarget { // and later // anim.move(...) if (this._isDeclarative) { - var timeline = this.timeline() + const timeline = this.timeline() timeline && timeline.play() } } @@ -437,14 +440,14 @@ export default class Runner extends EventTarget { // Run each run function for the position or dt given _run (positionOrDt) { // Run all of the _queue directly - var allfinished = true - for (var i = 0, len = this._queue.length; i < len; ++i) { + let allfinished = true + for (let i = 0, len = this._queue.length; i < len; ++i) { // Get the current function to run - var current = this._queue[i] + const current = this._queue[i] // Run the function if its not finished, we keep track of the finished // flag for the sake of declarative _queue - var converged = current.runner.call(this, positionOrDt) + const converged = current.runner.call(this, positionOrDt) current.finished = current.finished || (converged === true) allfinished = allfinished && current.finished } @@ -473,7 +476,7 @@ export default class Runner extends EventTarget { } this._history[method].caller.finished = false - var timeline = this.timeline() + const timeline = this.timeline() timeline && timeline.play() return true } @@ -601,8 +604,8 @@ export class RunnerArray { registerMethods({ Element: { animate (duration, delay, when) { - var o = Runner.sanitise(duration, delay, when) - var timeline = this.timeline() + const o = Runner.sanitise(duration, delay, when) + const timeline = this.timeline() return new Runner(o.duration) .loop(o) .element(this) @@ -672,7 +675,7 @@ extend(Runner, { let attrs = nameOrAttrs if (this._tryRetarget(type, attrs)) return this - var morpher = new Morphable(this._stepper).to(attrs) + let morpher = new Morphable(this._stepper).to(attrs) let keys = Object.keys(attrs) this.queue(function () { @@ -720,7 +723,7 @@ extend(Runner, { zoom (level, point) { if (this._tryRetarget('zoom', level, point)) return this - var morpher = new Morphable(this._stepper).to(new SVGNumber(level)) + let morpher = new Morphable(this._stepper).to(new SVGNumber(level)) this.queue(function () { morpher = morpher.from(this.element().zoom()) @@ -761,7 +764,7 @@ extend(Runner, { } // Parse the parameters - var isMatrix = Matrix.isMatrixLike(transforms) + const isMatrix = Matrix.isMatrixLike(transforms) affine = transforms.affine != null ? transforms.affine : (affine != null ? affine : !isMatrix) @@ -890,8 +893,8 @@ extend(Runner, { if (this._tryRetarget(method, to)) return this // Make a morpher and queue the animation - var morpher = new Morphable(this._stepper).to(to) - var from = null + const morpher = new Morphable(this._stepper).to(to) + let from = null this.queue(function () { from = this.element()[method]() morpher.from(from) @@ -913,7 +916,7 @@ extend(Runner, { if (this._tryRetarget(method, to)) return this // Make a morpher and queue the animation - var morpher = new Morphable(this._stepper).to(to) + const morpher = new Morphable(this._stepper).to(to) this.queue(function () { morpher.from(this.element()[method]()) }, function (pos) { @@ -953,7 +956,7 @@ extend(Runner, { // Add animatable size size (width, height) { // animate bbox based size for all other elements - var box + let box if (!width || !height) { box = this._element.bbox() @@ -991,7 +994,7 @@ extend(Runner, { if (this._tryRetarget('plot', a)) return this - var morpher = new Morphable(this._stepper) + const morpher = new Morphable(this._stepper) .type(this._element.MorphArray).to(a) this.queue(function () { diff --git a/src/animation/Timeline.js b/src/animation/Timeline.js index 25e6554..928c334 100644 --- a/src/animation/Timeline.js +++ b/src/animation/Timeline.js @@ -3,10 +3,10 @@ import { registerMethods } from '../utils/methods.js' import Animator from './Animator.js' import EventTarget from '../types/EventTarget.js' -var makeSchedule = function (runnerInfo) { - var start = runnerInfo.start - var duration = runnerInfo.runner.duration() - var end = start + duration +const makeSchedule = function (runnerInfo) { + const start = runnerInfo.start + const duration = runnerInfo.runner.duration() + const end = start + duration return { start: start, duration: duration, end: end, runner: runnerInfo.runner } } @@ -56,9 +56,9 @@ export default class Timeline extends EventTarget { // Calculates the end of the timeline getEndTime () { - var lastRunnerInfo = this.getLastRunnerInfo() - var lastDuration = lastRunnerInfo ? lastRunnerInfo.runner.duration() : 0 - var lastStartTime = lastRunnerInfo ? lastRunnerInfo.start : this._time + const lastRunnerInfo = this.getLastRunnerInfo() + const lastDuration = lastRunnerInfo ? lastRunnerInfo.runner.duration() : 0 + const lastStartTime = lastRunnerInfo ? lastRunnerInfo.start : this._time return lastStartTime + lastDuration } @@ -93,10 +93,10 @@ export default class Timeline extends EventTarget { } reverse (yes) { - var currentSpeed = this.speed() + const currentSpeed = this.speed() if (yes == null) return this.speed(-currentSpeed) - var positive = Math.abs(currentSpeed) + const positive = Math.abs(currentSpeed) return this.speed(yes ? -positive : positive) } @@ -110,8 +110,8 @@ export default class Timeline extends EventTarget { // derived from the current timeline time or it can be relative to the // last start time to chain animations directly - var absoluteStartTime = 0 - var endTime = this.getEndTime() + let absoluteStartTime = 0 + const endTime = this.getEndTime() delay = delay || 0 // Work out when to start the animation @@ -188,7 +188,7 @@ export default class Timeline extends EventTarget { // Remove the runner from this timeline unschedule (runner) { - var index = this._runnerIds.indexOf(runner.id) + const index = this._runnerIds.indexOf(runner.id) if (index < 0) return this this._runners.splice(index, 1) @@ -220,12 +220,12 @@ export default class Timeline extends EventTarget { _stepFn (immediateStep = false) { // Get the time delta from the last time and update the time - var time = this._timeSource() - var dtSource = time - this._lastSourceTime + const time = this._timeSource() + let dtSource = time - this._lastSourceTime if (immediateStep) dtSource = 0 - var dtTime = this._speed * dtSource + (this._time - this._lastStepTime) + const dtTime = this._speed * dtSource + (this._time - this._lastStepTime) this._lastSourceTime = time // Only update the time if we use the timeSource. @@ -249,7 +249,7 @@ export default class Timeline extends EventTarget { // runner always wins the reset even if the other runner started earlier // and therefore should win the attribute battle // this can be solved by reseting them backwards - for (var k = this._runners.length; k--;) { + for (let k = this._runners.length; k--;) { // Get and run the current runner and ignore it if its inactive const runnerInfo = this._runners[k] const runner = runnerInfo.runner @@ -266,8 +266,8 @@ export default class Timeline extends EventTarget { } // Run all of the runners directly - var runnersLeft = false - for (var i = 0, len = this._runners.length; i < len; i++) { + let runnersLeft = false + for (let i = 0, len = this._runners.length; i < len; i++) { // Get and run the current runner and ignore it if its inactive const runnerInfo = this._runners[i] const runner = runnerInfo.runner @@ -290,13 +290,13 @@ export default class Timeline extends EventTarget { // If this runner is still going, signal that we need another animation // frame, otherwise, remove the completed runner - var finished = runner.step(dt).done + const finished = runner.step(dt).done if (!finished) { runnersLeft = true // continue } else if (runnerInfo.persist !== true) { // runner is finished. And runner might get removed - var endTime = runner.duration() - runner.time() + this._time + const endTime = runner.duration() - runner.time() + this._time if (endTime + runnerInfo.persist < this._time) { // Delete runner and correct index |