原生js实现扇形导航以及动画的坑
第一次发博客，有点紧张。首先来一张效果图。
主要是实现了点击右下角的风扇按钮实现了:
导航栏的开启与关闭，中间伴随着 transition过渡以及transform的2D动画。
上源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>扇形导航</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
#main{
overflow: auto;
height: 100%;
position: relative;
}
h1{
color: #1c86e5;
text-align: center;
}
.navigation{
position: fixed;
right:5px ;
bottom: 5px;
height: 40px;
width: 40px;
}
.right-bottom{
height: 40px;
width: 40px;
position: absolute;
border-radius: 50%;
z-index: 1;
transition: 1.5s;
background-color: white;
}
img{
position: absolute;
transition: 1s;
}
</style>
<body>
<div id="main">
<h1>扇形导航</h1>
<div class="navigation">
<img src="img/衣服.png" width="40">
<img src="img/礼物.png" width="40">
<img src="img/设置.png" width="40">
<img src="img/返回.png" width="40">
<img class="right-bottom" src="img/风扇.png" width="40">
<!-- <div class="right-bottom">-->
<!-- </div>-->
</div>
</div>
<script>
// 1.在元素首次渲染还没有完成的情况下，是不会触发过渡的
// 2.在绝大部分变换样式切换时，如果变化函数的位置个数、类型不相同也可能不会触发过渡
window.onload=function () {
let imgArr=document.getElementsByTagName('img')
let flag=true
for (let i=0;i<imgArr.length;i++){
imgArr[i].onmousedown=function () {
switch (i) {
case 0:imgArr[i].style.transform='translate(0,-90px) rotate(360deg)scale(1.5)'
imgArr[i].style.opacity=0.3;
imgArr[i].style.transition='300ms';break;
case 1:imgArr[i].style.transform='translate(-45px,-85px) rotate(360deg)scale(1.5)'
imgArr[i].style.opacity=0.3;
imgArr[i].style.transition='300ms';break;
case 2:imgArr[i].style.transform='translate(-90px,-50px) rotate(360deg)scale(1.5)'
imgArr[i].style.opacity=0.3;
imgArr[i].style.transition='300ms';break;
case 3:imgArr[i].style.transform='translate(-100px,0) rotate(360deg)scale(1.5)'
imgArr[i].style.opacity=0.3;
imgArr[i].style.transition='300ms';break;
}
}
imgArr[i].onmouseup=function () {
switch (i) {
case 0:setTimeout(function () {
imgArr[i].style.transform='translate(0,-90px) rotate(360deg)scale(1)'
imgArr[i].style.opacity=1;
},300);break;
case 1:setTimeout(function () {
imgArr[i].style.transform='translate(-45px,-85px) rotate(360deg)scale(1)'
imgArr[i].style.opacity=1;
},300);break;
case 2:setTimeout(function () {
imgArr[i].style.transform='translate(-90px,-50px) rotate(360deg)scale(1)'
imgArr[i].style.opacity=1;
},300);break;
case 3:setTimeout(function () {
imgArr[i].style.transform='translate(-100px,0) rotate(360deg)scale(1)'
imgArr[i].style.opacity=1;
},300);break;
}
setTimeout(function () {
imgArr[i].style.transition='1s'
},400)
}
}
imgArr[4].onclick=()=>{
if (flag){
for (let i=0;i<imgArr.length-1;i++){
// debugger
imgArr[i].style.transition='1s '+(i*0.12)+'s'
}
imgArr[4].style.transform='rotate(360deg)';
imgArr[0].style.transform='translate(0,-90px) rotate(360deg)'
imgArr[1].style.transform='translate(-45px,-80px) rotate(360deg)'
imgArr[2].style.transform='translate(-90px,-50px) rotate(360deg)'
imgArr[3].style.transform='translate(-100px,0) rotate(360deg)'
} else {
for (let i=0;i<imgArr.length-1;i++){
imgArr[i].style.transition='1s '+((imgArr.length-i-1)*0.12)+'s'
}
imgArr[4].style.transform='rotate(0deg)';
imgArr[0].style.transform='translate(0,0) rotate(0deg)'
imgArr[1].style.transform='translate(0,0) rotate(0deg)'
imgArr[2].style.transform='translate(0,0) rotate(0deg)'
imgArr[3].style.transform='translate(0,0) rotate(0deg)'
}
flag=!flag;
}
}
</script>
</body>
</html>
主要的坑有：
1.在元素首次渲染还没有完成的情况下，是不会触发过渡的
2.在绝大部分变换样式切换时，如果变化函数的位置个数类型不相同也可能不会触发过渡
3.感觉内存中变化的太快浏览器可能来不及渲染所以采用定时器，等待浏览器渲染
总结：
实现方法有很多，我这边只是一个特别笨拙的方式。
还可以通过通过修改left，top的值来实现。这样可以利用三角函数，定义函数会优雅一些。
图片来自阿里矢量图标库。
