Lottie&vue-lottie--より簡単なアニメーションの実現方法

ロッティって何?
LottieはbodymovinプラグインでAdobe After Effectsアニメーションを解析し、json形式のファイルを生成することができます.このjsonファイルは、LottieオープンソースライブラリでiOS、Android、macOS、React Nativeで解析してアニメーション効果を生成することができます.
以下は、公式サイトのアニメーション効果です.
なぜLottieを使うのか
これまで私たちのデザインの学生はすべてデザインソフトウェアを使って、アニメーションの効果を設計して、学生を開発して更にコードを通じて動効を実現します.複雑なアニメーションでは、開発者は長い時間をかけて実現し、設計者の最初の効果を達成できない可能性があります.もう一つのアニメーションを実現する方法はgif図です.しかしAndroidはgif図をサポートしておらず、gif図はモバイル端末に多すぎるスペースを占有する問題がある.
では、Lottieは私たちのために何をしてくれたのでしょうか.まず、デザインの学生はAdobe After Effectsでアニメーション効果を設計し、bodymovinプラグインを通じて、アニメーションをjsonファイルにエクスポートすることができます.その後、開発者はLottieを通じて前に生成したjsonファイルをアニメーション効果にレンダリングすることができます.これにより、多くの複雑なアニメーション効果を効率的に実現できます.
vuejsでのLottieの使用
現在流行しているフロントエンドフレームvuejsには、もちろんLottieをサポートするコンポーネントがあります.
vue-lottieはvuejsに基づくアニメーション効果実装コンポーネントである.これはlottieオープンソースプロジェクトに基づいて、After Effectsがエクスポートしたjsonファイルをsvg/canvas/htmlアニメーション効果としてレンダリングできます.
vue-lottieインストール
NPMによるインストール

npm install --save vue-lottie

vue-lottie使用

  import Lottie from './lottie.vue';
  import * as animationData from './assets/pinjump.json';

  export default {
    name: 'app',
    components: {
      'lottie': Lottie
    },
    data() {
      return {
        defaultOptions: {animationData: animationData},
        animationSpeed: 1
      }
    },
    methods: {
      handleAnimation: function (anim) {
        this.anim = anim;
      },

      stop: function () {
        this.anim.stop();
      },

      play: function () {
        this.anim.play();
      },

      pause: function () {
        this.anim.pause();
      },

      onSpeedChange: function () {
        this.anim.setSpeed(this.animationSpeed);
      }
    }
  }

車輪工場--優秀なvue、angularコンポーネントを共有するウェブサイト