How to use the ember-animated.rAF function in ember-animated

To help you get started, we’ve selected a few ember-animated examples, based on popular ways it is used in public projects.

github ember-animation / ember-animated / addon-test-support / time-control.js View on Github external
advance(ms) {
    if (this._runningSpeed) {
      throw new Error("You can't advance a running TimeControl. Use either runAtSpeed or advance but not both at once.");
    }
    this._timer += ms;
    // This waits for three frames because:
    //
    //   1. You need at least two rAFs to guarantee that everybody
    //   else who is running at rAF frequency had a chance to run
    //   (because you don't know which ones ran before you in the same
    //   frame).
    //
    //   2. Our Tween system doesn't mark Tweens as done until they
    //   had a whole frame in their "done" state (see comments in
    //   ./tween.js).
    return rAF().then(rAF).then(rAF);
  }
  runAtSpeed(factor) {
github ember-animation / ember-animated / addon / motions / adjust-css.js View on Github external
this.duration,
        this.opts.easing
      ).plus(this.prior.tween);
    } else {
      this.tween = new Tween(
        this._splitUnit(this.sprite.initialComputedStyle[this.propertyName]).value,
        finalValue,
        this.duration,
        this.opts.easing
      );
    }
    while (!this.tween.done) {
      this.sprite.applyStyles({
        [this.propertyName]: `${this.tween.currentValue}${unit}`
      });
      yield rAF();
    }
  }
github ember-animation / ember-animated / addon / motions / box-shadow.js View on Github external
from = BoxShadow.fromComputedStyle(this.sprite.initialComputedStyle['box-shadow']);
    }

    let to;
    if (this.opts.to) {
      to = BoxShadow.fromUserProvidedShadow(this.opts.to);
    } else {
      to = BoxShadow.fromComputedStyle(this.sprite.finalComputedStyle['box-shadow']);
    }

    let shadowTween = new BoxShadowTween(from, to, this.duration, this.opts.easing);
    while (!shadowTween.done) {
      this.sprite.applyStyles({
        'box-shadow': shadowTween.currentValue.map(shadow => shadow.toString()).join(',')
      });
      yield rAF();
    }
  }
}
github cardstack / cardstack / packages / cardhost / app / motions / drag.js View on Github external
let x = dx + this.dragStartX + sprite.absoluteFinalBounds.width / 2;
        let y = dy + this.dragStartY + sprite.absoluteFinalBounds.height / 2;

        let ownDistance = (x - ownTarget.x) * (x - ownTarget.x) + (y - ownTarget.y) * (y - ownTarget.y);
        let closerTarget = targets.find(target => {
          let partialX = target.x - x;
          let partialY = target.y - y;
          let distance = partialX * partialX + partialY * partialY;
          return distance < ownDistance;
        });

        if (closerTarget && this.opts.onCollision) {
          this.opts.onCollision(closerTarget.payload);
        }
      }
      yield rAF();
    }
  }
}
github ef4 / living-animation / src / ui / routes / tutorial-24 / -utils / drag.js View on Github external
let x = dx + this.dragStartX + sprite.absoluteFinalBounds.width / 2;
        let y = dy + this.dragStartY + sprite.absoluteFinalBounds.height / 2;

        let ownDistance = (x - ownTarget.x) * (x - ownTarget.x) + (y - ownTarget.y) * (y - ownTarget.y);
        let closerTarget = targets.find(target => {
          let partialX = target.x - x;
          let partialY = target.y - y;
          let distance = partialX * partialX + partialY * partialY;
          return distance < ownDistance;
        });

        if (closerTarget) {
          this.opts.onCollision(closerTarget.payload);
        }
      }
      yield rAF();
    }

  }
github ember-animation / ember-animated / addon / motions / move-svg.js View on Github external
0,
        this.sprite.getFinalDimension(this.dimension) - this.prior.tween.finalValue,
        this.duration,
        this.opts.easing
      ).plus(this.prior.tween);
    } else {
      this.tween = new Tween(
        this.sprite.getInitialDimension(this.dimension),
        this.sprite.getFinalDimension(this.dimension),
        this.duration,
        this.opts.easing
      );
    }
    while (!this.tween.done) {
      this.sprite.element[this.dimension].baseVal.value = this.tween.currentValue;
      yield rAF();
    }
  }
}
github ember-animation / ember-animated / addon / motions / adjust-color.js View on Github external
}

    if (this.opts.to != null) {
      to = Color.fromUserProvidedColor(this.opts.to);
    } else if (this.sprite.finalComputedStyle) {
      to = Color.fromComputedStyle(this.sprite.finalComputedStyle[this.propertyName]);
    } else {
      to = Color.fromComputedStyle(this.sprite.initialComputedStyle[this.propertyName]);
    }

    this.colorTween = new ColorTween(from, to, this.duration, this.opts.easing);
    while (!this.colorTween.done) {
      this.sprite.applyStyles({
        [this.propertyName]: this.colorTween.currentValue.toString()
      });
      yield rAF();
    }
  }
}