Как изменить скорость спрайта с помощью слайдера, используя jquery или javascript

Question

Как изменить скорость спрайта с помощью слайдера, используя jquery или javascript

Мое требование состоит из следующих шагов:

Там будет ползунок шага, который имеет три шага управления (медленный, нормальный и быстрый).
Медленно: 1/2 скорости.
Нормальный: скорость X
Быстро: 2X скорость.
Используя эти элементы управления пользователь может изменять скорость анимации.
Скорость по умолчанию будет нормальной.

Можете ли вы помочь мне в этой проблеме?

-1

javascript jquery animation sprite jquery-ui-slider

Источник

user6498614 11 янв '17 в 11:03

1 ответ

Другие вопросы по тегам javascript jquery animation sprite jquery-ui-slider

user6498614 11 янв '17 в 11:08 2017-01-11 11:08 · Answer 1 · 2017-01-11 11:08

Я получил свое решение здесь код.

вот файл 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>

Вот ксс

.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; }
}