安装 npm install animejs 引用 import anime from "animejs/lib/anime.es";
<template>
<div id="box">
<div class="animebox">
{{ battery.charged }}这是一个计时器{{ battery.cycles }}
</div>
<button class="btn" @click="x1">start</button>
<button class="btn" @click="x2">end</button>
<button class="btn" @click="x3">test</button>
</div>
</template>
<script>
import anime from "animejs/lib/anime.es";
export default {
name: "HelloWorld",
data() {
return {
data1: "100%",
data2: 300,
battery: {
charged: 0,
cycles: 0,
},
};
},
props: {
msg: String,
},
methods: {
// 移动
anime1() {
anime({
targets: ".animebox",
translateX: 250,
scale: 2,
rotate: "1turn",
});
},
x3() {
this.anime1();
},
// 数字变化
x1() {
anime({
targets: this.battery,
charged: this.data1,
cycles: this.data2,
round: 1,
easing: "linear",
// update: function () {
// JSON.stringify(this.battery);
// },
});
},
// 数字变化
x2() {
anime({
targets: this.battery,
charged: "0%",
cycles: 0,
round: 1,
easing: "linear",
// update: function () {
// JSON.stringify(this.battery);
// },
});
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#box {
width: 500px;
height: 500px;
margin-top: 30px;
box-shadow: 0 2px 12px 0 #00000060;
display: flex;
justify-content: space-around;
flex-direction: column;
align-items: center;
}
.animebox {
width: 100px;
height: 100px;
box-shadow: 0 12px 22px 0 #00000060;
}
.btn {
width: 50px;
height: 30px;
}
</style>
