I'm currently dealing with a Vue code that incorporates anime.js. My code has grown substantially to over 1500 lines. In order for Stack Overflow to accept my question, I have only included 5 items of my sampleText, even though it actually consists of 114 items.
Furthermore, I am interested in understanding how I can randomly distribute the sampleText within each <li> element. The goal is to shuffle the sampleText within each <li> position.
<template>
<div>
<ul>
<li>
{{ texts.text1 }}
</li>
<li">
{{ texts.text2 }}
</li>
<li>
{{ texts.text3 }}
</li>
<li>
{{ texts.text4 }}
</li>
<li>
{{ texts.text5 }}
</li>
// more list elements...
</ul>
</div>
</template>
<script>
import anime from 'animejs/lib/anime.es.js'
import { reactive, onMounted } from '@nuxtjs/composition-api'
const sampleText1 = 'インバウント'
const sampleText2 = 'BtoB'
const sampleText3 = 'セールス'
const sampleText4 = 'OODA'
const sampleText5 = '指標'
const characters =
'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
const charactersLength = characters.length
export default {
layout: 'default',
data() {
return {
sam1: sampleText1,
sam2: sampleText2,
sam3: sampleText3,
sam4: sampleText4,
sam5: sampleText5,
}
},
setup() {
const texts = reactive({
text1: sampleText1,
text2: sampleText2,
text3: sampleText3,
text4: sampleText4,
text5: sampleText5,
})
const scrambleText = (text, name) => ({ progress }) => {
if (Math.floor(progress) <= 50) {
if (Math.floor(progress) >= 50) {
texts[name] = text
} else if (Math.floor(progress) % 5 === 0) {
texts[name] = text.replace(/./g, () =>
characters.charAt(Math.floor(Math.random() * charactersLength))
)
}
}
}
onMounted(() => {
anime({
targets: '.main',
duration: 1000,
easing: 'linear',
loop: true,
update: scrambleText(sampleText1, 'text1'),
})
anime({
targets: '.main',
duration: 1000,
easing: 'linear',
loop: true,
update: scrambleText(sampleText2, 'text2'),
})
anime({
targets: '.main',
duration: 1000,
easing: 'linear',
loop: true,
update: scrambleText(sampleText3, 'text3'),
})
anime({
targets: '.main',
duration: 1000,
easing: 'linear',
loop: true,
update: scrambleText(sampleText4, 'text4'),
})
anime({
targets: '.main',
duration: 1000,
easing: 'linear',
loop: true,
update: scrambleText(sampleText5, 'text5'),
})
})
return {
texts,
}
},
}
</script>