polymate-behavior.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="polymate-utils.html">
<script src="../bodymovin/build/player/lottie.js"></script>

<script>
  (() => {

    PolymateBehavior = function(superClass) {
      return class extends PolymateUtils(superClass) {
        /**
         * @desc load the lottie animation using bodymovin player
         * @param {Object} options
         * @return {Void}
         */
        initializeLottie(options) {
          if (this.isEmpty(options)) return;

          let _options = {
            container: this.$.polymate,
            renderer: options.renderer || 'svg',
            loop: options.loop || false,
            autoplay: options.autoplay || false,
            autoloadSegments: options.autoloadSegments || false,
            animationData: options.animationData,
            path: options.path || '',
            rendererSettings: options.rendererSettings || {}
          };

          return lottie.loadAnimation(_options);
        }

        /**
         * @desc start the animation
         * @return {Void}
         */
        play() {
          this.anim.play();
        }

        /**
         * @desc stop the animation
         * @return {Void}
         */
        stop() {
          this.anim.stop();
        }

        /**
         * @desc pause the animation
         * @return {Void}
         */
        pause() {
          this.anim.pause();
        }

        /**
         * @desc set direction
         * @param direction
         * @return {Void}
         */
        setDirection(direction) {
          this.anim.setDirection(direction);
        }

        /**
         * @desc reverse direction
         * @return {Void}
         */
        reverseDirection() {
          this.setDirection(this.anim.playDirection * -1);
        }

        /**
         * @desc is first frame
         * @return {Boolean} isFirstFrame
         */
        isFirstFrame() {
          return this.anim.currentFrame === 0;
        }

        /**
         * @desc is last frame
         * @return {Boolean} isLastFrame
         */
        isLastFrame() {
          return this.anim.currentFrame === this.getLastFrame();
        }

        /**
         * @desc get animation last frame
         * @return {Number} lastFrame
         */
        getLastFrame() {
          return this.anim.totalFrames ? this.anim.totalFrames - 1 : false;
        }
      }
    }

  })();
</script>