Skip to content
Snippets Groups Projects
Select Git revision
  • 2c4dbeca97ee9b5a675afb172c31cdd74e4355c0
  • main default protected
  • 03-download-and-edit-version
  • 02-httpRequest-Edit
4 results

Lottie.vue

Blame
  • Lottie.vue 3.50 KiB
    <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>