Форум

serebann · #11 (**permalink**) 24.12.2015, 18:46

Сделал так что теперь анимация срабатывает при загрузке страницы, но не могу с генерировать число и поставить 10 секундный интервал запуска генерации числа.

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  
  <style>
  #brick {
  width: 10px;
  height: 20px;
  background: #EE6B47;
  position: relative;
  cursor: pointer;
}

#path {
  outline: 1px solid #E8C48E;
  width: 810px;
  height: 20px;
}
  
  </style>
  
  <script src="https://js.cx/libs/animate.js"></script>
</head>

<body>


  <div id="path">
    <div id="brick"></div>
  </div>

  <script>
  var sum = 500;
    function makeEaseOut(timing) {
      return function(timeFraction) {
        return 1 - timing(1 - timeFraction);
      }
    }

    function bounce(timeFraction) {
      for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
        if (timeFraction >= (7 - 4 * a) / 11) {
          return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
        }
      }
    }

    var bounceEaseOut = makeEaseOut(bounce);
if (sum > 0) {
   
      animate({
        duration: 5000,
        timing: bounceEaseOut,
        draw: function(progress) {
          brick.style.left = progress * sum + 'px';
        }
      });
    
};
  </script>


</body>

</html>

serebann · #12 (**permalink**) 24.12.2015, 18:59

C генерацией числа тоже разобрался, осталось сделать десяти секундный интервал запуска генерации числа.

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  
  <style>
  #brick {
  width: 10px;
  height: 20px;
  background: #EE6B47;
  position: relative;
  cursor: pointer;
}

#path {
  outline: 1px solid #E8C48E;
  width: 810px;
  height: 20px;
}
  
  </style>
  
  <script src="https://js.cx/libs/animate.js"></script>
</head>

<body>


  <div id="path">
    <div id="brick"></div>
  </div>

  <script>
  
  function randomInteger(min, max) {
    var rand = min - 0.5 + Math.random() * (max - min + 1)
    rand = Math.round(rand);
    return rand;
  }

var sum = ( randomInteger(1, 800) );
  
  
    function makeEaseOut(timing) {
      return function(timeFraction) {
        return 1 - timing(1 - timeFraction);
      }
    }

    function bounce(timeFraction) {
      for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
        if (timeFraction >= (7 - 4 * a) / 11) {
          return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
        }
      }
    }

    var bounceEaseOut = makeEaseOut(bounce);
if (sum > 0) {
   
      animate({
        duration: 5000,
        timing: bounceEaseOut,
        draw: function(progress) {
          brick.style.left = progress * sum + 'px';
        }
      });
    
};
  </script>


</body>

</html>

рони · #13 (**permalink**) 24.12.2015, 19:03

serebann,
медитируйте ... вместо 10000 сделано 810

<!DOCTYPE HTML>
 <html>
 <head>
 <meta charset="utf-8">
 <style>
 #brick {
 width: 10px;
 height: 20px;
 background: #EE6B47;
 position: relative;
 cursor: pointer;
 }
 #path {
 outline: 1px solid #E8C48E;
 width: 810px;
 height: 20px;
 }
 </style>
 <script>
 function animate(options) {

  var start = performance.now();

  requestAnimationFrame(function animate(time) {
    // timeFraction от 0 до 1
    var timeFraction = (time - start) / options.duration;
    if (timeFraction > 1) timeFraction = 1;

    // текущее состояние анимации
    var progress = options.timing(timeFraction)

    options.draw(progress);


      requestAnimationFrame(animate);

    if(timeFraction == 1) {
      start = performance.now();
      options.callback();
    }
  });
}
 </script>
 </head>
 <body>
 <div id="path">
 <div id="brick"></div>
 </div>
 <script>
 var sum = 400;
 function makeEaseOut(timing) {
 return function(timeFraction) {
 return 1 - timing(1 - timeFraction);
 }
 }
 function bounce(timeFraction) {
 for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
 if (timeFraction >= (7 - 4 * a) / 11) {
 return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
 }
 }
 }
 var bounceEaseOut = makeEaseOut(bounce);
 (function() {
 animate({
 duration: 5000,
 timing: bounceEaseOut,
 draw: function(progress) {
 brick.style.left = progress * sum + 'px';
 },
 callback : function() {
  sum =(810+1) * Math.random() | 0;
}

 });
 }());
 </script>

 </body>
 </html>

