Skip to content
Snippets Groups Projects
Commit 90eb76a6 authored by Brendan Lawton's avatar Brendan Lawton
Browse files

Play und Pause sollten jetzt immer funktionieren. Ich habe auch die...

Play und Pause sollten jetzt immer funktionieren. Ich habe auch die AnimationData als Variable gespeichert, um DRY-Methoden zu folgen. Ich habe auch die andere Lottie-Datei (links oder rechts) aktualisiert, wenn die andere aktualisiert wird, so dass die Eingabefelder mit den beiden Lotties immer konsistent sind.
parent 8f134f89
No related branches found
No related tags found
No related merge requests found
......@@ -9,21 +9,24 @@ const nachname = ref("");
const funktionZeileEins = ref("");
const funktionZeileZwei = ref("");
const BBEcke = ref("");
let playLottieStatus = ref(false);
let playLottieStatus = ref(true);
let pauseLottieStatus = ref(false);
let falseLoopStatus = ref(false);
function playLottie(data: boolean) {
playLottieStatus.value = data;
console.log( "play status shows:" + playLottieStatus.value);
falseLoopStatus.value = false;
}
function pauseLottie(data: boolean) {
pauseLottieStatus.value = data;
console.log( "pause shows:" + pauseLottieStatus.value);
}
function falseStatusLottieLoop(data: boolean) {
falseLoopStatus.value = data;
console.log("stuck status = " + falseLoopStatus.value)
console.log("stuck status = " + falseLoopStatus.value);
}
</script>
......
......@@ -30,7 +30,7 @@ watch(
() => {
if (props.falseLoopStatus == true) {
console.log("we gotta false loop!")
startAnimation();
startAnimation()
}
});
......@@ -179,6 +179,7 @@ function download(content: string, fileName: string, contentType: string) {
color: #266ca3;
border: 1px solid #266ca3;
}
.inputField {
width: 98%;
}
......
<script setup>
import { onMounted, ref, watch } from "vue";
import { onMounted, ref, watch, nextTick } from "vue";
import { LottieAnimation } from "lottie-web-vue";
import AnimationDataJSON from "../assets/Lottiefile_Bauchbinde_Beispiel.json";
import AnimationRechtsBB from "../assets/bbrechts_v2.json";
......@@ -8,10 +8,11 @@ import AnimationLinksBB from "../assets/bblinks_v2.json";
const emit = defineEmits(["falseStatusLottieLoop"]);
let anim = ref();
let anim = ref(null);
let BBUnselected = true;
let animationData = AnimationDataJSON;
let showAnimation = false;
const lottie = ref(0);
const props = defineProps({
vorname: {
......@@ -48,74 +49,71 @@ function breakLottieFalseLoop() {
emit("falseStatusLottieLoop", true)
}
watch(
() => props.BBEcke,
() => {
console.log(props.BBEcke);
async () => {
if (props.BBEcke === "links") {
animationData = AnimationLinksBB
animationData = AnimationLinksBB;
BBUnselected = false;
showAnimation = true;
setMaxMustermann();
console.log("play status = " + props.playLottieStatus)
console.log("pause status = " + props.pauseLottieStatus)
lottie.value++;
await nextTick();
if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
console.log("breaking out!")
breakLottieFalseLoop();
}
}
if (props.BBEcke === "rechts") {
animationData = AnimationRechtsBB
animationData = AnimationRechtsBB;
BBUnselected = false;
showAnimation = true;
setMaxMustermann();
console.log("play status = " + props.playLottieStatus)
console.log("pause status = " + props.pauseLottieStatus)
lottie.value++;
await nextTick();
if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
console.log("breaking out!")
breakLottieFalseLoop();
}
}
}
);
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);
// Added array.filter to improve adaptability to different lottie files
watch(
() => props.vorname,
() => {
async () => {
animationData.layers.filter((layer) => {
return layer.nm === "VORNAME";
})[0].t.d.k[0].s.t = props.vorname.toUpperCase();
if (props.BBEcke == "links"){
AnimationRechtsBB.layers.filter((layer) => {
return layer.nm === "VORNAME";
})[0].t.d.k[0].s.t = props.vorname.toUpperCase();
} else if (props.BBEcke == "rechts") {
AnimationLinksBB.layers.filter((layer) => {
return layer.nm === "VORNAME";
})[0].t.d.k[0].s.t = props.vorname.toUpperCase();
}
lottie.value++;
await nextTick();
if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
console.log("breaking out!")
breakLottieFalseLoop();
}
}
......@@ -123,13 +121,24 @@ watch(
watch(
() => props.nachname,
() => {
async () => {
animationData.layers.filter((layer) => {
return layer.nm === "NACHNAME";
})[0].t.d.k[0].s.t = props.nachname.toUpperCase();
if (props.BBEcke == "links"){
AnimationRechtsBB.layers.filter((layer) => {
return layer.nm === "NACHNAME";
})[0].t.d.k[0].s.t = props.nachname.toUpperCase();
} else if (props.BBEcke == "rechts") {
AnimationLinksBB.layers.filter((layer) => {
return layer.nm === "NACHNAME";
})[0].t.d.k[0].s.t = props.nachname.toUpperCase();
}
lottie.value++;
await nextTick();
if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
console.log("breaking out!")
breakLottieFalseLoop();
}
}
......@@ -137,13 +146,23 @@ watch(
watch(
() => props.funktionZeileEins,
() => {
async () => {
animationData.layers.filter((layer) => {
return layer.nm === "FUNKTION1";
})[0].t.d.k[0].s.t = props.funktionZeileEins;
if (props.BBEcke == "links")
{
AnimationRechtsBB.layers.filter((layer) => {
return layer.nm === "FUNKTION1";
})[0].t.d.k[0].s.t = props.funktionZeileEins;
} else if (props.BBEcke == "rechts") {
AnimationLinksBB.layers.filter((layer) => {
return layer.nm === "FUNKTION1";
})[0].t.d.k[0].s.t = props.funktionZeileEins;
}
lottie.value++;
await nextTick();
if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
console.log("breaking out!")
breakLottieFalseLoop();
}
}
......@@ -151,36 +170,53 @@ watch(
watch(
() => props.funktionZeileZwei,
() => {
async () => {
animationData.layers.filter((layer) => {
return layer.nm === "FUNKTION2";
})[0].t.d.k[0].s.t = props.funktionZeileZwei;
if (props.BBEcke == "links")
{
AnimationRechtsBB.layers.filter((layer) => {
return layer.nm === "FUNKTION2";
})[0].t.d.k[0].s.t = props.funktionZeileZwei;
} else if (props.BBEcke == "rechts") {
AnimationLinksBB.layers.filter((layer) => {
return layer.nm === "FUNKTION2";
})[0].t.d.k[0].s.t = props.funktionZeileZwei;
}
lottie.value++;
await nextTick();
if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
console.log("breaking out!")
breakLottieFalseLoop();
}
}
);
function setMaxMustermann() {
animationData = AnimationRechtsBB;
animationData.layers[1].t.d.k[0].s.t = "MAX";
animationData.layers[3].t.d.k[0].s.t = "MUSTERMANN";
animationData.layers[5].t.d.k[0].s.t = "Testperson";
animationData.layers[7].t.d.k[0].s.t = "";
animationData = AnimationLinksBB;
animationData.layers[1].t.d.k[0].s.t = "MAX";
animationData.layers[3].t.d.k[0].s.t = "MUSTERMANN";
animationData.layers[5].t.d.k[0].s.t = "Testperson";
animationData.layers[7].t.d.k[0].s.t = "";
}
function updateValues () {
// animationData.layers[1].t.d.k[0].s.t = props.vorname;
// animationData.layers[3].t.d.k[0].s.t = props.nachname;
// animationData.layers[5].t.d.k[0].s.t = props.funktionZeileEins;
// animationData.layers[7].t.d.k[0].s.t = props.funktionZeileZwei;
}
onMounted(() => {
// Added this temporarily to improve initial animation output
// animationData.layers[1].t.d.k[0].s.t = "MAX";
// animationData.layers[3].t.d.k[0].s.t = "MUSTERMANN";
// animationData.layers[5].t.d.k[0].s.t = "Testperson";
// animationData.layers[7].t.d.k[0].s.t = "";
setTimeout(() => {
// console.log(anim.value.goToAndPlay(150, true));
anim.value;
}, 500);
setMaxMustermann();
});
</script>
<template>
......@@ -188,8 +224,8 @@ onMounted(() => {
Bitte eine Position für<br />
die Bauchbinde auswählen
</h2>
<div class="animation" v-if="showAnimation">
<LottieAnimation :key="lottie" ref="anim" :animation-data="animationData" :loop="true" :auto-play="true" :speed="1"
<div class="animation" v-if="showAnimation" :key="lottie">
<LottieAnimation ref="anim" :animation-data="animationData" :loop="true" :auto-play="true" :speed="1"
@loopComplete="loopComplete" @complete="complete" @enterFrame="enterFrame" @segmentStart="segmentStart"
@stopped="stopped" />
</div>
......
......@@ -3,9 +3,14 @@
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"lib": [
"ES2020",
"DOM",
"DOM.Iterable"
],
"skipLibCheck": true,
"noImplicitAny": false,
"allowJs": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
......@@ -13,13 +18,20 @@
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue"
],
"references": [
{
"path": "./tsconfig.node.json"
}
]
}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment