jquery.crop.js android6,引用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的角度