JS动画基础融合案例（走马灯、圆周运动）

woosm

于 2023-07-05 20:33:26 发布

阅读量116

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/woosm/article/details/131563052

版权

文章提供了两个HTML示例，分别展示了走马灯效果的实现和两种不同方式的圆周运动。走马灯代码通过CSS动画改变方块颜色，而圆周运动则利用JavaScript计算小球在圆形路径上的位置并更新其坐标。这些模板可用于学习和理解Web前端动态效果的创建。

摘要由CSDN通过智能技术生成

/*走马灯代码实现*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .f{
            width: 800px;
            height: 100px;
            border-top: 1px solid purple;
        }
        .f>div{
            width: 80px;
            height: 60px;
            background-color: white;
            border-radius: 50%;
            float: left;
            margin-left: 20px;
        }
        @keyframes changecolor {
            0%{
                background-color: cornflowerblue;
            }20%{
            background-color: pink;
            }40%{
            background-color: cyan;
            }60%{
            background-color: greenyellow;
            }80%{
            background-color: antiquewhite;
            }100%{
            background-color: coral;
            }

        }
        .f>div:nth-child(1){
            animation: changecolor 2s ease 0s infinite;
        }
        .f>div:nth-child(2){
            animation: changecolor 2s ease 1s infinite;
        }
        .f>div:nth-child(3){
            animation: changecolor 2s ease 2s infinite;
        }
        .f>div:nth-child(4){
            animation: changecolor 2s ease 3s infinite;
        }
        .f>div:nth-child(5){
            animation: changecolor 2s ease 4s infinite;
        }
        .f>div:nth-child(6){
            animation: changecolor 2s ease 5s infinite;
        }
        .f>div:nth-child(6){
            animation: changecolor 2s ease 6s infinite;
        }
    </style>
</head>
<body id="1">
<div class="f">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

</div>

</body>
<script>
    let body=document.getElementById(1)
    let s=``
    for(
        let i=0 ; i<10; i++
    ){
        s+=`<div class="f">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>`
    }
    body.innerHTML=s
</script>
</html>

运动学习模板

/*简单方块运动（学习模板）*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  .r1{
    width: 500px;
    height: 500px;
    border: 1px solid skyblue;
    border-radius: 50%;
      position: relative;
  }
  .r1>div{
    position: absolute;
  }
  .r2{
    width: 300px;
    height: 300px;
     border-radius:50%;
      border: 1px solid red;
      top: 100px;
      left: 100px;

  }
  .b1{
      width: 100px;
      height: 100px;
      border-radius:50%;
      border: 1px solid aqua;
      top: 200px;
      left: 0px;

  }
  .b2{
      width: 100px;
      height: 100px;
      border-radius:50%;
      border: 1px solid mediumslateblue;
      top: 200px;
      left: 100px;

  }
  .r3{
      width: 100px;
      height: 100px;
      border-radius:50%;
      border: 1px solid cornflowerblue;
      top: 200px;
      left: 200px;

  }
</style>
<body>
<div class="r1">
  <div   id="b1" class="b1"></div>
  <div class="b2"></div>
  <div class="r2"></div>
  <div class="r3"></div>
</div>
<button onclick="st1()">开始</button>

</body>
<script>
    let r=200,x0=250,y0=250;
    let b1=document.getElementById(`b1`)
    // 定义x,y表示小球球心坐标
    let x=50,y=50
    function st1(){
        // 上半圆
        let sbr=setInterval(()=>{
    x++
    y=-Math.sqrt(Math.pow(r,2)-Math.pow(x-x0,2))+y0
    b1.style.top=y-50+`px`
    b1.style.left=x-50+`px`
    if (x==450&&y==250){
        // alert(`右顶点`),取消上半
        clearInterval(sbr)
        // 下半
        let  xbr=setInterval(()=>{
            x--
            y=Math.sqrt(Math.pow(r,2)-Math.pow(x-x0,2))+y0
            b1.style.top=y-50+`px`
            b1.style.left=x-50+`px`
            // 左切点
            if (x==50&&y==250){
                clearInterval(xbr)
                str1()
            }
        })
    }
},10);
    }
</script>
</html>

圆周运动

1.弧长方式

需要嵌入二次函数，分析定位与切点（较难）

/*圆周运动（弧长方式）*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  .r1{
    width: 500px;
    height: 500px;
    border: 1px solid skyblue;
    border-radius: 50%;
      position: relative;
  }
  .r1>div{
    position: absolute;
  }
  .r2{
    width: 300px;
    height: 300px;
     border-radius:50%;
      border: 1px solid red;
      top: 100px;
      left: 100px;

  }
  .b1{
      width: 100px;
      height: 100px;
      border-radius:50%;
      border: 1px solid aqua;
      top: 200px;
      left: 0px;

  }
  .b2{
      width: 100px;
      height: 100px;
      border-radius:50%;
      border: 1px solid mediumslateblue;
      top: 200px;
      left: 100px;

  }
  .r3{
      width: 100px;
      height: 100px;
      border-radius:50%;
      border: 1px solid cornflowerblue;
      top: 200px;
      left: 200px;

  }
</style>
<body>
<div class="r1">
  <div   id="b1" class="b1"></div>
  <div class="b2"></div>
  <div class="r2"></div>
  <div class="r3"></div>
</div>
<button onclick="st1()">开始</button>

</body>
<script>
    let r=200,x0=250,y0=250;
    let b1=document.getElementById(`b1`)
    // 定义x,y表示小球球心坐标
    let x=50,y=50
    function st1(){
        // 上半圆
        let sbr=setInterval(()=>{
        x++
        y=-Math.sqrt(Math.pow(r,2)-Math.pow(x-x0,2))+y0
        b1.style.top=y-50+`px`
        b1.style.left=x-50+`px`
        if (x==450&&y==250){
        // alert(`右顶点`),取消上半
        clearInterval(sbr)
        // 下半
        let  xbr=setInterval(()=>{
        x--
        y=Math.sqrt(Math.pow(r,2)-Math.pow(x-x0,2))+y0
        b1.style.top=y-50+`px`
        b1.style.left=x-50+`px`
        // 左切点
        if (x==50&&y==250){
        clearInterval(xbr)
        str1()
        }
     })
   }
 },10);
}
</script>
</html>
/*最外圈的圆做圆周运动*/

