Select Git revision
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>