Js、JavaScript、JQuery Math sin cos，setInterval

应用介绍

Jquery 旋转动画插件，初始化属性（x轴y轴坐标，半径，旋转速度，定时器执行时间，旋转对象元素），Js、JQuery Math.sin(x)，Math.cos(x)，定时器setInterval的运用；

(function($){
    $(function(){
        $('#roate1').Roate({
            R:193,//半径
            cx:296,//初始化坐标x
            cy:274,//初始化坐标y
            step:1,//旋转速度 数值越大旋转越快
            delay:50//定时器时间
        });
        $('#roate2').Roate({
            R:205,//半径
            R0:81,//y方向半径
            cx:302,//初始化坐标x
            cy:519,//初始化坐标y
            direction:false,//方向
            step:1,//旋转速度 数值越大旋转越快
            delay:50//定时器时间
        });
        initType('9904');
    })  
    $.fn.Roate=function(opts){
        var roateInter=null;
        var $this =this;
        opts = $.extend({
            R:100,
            R0:0,
            cx:0,
            cy:0,
            step:5,
            delay:100,
            direction:true,//方向
            roateItem:'.roate-item'//运动对象
        },opts||{});

        var width = $this.width();
        var height = $this.height();
        if(!opts.cx){
            opts.cx=width/2;
        }
        if(!opts.cy){
            opts.cy=height/2;
        }
        var $item = $this.find(opts.roateItem);
        var size = $item.size();
        var roate=0;
        opts.R0 = opts.R0==0?opts.R:opts.R0;
        roateInter=setInterval(function(){
            for (var i = 0; i < size; i++) {
                var left = opts.cx+opts.R*Math.sin(Math.PI/180*(roate+360*i/size));
                var top = opts.cy+opts.R0*Math.cos(Math.PI/180*(roate+360*i/size));
                var $roate = $item.eq(i);
                var rheight = $roate.height()/2;
                var rwidth = $roate.width()/2;
                $roate.css({
                    left: left-rheight,
                    top: top-rwidth,
                    display:'block'
                });
            };
            if(opts.direction){
                roate -= opts.step;
            }else{
                roate += opts.step;
            }
        }, opts.delay);
        this.parent().mousemove(function(event) {
            if(event.offsetX<width/2){
                opts.direction=false;
            }else{
                opts.direction=true;
            }
        });

    };
    window.initType = function(typeCode){
        $('.roate-container').addClass('type'+typeCode);
    }

})(jQuery)

相关知识点：

Math.PI中的PI是什么？

PI就是指圆周率中的π，PI就是指弧度制中的的π，其实就是180°

所以，Math.PI = 3.14 = 180°，PI 是一个浮小数

var left = opts.cx + opts.R * Math.sin(Math.PI / 180 * (roate+360 * i / size))

var top = opts.cy + opts.R0 * Math.cos(Math.PI / 180 * (roate+360 * i / size))

Math.sin(x)     x 的正玄值，返回值在 -1.0 到 1.0 之间的数

Math.cos(x)    x 的余弦值，返回的是 -1.0 到 1.0 之间的数

opts.cx 圆心x轴坐标数值，y轴类似；

分别是什么意思？

Math.PI / 180 表示角度平分为 1°（弧度）

 (roate+360 * i / size) 就是偏移角度

当前X轴坐标 = 圆心x轴坐标数值 + 圆半径 * Math.sin(Math.PI / 180 * (roate + 360 * i / size)) 的正玄值

顶点到与中心连线之间的夹角α =（2π）/ n = Math.PI / n * 2

相间的两个顶点到与中心连线之间的夹角β = 2α = 4π/n = Math.PI / n * 4

弧度和角度换算

1弧度 = 180 / π 度

1度 = π / 180 弧度

也就是说，180度 = π 弧度

定时器

定时器执行一次，for 循环执行一次，$item.eq(i)对象度数加1或减1(如下) ，left，top各自变动一次，所以出现了$item.eq(i)各自的圆形运动轨迹。

roateInter=setInterval(function(){

*******

}, opts.delay);

代码中删除：

$('#roate2').Roate({
    R:205,//半径
    R0:81,//y方向半径
    cx:302,//初始化坐标x
    cy:519,//初始化坐标y
    direction:false,//方向
    step:1,//旋转速度 数值越大旋转越快
    delay:50//定时器时间
});

for循环中输出：console.log(roate+360*i/size)；

i = 0

0
22.5
45
67.5
90
112.5
135
157.5
180
202.5
225
247.5
270
292.5
315
337.5

i=1

-1
21.5
44
66.5
89
111.5
134
156.5
179
201.5
224
246.5
269
291.5
314
336.5

i=2

............