javascript - js如何实现托拽旋转后的惯性旋转呢?
高洛峰
高洛峰 2017-04-11 09:20:10
[JavaScript讨论组]

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



    
        
        
    
    
    
    
    
        

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(3)
PHP中文网

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

巴扎黑

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

黄舟
(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);

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号