如何使用 jquery 或 javascript 更改带有滑块的精灵的速度答案

【问题标题】：How to change the speed of sprite with slider using jquery or javascript如何使用 jquery 或 javascript 更改带有滑块的精灵的速度
【发布时间】：2017-01-11 11:03:44
【问题描述】：

我的要求有以下步骤：

会有一个步进滑块，它具有三个控制步骤（慢、正常和快）。
慢速：½ X 速度。
正常：X 速度。
快速：2 倍速度。
使用这些控件，用户可以更改动画的速度。
默认速度为正常。

你能帮我解决这个问题吗？

【问题讨论】：

标签： javascript jquery animation sprite jquery-ui-slider

【解决方案1】：

我的解决方案是代码。

这里是js文件

$( function() {
    $( "#slider-range-max" ).slider({
      min:0.75,
     max:3,
     value:1.5,
     slide:function(event,ui){
         console.log(ui.value);
         if(ui.value=="0.75"){
             console.log("min");
             slow();

         }else if(ui.value=="2.75"){
             console.log("max");
             fast();
         }else{
             console.log("nor");
             normal();
         }
    }
    });
    function slow(dur) {
                document.getElementById("adam").style.animation="walk-east 3s steps(8) infinite";
            }
    function fast(dur) {
        document.getElementById("adam").style.animation="walk-east 0.75s steps(8) infinite";
    }
    function normal() {
        document.getElementById("adam").style.animation="walk-east 1.5s steps(8) infinite";
    }
    normal();
  });

这里是html文件

<html>
    <head>
        <title>Motion Filter</title>
          <link href="css/style.css" rel="stylesheet" />
          <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
          <link rel="stylesheet" href="/resources/demos/style.css">
          <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
          <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!--          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>-->        
    </head>
    <body>        
        <div id="animation-containter">
            <div id="adam"></div>
        </div>
        <div id="slider-range-max"></div>
    </body>
     <script src="js/comp.js" type="text/javascript"></script>
</html>

这里是css

.ui-slider-horizontal {
    height: .8em;
    width: 22em;
    margin: 10px;
}
#animation-containter{
    margin: 10px;
    height: 120px;
    background: pink;
    width: 800px;
    border: 2px solid brown;
    padding: 5px;
}
#adam{
    background: url("../assets/images/man.png");
    height: 105px;
    width: 56px;
/*    animation: walk-east 2.0s steps(8) infinite;*/
}
@keyframes walk-east{
    from{ background-position: 0px; }
    to{ background-position: -488px; }
}

【讨论】：