如何将lottie动画渲染到画布对象

Question

我正在尝试使用vue-lottie来拍摄一个后效动画，并将其渲染到画布上。动画运行良好，但无论我做什么，我都不能让它渲染到画布上。它似乎只呈现了一个svg。我需要一种方法来渲染动画到画布，我不关心我怎么做。如果我需要转换库，那很好，我只需要一种在画布对象上获得动画的方法。这里的任何帮助都将不胜感激。下面是代码

<template>
  <div>
    <lottie
      :options="defaultOptions"
      :heigh="1920"
      :width="1080"
      v-on:animCreated="handleAnimation"
    />
    <div id="container"></div>
  </div>
</template>

<script>
import * as animationData from "../data.json";
var text1 = "I hate sand";
var text2 = "dope";
var text3 = "nope";
var text4 = "haha";
var text5 = "n";
animationData.layers[0].t.d.k[0].s.t = text1;
animationData.layers[1].t.d.k[0].s.t = text2;
animationData.layers[2].t.d.k[0].s.t = text3;
animationData.layers[3].t.d.k[0].s.t = text4;
animationData.layers[4].t.d.k[0].s.t = text5;
console.log(animationData);
export default {
  data() {
    return {
      defaultOptions: {
        animationData: animationData.default,
        container: "container",
        renderer: "canvas"
      },
      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);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.hello {
  background-color: black !important;
}
</style>

Answer 1

我不完全确定，但我认为问题一定来自动画，这是因为画布渲染器不支持蒙版。我目前正面临着类似的情况。

点击here阅读更多信息。