开发者社区> 问答> 正文

请问手机端如何用js来控制animation的duration时间?

a123456678 2016-03-12 09:34:38 1104

描述:想用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)
  • a123456678
    2019-07-17 19:00:07

    说实话,html5通过div的方式,不适合用来开发有些(只适合一些简单动画,通常是展示类的,非交互类的),更何况你这是在移动端,那更不用说了。
    一是渲染的影响,二是单进程的限制,这两个限制采用这种方式是突破不了的。

    如果你真要这么做,可以了解下这个:requestAnimationFrame。

    游戏类的,还是推荐canvas+opengl的方式,虽然也不是很理想,但是肯定比用div来贴效果好很多,一些游戏引擎结合canvas做得还不错,也可以去了解下。

    0 0

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程