2.角度方式

嵌入三角函数

/*角度方式*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆周运动2</title>
    <style>
        .r1{
            width: 500px;
            height: 500px;
            border: 1px solid red;
            border-radius: 50%;
        }
        .r1>div{
            position: absolute;
        }
        .r2{
            width: 300px;
            height: 300px;
            border: 1px solid green;
            border-radius: 50%;
            top: 100px;
            left: 100px;
        }
        .b1{
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 50%;
            top: 200px;
            left: 0px;
        }
        .b2{
            width: 100px;
            height: 100px;
            background-color: pink;
            border-radius: 50%;
            top: 200px;
            left: 100px;
        }
        .r3{
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            border-radius: 50%;
            top: 200px;
            left: 200px;
        }
    </style>
</head>
<body>
    <div class="r1">
        <div id="b1" class="b1"></div>
        <div id="b2" class="b2"></div>
        <div class="r2"></div>
        <div class="r3"></div>
    </div>
    <button onclick="start1(),start2()">开始</button>
</body>
<script>
    let r1=200,x0=250,y0=250,r2=100;
    let b1=document.getElementById('b1')
    let b2=document.getElementById('b2')
    let x=0,y=0;
    function start1(){
        setInterval(() =>{
            x++
            radian= x*Math.PI/180;
            b1.style.top=y0-50+r1*Math.sin(radian)+'px'
            b1.style.left=x0-50+r1*Math.cos(radian)+'px'
        },20)
    }
    function start2(){
        setInterval(() =>{
            y++
            radian= x*Math.PI/180;
            b2.style.top=y0-50+r2*Math.sin(radian)+'px'
            b2.style.left=x0-50+r2*Math.cos(radian)+'px'
        },20)
    }
</script>
</html>