Lottie.vue

<script setup>
import { onMounted, ref, watch } from "vue";
import { LottieAnimation } from "lottie-web-vue";
import AnimationDataJSON from "../assets/Lottiefile_Bauchbinde_Beispiel.json";
import AnimationRechtsBB from "../assets/bbrechts_v2.json";
import AnimationLinksBB from "../assets/bblinks_v2.json";

let anim = ref();
let animationRechts = false;
let animationLinks = false;
let BBUnselected = true;

const props = defineProps({
  vorname: {
    type: String,
    required: true,
  },
  nachname: {
    type: String,
    required: true,
  },
  funktionZeileEins: {
    type: String,
    required: true,
  },
  funktionZeileZwei: {
    type: String,
    required: true,
  },
  BBEcke: {
    type: String,
    required: true,
  },
  playLottieStatus: {
    type: Boolean,
    required: true,
  },
  pauseLottieStatus: {
    type: Boolean,
    required: true,
  },
});

watch(
  () => props.BBEcke,
  () => {
    console.log(props.BBEcke);
    if (props.BBEcke === "links") {
      animationLinks = true;
      animationRechts = false;
      BBUnselected = false;
    }
    if (props.BBEcke === "rechts") {
      animationRechts = true;
      animationLinks = false;
      BBUnselected = false;
    }
  }
);

watch(
  () => props.playLottieStatus,
  () => {
    if (props.playLottieStatus) {
      anim.value.play();
    } else {
      anim.value.pause();
    }
  }
);

watch(
  () => props.pauseLottieStatus,
  () => {
    if (props.pauseLottieStatus) {
      anim.value.pause();
    } else {
      anim.value.play();
    }
  }
);

const lottie = ref(0);

watch(
  () => props.vorname,
  () => {
    console.log(AnimationRechtsBB.layers[1].t.d.k[0].s.t)
    AnimationRechtsBB.layers[1].t.d.k[0].s.t = props.vorname.toUpperCase();
    AnimationLinksBB.layers[1].t.d.k[0].s.t = props.vorname.toUpperCase();
    lottie.value++;
  }
);

watch(
  () => props.nachname,
  () => {
    AnimationRechtsBB.layers[3].t.d.k[0].s.t = props.nachname.toUpperCase();
    AnimationLinksBB.layers[3].t.d.k[0].s.t = props.nachname.toUpperCase();
    lottie.value++;
  }
);

watch(
  () => props.funktionZeileEins,
  () => {
    AnimationRechtsBB.layers[5].t.d.k[0].s.t = props.funktionZeileEins;
    AnimationLinksBB.layers[5].t.d.k[0].s.t = props.funktionZeileEins;
    lottie.value++;
  }
);

watch(
  () => props.funktionZeileZwei,
  () => {
    AnimationRechtsBB.layers[7].t.d.k[0].s.t = props.funktionZeileZwei;
    AnimationLinksBB.layers[7].t.d.k[0].s.t = props.funktionZeileZwei;
    lottie.value++;
  }
);

onMounted(() => {
  setTimeout(() => {
    // console.log(anim.value.goToAndPlay(150, true));
    anim.value;
  }, 500);
});
</script>
<template>
  <h2 v-if="BBUnselected">Bitte eine Postion für<br> die Bauchbinde auswählen</h2>
  <div class="animation">
    <LottieAnimation
      :key="lottie"
      ref="anim"
      :animation-data="AnimationRechtsBB"
      :loop="true"
      :auto-play="true"
      :speed="1"
      @loopComplete="loopComplete"
      @complete="complete"
      @enterFrame="enterFrame"
      @segmentStart="segmentStart"
      @stopped="stopped"
      v-if="animationRechts"
    />
    <LottieAnimation
      :key="lottie"
      ref="anim"
      :animation-data="AnimationLinksBB"
      :loop="true"
      :auto-play="true"
      :speed="1"
      @loopComplete="loopComplete"
      @complete="complete"
      @enterFrame="enterFrame"
      @segmentStart="segmentStart"
      @stopped="stopped"
      v-if="animationLinks"
    />
  </div>
</template>

<style>
.animation {
  background-color: #000;

}
.hinweis {
  text-align: center;
  margin: auto;
}
</style>