Js、JavaScript、JQuery Math sin cos,setInterval

Jquery 旋转动画插件,初始化属性(x轴y轴坐标,半径,旋转速度,定时器执行时间,旋转对象元素),Js、JQuery Math.sin(x),Math.cos(x),定时器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

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

点赞(9) 打赏

立即下载

Comment list 共有 0 条评论

暂无评论

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部