js如何实现托拽旋转后的惯性旋转呢？

发布于
2016-04-15

现在已经实现了拖拽旋转，如何实现松开鼠标后，有一个惯性的自转？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        .box{
            width:200px;
            height: 200px;
            background: #ccc;
            margin: 150px auto;
            /*position: relative;*/
        }
        .box:hover{
            /*border: 2px solid #000;*/
        }
        .yuan{
            position: absolute;
            height: 20px;
            width: 20px;
            background: #000;
            left: 0;
            right: 0;
            margin: auto;
            top: -40px;
            -moz-border-radius: 50%;
            border-radius: 50%;
            cursor:url(http://assets.rrxiu.net/www/images/mouserotate.ico) ,default;
            position: relative;
        }
        
        .yuan span{
            display: block;width:3px;height: 20px;background: #000;position: relative;left: 45%;top:20px
        }
        
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    
    <body>
        <div class="box">
            <div class="yuan"><span></span></div>
            <div class="xz"></div>
        </div>
        <script>                
                (function($){
                    $.fn.RotateH=function(options){
                        var defaults={
                            trigger:document,           //拖动按钮 默认 整个文档
                            centerX:0,                      //圆心点x 默认 对象中心x
                            centerY:0,                      //圆心点y 默认 对象中心y
                            //inertia:true, 惯性旋转 开发中
                            debug:false
                        },_this=this;
                        var ops=$.extend(defaults,options);
                        
                        //初始化
                        function Init(){
                            //初始化圆心点
                            if(ops.centerX==0 && ops.centerY==0){
                                ops.centerX=_this.offset().left+_this.width()/2;
                                ops.centerY=_this.offset().top+_this.height()/2
                            }
                            $(ops.trigger).bind("mousedown",function(){
                                $(document).bind("mousemove",movehandle);
                            });
                            $(document).mouseup(function(event) {
                                $(document).unbind("mousemove");
                                if(ops.inertia)inertiaShow();
                            });
                        }
                        //鼠标移动时处理事件
                        function movehandle(event){
                                event=event || window.event;
                                var dis = angle(ops.centerX,ops.centerY,event.clientX, event.clientY);
                                if(ops.debug)
                                    console.log(ops.centerX+"-"+ops.centerY+"|"+event.clientX+"-"+event.clientY+" "+dis);
                                rotate(dis);
                        }
                        //计算两点的线在页面中的角度
                        function angle(centerx, centery, endx, endy) {
                            var diff_x = endx - centerx,
                                diff_y = endy - centery;
                            var c=360 * Math.atan2(diff_y , diff_x) / (2 * Math.PI);
                                c=c<=-90?(360+c):c;
                                return c+90;
                        }
                        //惯性旋转
                        function inertiaShow(angle){
                            
                        }
                        //设置角度
                        function rotate(angle,step){
                            $(_this).css("transform", "rotateZ(" + angle + "deg)");
                        }
                        Init();
                    };
                })(jQuery);
                $(".box").RotateH({trigger:$(".yuan"),debug:true});
        </script>
    </body>
</html>

javascript

html5 css3 jquery 拖拽

阅读 5.8k

4 个回答

得票最新

littlelyon

7.9k3927

发布于
2016-04-15

✓ 已被采纳

http://jsbin.com/viyapadaqu/edit?html,cs...
这个意思吗？不考虑运动的速度曲线。

张小猪粉鼻子

2.9k2512

发布于
2016-04-15

松开鼠标的时候有个角速度吧，那么负的加速度直到停下咯。至于时间曲线是linear，easing什么的可根据需求自由控制。

lloyd_zhou

1.7k129

发布于
2016-04-16

除了那几个固定的缓动函数，其实你可以直接使用贝泽尔曲线。

盲选C

15116

发布于
2016-11-14

(function($) {
    $.fn.RotateH = function(options) {
        var defaults = {
                trigger: document, //拖动按钮 默认 整个文档
                centerX: 0, //圆心点x 默认 对象中心x
                centerY: 0, //圆心点y 默认 对象中心y
                inertia: true, //惯性旋转
                debug: false
            },
            _this = this;
        var ops = $.extend(defaults, options);
        var cur_angle = 0,
            start_angle = 0,
            temp_angle = 0,
            temp_timer_1 = 0,
            temp_timer_2 = 0,
            temp_angle_1 = 0,
            temp_angle_2 = 0;
        var is_interval;
        //初始化
        function Init() {
            //初始化圆心点
            if(ops.centerX == 0 && ops.centerY == 0) {
                ops.centerX = _this.offset().left + _this.width() / 2;
                ops.centerY = _this.offset().top + _this.height() / 2
            }
            $(document).on("touchstart", ops.trigger, function(event) {
                clearInterval(is_interval);
                event = event || window.event;
                var mx = event.originalEvent.touches[0].clientX,
                    my = event.originalEvent.touches[0].clientY;
                start_angle = angle(ops.centerX, ops.centerY, mx, my);
            });
            $(document).on("touchmove", ops.trigger, movehandle);
            $(document).on("touchend", ops.trigger, function(event) {
                cur_angle = temp_angle;
                if(ops.inertia) inertiaShow();
            });
        }
        //鼠标移动时处理事件
        function movehandle(event) {
            event = event || window.event;
            event.preventDefault();
            var mx = event.originalEvent.touches[0].clientX,
                my = event.originalEvent.touches[0].clientY;
            var dis = cur_angle + angle(ops.centerX, ops.centerY, mx, my) - start_angle;
            temp_timer_1 = temp_timer_2;
            temp_timer_2 = new Date().getTime();
            temp_angle_1 = temp_angle;
            temp_angle = dis;
            temp_angle_2 = temp_angle;
            rotate(dis);
        }
        //计算两点的线在页面中的角度
        function angle(centerx, centery, endx, endy) {
            var diff_x = endx - centerx,
                diff_y = endy - centery;
            var c = 360 * Math.atan2(diff_y, diff_x) / (2 * Math.PI);
            c = c <= -90 ? (360 + c) : c;
            return c + 90;
        }
        //惯性旋转
        function inertiaShow(angle) {
            var i = 10;
            var avr = (temp_angle_2 - temp_angle_1) / (temp_timer_2 - temp_timer_1) * i;
            if(avr > 0) {
                is_interval = setInterval(function() {
                    avr -= 0.2;
                    cur_angle += avr;
                    rotate(cur_angle);
                    if(avr < 0) {
                        clearInterval(is_interval);
                    }
                }, i);
            } else if(avr < 0) {
                is_interval = setInterval(function() {
                    avr += 0.2;
                    cur_angle += avr;
                    rotate(cur_angle);
                    if(avr > 0) {
                        clearInterval(is_interval);
                    }
                }, i);
            }
        }
        //设置角度
        function rotate(angle, step) {
            $(_this).css("transform", "rotate(" + angle + "deg)");
            $(_this).find(".menu_inner a img").css("transform", "rotate(" + -angle + "deg)");
        }
        $(window).load(function() {
            Init();
        });
    };
})(jQuery);

偷偷拿来用了一下，改了点东西，做成了手机版，凑活凑活能用

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

js如何实现托拽旋转后的惯性旋转呢？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

H5页面点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？

js如何实现托拽旋转后的惯性旋转呢？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

H5页面 点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？

H5页面点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？