serebann · #14 (**permalink**) 24.12.2015, 19:08

Экрана просто не хватает на 10000, поэтому сделал 800 для форума.
Но буду генерировать 10000 и делить на 10 для анимации.

Спасибо ещё раз.

serebann · #15 (**permalink**) 24.12.2015, 19:19

Я всё же не понимаю где изменить код, чтоб после остановки анимации отсчитывалось 10 секунд и начиналось всё заново, сейчас после остановки анимации сразу начинается всё с начало а мне нужно 10 секунд на размышление)
Поискал в коде но не нашёл
Просто вы изменили мой примитивный код, и поэтому мне понятный на правильный, свой.

рони · #16 (**permalink**) 24.12.2015, 19:38

serebann,
может так вам проще будет

<!DOCTYPE HTML>
 <html>
 <head>
 <meta charset="utf-8">
 <style>
 #brick {
 width: 10px;
 height: 20px;
 background: #EE6B47;
 position: relative;
 cursor: pointer;
 }
 #path {
 outline: 1px solid #E8C48E;
 width: 810px;
 height: 20px;
 }
 </style>
 <script>
 function animate(options) {

  var start = performance.now();

  requestAnimationFrame(function animate(time) {
    // timeFraction от 0 до 1
    var timeFraction = (time - start) / options.duration;
    if (timeFraction > 1) timeFraction = 1;

    // текущее состояние анимации
    var progress = options.timing(timeFraction)

    options.draw(progress);

    if (timeFraction < 1) {
      requestAnimationFrame(animate);
    }
    if (timeFraction == 1) {
      options.callback && options.callback();
    }
  });
}
 </script>
 </head>
 <body>
 <div id="path">
 <div id="brick"></div>
 </div>
 <script>
 var sum = 400;
 function makeEaseOut(timing) {
 return function(timeFraction) {
 return 1 - timing(1 - timeFraction);
 }
 }
 function bounce(timeFraction) {
 for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
 if (timeFraction >= (7 - 4 * a) / 11) {
 return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
 }
 }
 }
 var bounceEaseOut = makeEaseOut(bounce);
 (function go() {
 animate({
 duration: 5000,
 timing: bounceEaseOut,
 draw: function(progress) {
 brick.style.left = progress * sum + 'px';
 },
 callback : function() {
 sum =(810+1) * Math.random() | 0;
 window.setTimeout(go,10000)
}

 });
 }());
 </script>

 </body>
 </html>

serebann · #17 (**permalink**) 24.12.2015, 19:45

Да так гораздо проще, я тоже пробовал использовать setTimeout но как то коряво получалось, т.е. никак.
Отлично, буду двигаться дальше.

serebann · #18 (**permalink**) 24.12.2015, 20:24

А где собственно функция генерации числа, я хочу её вывести на экран после каждой остановки анимации.
Похоже вы её иначе как то с генерировали нежели так:

function randomInteger(min, max) {
var rand = min + Math.random() * (max + 1 - min);
rand = Math.floor(rand);
return rand;
}

var sum = ( randomInteger(0, 800) );

https://learn.javascript.ru/task/random-int-min-max

рони · #19 (**permalink**) 24.12.2015, 20:25

serebann,

строка 71

serebann · #20 (**permalink**) 24.12.2015, 20:28

Не догадался переменную sum поискать))

Форум

Справочник

Discord чат

Курсы javascript