简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
手机h5页面转盘抽奖 转动过程中卡顿
高洛峰
高洛峰 2016-11-19 13:30:52
0
5
2003

现在想做一个抽奖转盘的游戏，想通过设置角度，然后让图片指针旋转，但是现在想让其转五秒四圈，但是会出现卡顿，大家有没有什么好的方法，或者针对这种转盘有什么见解。我现在用的是一个jQueryRotate.js的插件实现指针的转动，现在感觉是因为角度变化太快手机反应不过来，看上去是卡顿。麻烦大家给点意见，谢谢。


高洛峰
高洛峰

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

모든 응답(5)
三叔
三叔2016-11-19 13:32:37 5층

你可以试着在需要加动画的元素上启用gpu加速，做法就是给它加上这样一个类：

.accelerated {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

这样浏览器就会触发gpu加速机制。

좋다 +0
답글 추가
学霸
学霸2016-11-19 13:32:18 4층

移动端推荐使用canvas或者CSS3旋转实现，可以适当开启GPU加速

좋다 +0
답글 추가
三叔
三叔2016-11-19 13:32:10 3층

可以考虑用canvas来实现

좋다 +0
답글 추가
学霸
学霸2016-11-19 13:32:04 2층

转盘的交互性很低、可以用canvas实现性能会更好些、最好不要一直跑动画
通常只需要中间的按钮做个点击、后面的根据算法自己转就完了
推荐用canvas，很简单

좋다 +0
답글 추가
三叔
三叔2016-11-19 13:31:51 1층

**首先，JQuery库对于手机来说很大，换zeptojs比较好。其次，JQuery的animate()方法对于非高配手机运行会有负担，用CSS3替代实现会更快，而且如果你对CSS3有深入理解还可以使用GPU加速(没深入理解一般不使用,会起反效果),会更加快.**



좋다 +0
답글 추가
인기 주제
더>
인기 기사
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！