在 vue.js 中单击按钮时随机生成动画
generate animations randomly on button click in vue.js
我有三个 lottie 播放器 json 动画文件 - congratulations1.json、congratulations2.json 和congratulations3.json动画如下:
恭喜1:
<lottie-player
v-if="showPlayer1"
class="justify-content-center"
src="../../../congratulations.json"
background="transparent"
speed="1"
style="width: 300px; height: 300px"
loop
controls
autoplay
></lottie-player
>;
恭喜2:
<lottie-player
v-if="showPlayer2"
class="justify-content-center"
src="../../../congratulations2.json"
background="transparent"
speed="1"
style="width: 300px; height: 300px"
loop
controls
autoplay
></lottie-player
>;
恭喜3:
<lottie-player
v-if="showPlayer3"
class="justify-content-center"
src="../../../congratulations3.json"
background="transparent"
speed="1"
style="width: 300px; height: 300px"
loop
controls
autoplay
></lottie-player
>;
注意: json文件的路径在那些lottie-player标签的src中提到。
我想在单击单个按钮时随机显示它们。
我做过的事情:
我为这三个动画分别取了三个变量。变量是 - showPlayer1、showPlayer2 和 showPlayer3。
我将它们保存在一个名为 showPlayer 的数组中,并将它们的值设置为 false。我不知道我的程序是否正确。
接下来要做什么我不知道。
我的数组:
<script>
export default {
data() {
return {
showPlayer: [
(showPlayer1 = false),
(showPlayer2 = false),
(showPlayer3 = false),
],
};
},
我已经做到了。在按钮标签中包含什么来随机显示数组中的这三个动画,我不知道。请帮忙。
更新代码:
<div class="justify-content-center anim">
<lottie-player
v-if="showPlayer === 1"
class="justify-content-center"
src="../../../congratulations.json"
background="transparent"
speed="1"
style="width: 300px; height: 300px"
loop
controls
autoplay
></lottie-player
>;
</div>
<div class="justify-content-center anim">
<lottie-player
v-if="showPlayer === 2"
class="justify-content-center"
src="../../../congratulations_2.json"
background="transparent"
speed="1"
style="width: 300px; height: 300px"
loop
controls
autoplay
></lottie-player
>;
</div>
<div class="justify-content-center anim">
<lottie-player
v-if="showPlayer === 3"
class="justify-content-center"
src="../../../congratulations_3.json"
background="transparent"
speed="1"
style="width: 300px; height: 300px"
loop
controls
autoplay
></lottie-player
>;
</div>
正如我在下面所展示的,有几种其他方法可以实现这一点。但是如果你想像你建议的那样做,我不会将 showPlayer 用作布尔数组,而是用作数字。
<template>
<div v-if="showPlayer === 1"> DIV 1 </div>
<div v-if="showPlayer === 2"> DIV 3 </div>
<div v-if="showPlayer === 3"> DIV 3 </div>
<button @click="onRandomButtonPress">Random!</button>
</template>
<script>
export default {
data() {
return {
showPlayer: 1
};
},
methods: {
onRandomButtonPress() {
this.showPlayer = Math.floor(Math.random()*3 + 1);
},
}
</script>
有多种方法可以解决这个问题。如果您只想使用一个组件并切换源,您可以这样做:
首先,将组件的 src 设置为变量:
<lottie-player
class="justify-content-center"
:src="animationSrc"
background="transparent"
speed="1"
style="width: 300px; height: 300px"
loop
controls
autoplay
></lottie-player
>;
用你在 data() 中的字符串设置一个数组,如下所示:
animations: [
'../../../congratulations.json',
'../../../congratulations2.json',
'../../../congratulations3.json',
],
animationSrc: ''
然后像这样为 randomButton 设置一个方法:
onRandomButtonPress() {
this.animationSrc = this.animations[Math.floor(Math.random()*this.animations.length)];
},
我很快就破解了一个codesandbox:
https://codesandbox.io/s/elastic-dijkstra-o7ety?file=/src/components/HelloWorld.vue
你也可以使用vue中的:is属性来加载一个动态组件,在代码中设置你要加载哪个组件。
https://vuejs.org/v2/guide/components-dynamic-async.html
我有三个 lottie 播放器 json 动画文件 - congratulations1.json、congratulations2.json 和congratulations3.json动画如下:
恭喜1:
<lottie-player
v-if="showPlayer1"
class="justify-content-center"
src="../../../congratulations.json"
background="transparent"
speed="1"
style="width: 300px; height: 300px"
loop
controls
autoplay
></lottie-player
>;
恭喜2:
<lottie-player
v-if="showPlayer2"
class="justify-content-center"
src="../../../congratulations2.json"
background="transparent"
speed="1"
style="width: 300px; height: 300px"
loop
controls
autoplay
></lottie-player
>;
恭喜3:
<lottie-player
v-if="showPlayer3"
class="justify-content-center"
src="../../../congratulations3.json"
background="transparent"
speed="1"
style="width: 300px; height: 300px"
loop
controls
autoplay
></lottie-player
>;
注意: json文件的路径在那些lottie-player标签的src中提到。
我想在单击单个按钮时随机显示它们。
我做过的事情:
我为这三个动画分别取了三个变量。变量是 - showPlayer1、showPlayer2 和 showPlayer3。 我将它们保存在一个名为 showPlayer 的数组中,并将它们的值设置为 false。我不知道我的程序是否正确。 接下来要做什么我不知道。
我的数组:
<script>
export default {
data() {
return {
showPlayer: [
(showPlayer1 = false),
(showPlayer2 = false),
(showPlayer3 = false),
],
};
},
我已经做到了。在按钮标签中包含什么来随机显示数组中的这三个动画,我不知道。请帮忙。
更新代码:
<div class="justify-content-center anim">
<lottie-player
v-if="showPlayer === 1"
class="justify-content-center"
src="../../../congratulations.json"
background="transparent"
speed="1"
style="width: 300px; height: 300px"
loop
controls
autoplay
></lottie-player
>;
</div>
<div class="justify-content-center anim">
<lottie-player
v-if="showPlayer === 2"
class="justify-content-center"
src="../../../congratulations_2.json"
background="transparent"
speed="1"
style="width: 300px; height: 300px"
loop
controls
autoplay
></lottie-player
>;
</div>
<div class="justify-content-center anim">
<lottie-player
v-if="showPlayer === 3"
class="justify-content-center"
src="../../../congratulations_3.json"
background="transparent"
speed="1"
style="width: 300px; height: 300px"
loop
controls
autoplay
></lottie-player
>;
</div>
正如我在下面所展示的,有几种其他方法可以实现这一点。但是如果你想像你建议的那样做,我不会将 showPlayer 用作布尔数组,而是用作数字。
<template>
<div v-if="showPlayer === 1"> DIV 1 </div>
<div v-if="showPlayer === 2"> DIV 3 </div>
<div v-if="showPlayer === 3"> DIV 3 </div>
<button @click="onRandomButtonPress">Random!</button>
</template>
<script>
export default {
data() {
return {
showPlayer: 1
};
},
methods: {
onRandomButtonPress() {
this.showPlayer = Math.floor(Math.random()*3 + 1);
},
}
</script>
有多种方法可以解决这个问题。如果您只想使用一个组件并切换源,您可以这样做: 首先,将组件的 src 设置为变量:
<lottie-player
class="justify-content-center"
:src="animationSrc"
background="transparent"
speed="1"
style="width: 300px; height: 300px"
loop
controls
autoplay
></lottie-player
>;
用你在 data() 中的字符串设置一个数组,如下所示:
animations: [
'../../../congratulations.json',
'../../../congratulations2.json',
'../../../congratulations3.json',
],
animationSrc: ''
然后像这样为 randomButton 设置一个方法:
onRandomButtonPress() {
this.animationSrc = this.animations[Math.floor(Math.random()*this.animations.length)];
},
我很快就破解了一个codesandbox: https://codesandbox.io/s/elastic-dijkstra-o7ety?file=/src/components/HelloWorld.vue
你也可以使用vue中的:is属性来加载一个动态组件,在代码中设置你要加载哪个组件。 https://vuejs.org/v2/guide/components-dynamic-async.html