引用jqueryrotate.js 安卓机卡顿并有反转现象的问题

jqueryrotate.png

jqueryrotate => 传送门，它可以实现旋转效果，使用简单。jqueryrotate 支持所有主流浏览器，包括 IE6，所以很适合拿来写大转盘抽奖等功能。

基本使用方法 => 传送门

使用代码：

    //旋转转盘 item:奖品位置
    const rotateFn = function (item) {
        //旋转停止角度，这里设置的是45°
        var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length * 2));
        if (angles < 270) {
            angles = 270 - angles;
        } else {
            angles = 360 - angles + 270;
        }
        
            $('#wheelcanvas').stopRotate(); //停止旋转
            $('#wheelcanvas').rotate({
                angle: 0,
                animateTo: angles + 2160,  //旋转6圈停止
                duration: 5000,  //旋转5秒时间
                callback: function () {
                    turnplate.bRotate = !turnplate.bRotate;
                    if (!Array.indexOf) {
                        Array.prototype.indexOf = function (obj) {
                            for (var i = 0; i < this.length; i++) {
                                if (this[i] == obj) {
                                    return i;
                                }
                            }
                            return -1;
                        }
                    }
                }
            });
    };

问题：

旋转方法正常触发，在ios微信浏览器上旋转效果正常，但是在部分安卓机微信浏览器上有卡顿，并偶尔会反转。

解决过程：

1.怀疑手机性能问题

解决方法：通过transform开启手机硬件加速，可以稍微解决卡顿问题，但是效果不佳，反转问题还是存在，并且开启硬件加速增加了手机的电量消耗 -----排除

//要旋转的元素添加
#wheelcanvas{  
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-perspective: 1000;                //3D元素距视图的距离，解决开启GPU硬件加速部分Android出现闪烁的bug
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
}

2.怀疑设置的旋转初始角度angle: 0的问题

查阅了很多使用jqueryrotate做大转盘的，每个设置的差不多，不是90°就是0°，并且把一些网上的demo放在自己的手机也没出现这样的问题 -----排除

3.引入的jqueryrotate.js问题

自己引入的js文件是去年就下载的，没有版本说明，不知道是不是版本引起的，所以重新下载了一份2.3版本的放上去，反转问题依然存在 -----排除

4.用css替代js实现动画效果

用css做动画效果，不进可以保证兼容性，而且对手机性能也有保证 -----解决
替换代码：

$('#wheelcanvas').css({
                transform:'rotate('+ anglesAll +'deg)',
                transition: 'All 5s ease',
                '-webkit-transition': 'All 5s ease'
            })

            setTimeout(function(){
                turnplate.bRotate = !turnplate.bRotate;
                if (!Array.indexOf) {
                    Array.prototype.indexOf = function (obj) {
                        for (var i = 0; i < this.length; i++) {
                            if (this[i] == obj) {
                                return i;
                            }
                        }
                        return -1;
                    }
                }
                
                $('#wheelcanvas').css({
                    transform:'rotate('+ angles +'deg)',
                    transition: 'All .1s',
                    '-webkit-transition': 'All .1s'
                })
            },5100)

注意：

底部设置的

 $('#wheelcanvas').css({
       transform:'rotate('+ angles +'deg)',
       transition: 'All .1s',
       '-webkit-transition': 'All .1s'
})

是因为第一次点击的时候，transform会记住设置的角度，当第二次点击时，如果得到的旋转角度是一样的，那么转盘是不会动的，所有要在转盘停止的时候重置transform的角度

最后编辑于：2019.01.15 11:18:17