原生js实现扇形导航以及动画的坑

最新推荐文章于 2024-02-02 10:51:36 发布

转载最新推荐文章于 2024-02-02 10:51:36 发布 · 414 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hsBK/p/10886075.html

第一次发博客，有点紧张。首先来一张效果图。

主要是实现了点击右下角的风扇按钮实现了:

导航栏的开启与关闭，中间伴随着 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的值来实现。这样可以利用三角函数，定义函数会优雅一些。
　　图片来自阿里矢量图标库。

转载于:https://www.cnblogs.com/hsBK/p/10886075.html