HTML5实现简单圆周运动示例

一、使用JS实现圆周运动

根据指定圆心、半径，在定时器中移动固定的弧度，重绘圆圈的位置

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .circle{
        width:20px;
        height:20px;
        background:blue;
        border-radius:50%;
        position: absolute;
    }
    .rectangle{
        width:300px;
        height:300px;
        border:1px solid red;
        position: relative;
    }
    </style>
</head>
<body>
    
    <div class="rectangle">
        <div class="circle"></div>
    </div>

    <script src="../Js/jquery-1.11.3.min.js"></script>
    <script>
        (function(){
            //圆周运动js实现
            var circle=$('.circle');
            var rect=$('.rectangle');
            //获取半径和圆心
            var centerX=(rect.width()-circle.width())/2;
            var centerY=(rect.height()-circle.height())/2;
            var radius=centerX;
            //时间递进
            var times=0;
            //重绘位置
            function reset(){
                times+=1;
                var hudu=(2*Math.PI/360)*times;
                //console.info(hudu);
                var x=centerX+Math.sin(hudu)*radius;
                var y=centerY+Math.cos(hudu)*radius;
               
                circle.css({
                    left:x,
                    top:y
                });
                //调用自己
               requestAnimationFrame(reset);
            }
            //启动定时器
            requestAnimationFrame(reset);
        })();
    </script>
</body>
</html>

逆时针旋转效果：

二、使用CSS实现圆周运动

使用transform的rotate方法实现旋转，需要重点设置一下圆心位置

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    @keyframes run{
        from{
          transform:rotate(0deg);
        }
        to{
           transform:rotate(360deg);
        }
    }
    .circle{
        width:20px;
        height:20px;
        background:blue;
        border-radius:50%;
        position: absolute;
        transform-origin:110px 110px;
        animation:run 5s linear infinite; 
        left:40px;
        top:40px;
    }
    .rectangle{
        width:300px;
        height:300px;
        border:1px solid red;
        position: relative;
    }
    </style>
</head>
<body>
    <div class="rectangle">
        <div class="circle"></div>
    </div>
</body>
</html>