Как сделать анимацию lott ie на объекте canvas - PullRequest
Новая
       8

Как сделать анимацию lott ie на объекте canvas

0 голосов
/ 09 марта 2020

Я пытаюсь использовать vue -lott ie, чтобы взять анимацию после эффектов и отобразить ее на холсте. Анимация работает нормально, но независимо от того, что я делаю, я не могу заставить ее рендерить на холст. Это только кажется, чтобы сделать SVG. Мне нужен способ визуализации анимации на холсте, мне все равно, как я это делаю. Если мне нужно переключать библиотеки, то мне просто нужен способ получить анимацию на объекте canvas. Любая помощь здесь будет принята с благодарностью. Вот код 

<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>
...