需求
- 20个球
- 每个球都有三对坐标
- 3对坐标 小球起始位置，小球第二次的位置，小球第三次的位置。
- 所有小球，同时运动，
- 运动到最后的位置时候呢，暂停三秒，然后重新回到最初的位置继续运动。
解题思路
- canvas
- css3 过渡（个人看法，球的数量很多的时候，性能很差）
- 纯算法去做
//css3实现版本
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.qiu {
width: 5px;
height: 5px;
border-radius: 10px;
position: absolute;
background: pink;
transition: all linear 1s;
}
#app{
position: relative;
}
</style>
</head>
<body>
<div id="app">
<!-- v 就是 每一个对象的数据 k索引 -->
<div class="qiu" v-for="v,k in arr" :style="'top:'+(v.y1)*100+'px;left:'+(v.x1)*100+'px'" ref="m">
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
arr: [{
"name": "点1",
"x1": 0.99,
"y1": 0.12,
"x2": 0.99,
"y2": 0.07,
"x3": 1.26,
"y3": 0.11
},
{
"name": "点2",
"x1": 0.39,
"y1": 0.24,
"x2": 1.47,
"y2": 0.28,
"x3": 1.30,
"y3": 0.58
},
{
"name": "点3",
"x1": 0.98,
"y1": 0.50,
"x2": 1.18,
"y2": 0.60,
"x3": 1.18,
"y3": 0.80
}
]
},
methods: {
mymove: function () {
console.log(this.$refs)
var i = 1
var n = 1;
let t = setInterval(() => {
i++
if (i < 4) {
n = i
} else if (i < 7) {
n = 3
} else {
n = 1
i = 1
}
this.$refs.m.forEach((v, k) => {
v.style.cssText =
`top:${this.arr[k]["y"+n]*100}px;left:${this.arr[k]["x"+n]*100}px`
})
}, 1000)
}
},
mounted() {
this.mymove()
},
})
</script>
<html>
网友评论