请问手机端如何用js来控制animation的duration时间？
描述：想用js来控制动画的播放速度。默认动画一直在执行，但是如果点击的话，根据点击次数的增加，动画的速度逐渐增加。
问题：在浏览器模拟器上动画可以增加，可是在手机上用js设置的时间不起作用。直接设置动画时间，或者设置动画名称和动画时间都不起作用。修改classname也不起作用
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=640,user-scalable=no, target-densitydpi=device-dpi" />
<style>
html, body, p, h1, h2, h3, h4, h5, h6, dl, ul, ol, li, dt, dd,figure,figcaption{ margin: 0; padding: 0; }
html,body{height: 100%;}
body {-webkit-tap-highlight-color:rgba(0,0,0,0);background-color:#fff;color:#333; font:26px/1.5 "Microsoft YaHei",Arial; -webkit-text-size-adjust: none;}
ul, ol, li { list-style-type: none; }
em, i { font-style: normal; }
a{ color: #000;text-decoration: none; }
a img { border: 0 none; }
img{display:block;}
table { border-collapse:collapse; border-spacing:0; }
th,td { padding: 0; }
.clearfix:after { content: ""; display: block; height: 0; overflow: hidden; clear: both; visibility: hidden; }
#gamebox{width:100%;height:100%;position:absolute;left:0;top:0;background:#2f8116;}
.road{position:relative;margin:160px 0 0 80px;width:493px;height:463px;background:#b47e02;}
.miner{position:absolute; left:350px; top:-180px; width:175px;height:200px; background:#c00;}
.spade{position:absolute; left:0;top:110px;width:60px;height:99px;background:#333;}
.downtime{position:absolute;left:60px;top:312px;width:170px;height:80px;background:#f9ce45;font-size:40px;color:#BC730C;text-align:center;line-height:80px;}
.cowrys{position:absolute;left:60px;top:202px;width:330px;height:90px;}
.cowry{float:right;width:100px;height:90px;margin-left:10px;}
.cowry1{background:#dcdddf;}
.cowry2{background:#fddc00;}
.cowry3{background:#741809;}
.mineral{position:absolute;}
.mineral1{left:482px;top:482px;width:57px;height:44px;background:#666;}
.mineral2{left:360px;top:517px;width:60px;height:60px;background:#777;}
.mineral3{width:93px;height:49px;background:#888;}
.spade{-webkit-animation:spade-ani .4s infinite;}
.gamebox1 .miner{-webkit-animation:miner-ani linear 15s forwards;}
.gamebox1 .cowry1{-webkit-animation:cowry1-ani linear 1s 1s both;}
.gamebox1 .cowry2{-webkit-animation:cowry2-ani linear 1s 4.8s both;}
.gamebox1 .cowry3{-webkit-animation:cowry3-ani linear 1s 8.5s both;}
.gamebox1 .mineral1{-webkit-animation:mineral-ani 1s 3.5s both;}
.gamebox1 .mineral2{-webkit-animation:mineral-ani 1s 6s both;}
.gamebox1 .mineral3{left:112px;top:529px;}
.gamebox1 .mineral3{-webkit-animation:mineral-ani 1s 12s both;}
@-webkit-keyframes spade-ani{
0%{-webkit-transform:translate(0,0);}
50%{-webkit-transform:translate(5px,5px);}
100%{-webkit-transform:translate(0,0);}
}
@-webkit-keyframes miner-ani{
0%{-webkit-transform:translate(0,0);}
20%{-webkit-transform:translate(0,180px);}
30%{-webkit-transform:translate(0,230px);}
80%{-webkit-transform:translate(-386px,230px);}
100%{-webkit-transform:translate(-386px,370px);}
}
@-webkit-keyframes cowry1-ani{
0%{opacity:0; -webkit-transform:translate(180px,170px) scale(0);}
50%{opacity:0.5; -webkit-transform:translate(180px,170px) scale(1.2);}
100%{opacity:1; -webkit-transform:translate(0,0) scale(1);}
}
@-webkit-keyframes cowry2-ani{
0%{opacity:0; -webkit-transform:translate(200px,306px) scale(0);}
50%{opacity:0.5; -webkit-transform:translate(200px,306px) scale(1.2);}
100%{opacity:1; -webkit-transform:translate(0,0) scale(1);}
}
@-webkit-keyframes cowry3-ani{
0%{opacity:0; -webkit-transform:translate(142px,306px) scale(0);}
50%{opacity:0.5; -webkit-transform:translate(142px,306px) scale(1.2);}
100%{opacity:1; -webkit-transform:translate(0,0) scale(1);}
}
@-webkit-keyframes mineral-ani{
0%{opacity:0; -webkit-transform:translate(0,0) scale(0);}
50%{opacity:1; -webkit-transform:translate(80px,80px) scale(1.2);}
100%{opacity:0; -webkit-transform:translate(80px,80px);}
}
</style>
</head>
<body>
<div id="gamebox" class="gamebox1">
<div class="road">
<div class="miner">
<div class="spade">矿工</div>
</div>
</div>
<div class="cowrys clearfix">
<div class="cowry cowry1">宝箱1</div>
<div class="cowry cowry2">宝箱2</div>
<div class="cowry cowry3">宝箱3</div>
</div>
<div id="downtime" class="downtime"><span id="timenum" class="s15">15s</span></div>
<div class="mineral mineral1">矿石1</div>
<div class="mineral mineral2">矿石2</div>
<div class="mineral mineral3">矿石3</div>
</div>
<script>
var dig = 0; //滑动次数
var down = 0;
var sec=15;
var timer;
gamebox.addEventListener('click', function (e){
dig++;console.log(dig)
if(dig==10){
document.querySelector('.miner').style.webkitAnimationDuration = '14s';
}
if(dig==20){
document.querySelector('.miner').style.webkitAnimationDuration = '13s';
}
if(dig==30){
document.querySelector('.miner').style.webkitAnimationDuration = '12s';
}
if(dig==40){
document.querySelector('.miner').style.webkitAnimationDuration = '11s';
}
if(dig==50){
document.querySelector('.miner').style.webkitAnimationDuration = '10s';
console.log('点了50下，到终点了')
return false;
}
})
timedown()
function timedown(){
if(sec==0){
clearTimeout(timer);
timenum.innerHTML = '0S';
timenum.className = 's0';
console.log('点了50下，到终点了')
return false;
}else{
timenum.innerHTML = sec--+'S';
timer = setTimeout(function(){
timedown();
},1000)
}
}
</script>
</body>
</html>
展开
收起
1
条回答
写回答
写回答
-
说实话，html5通过div的方式，不适合用来开发有些(只适合一些简单动画，通常是展示类的，非交互类的)，更何况你这是在移动端，那更不用说了。
一是渲染的影响，二是单进程的限制，这两个限制采用这种方式是突破不了的。如果你真要这么做，可以了解下这个：requestAnimationFrame。
游戏类的，还是推荐canvas+opengl的方式，虽然也不是很理想，但是肯定比用div来贴效果好很多，一些游戏引擎结合canvas做得还不错，也可以去了解下。
2019-07-17 19:00:07赞同 展开评论 打赏
问答分类：
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
