20 Ð»ÑŽÑ‚Ð¾Ð³Ð¾ 2024 Ñ€.

JavaScript-Ð°Ð½Ñ–Ð¼Ð°Ñ†Ñ–Ñ—

JavaScript-Ð°Ð½Ñ–Ð¼Ð°Ñ†Ñ–Ñ— Ð¼Ð¾Ð¶ÑƒÑ‚ÑŒ Ñ€Ð¾Ð±Ð¸Ñ‚Ð¸ Ñ‚Ðµ, Ñ‰Ð¾ Ð½Ðµ Ð¿Ñ–Ð´ ÑÐ¸Ð»Ñƒ CSS.

ÐÐ°Ð¿Ñ€Ð¸ÐºÐ»Ð°Ð´, Ñ€ÑƒÑ…Ð°Ñ‚Ð¸ Ñ‰Ð¾ÑÑŒ Ð¿Ð¾ ÑÐºÐ»Ð°Ð´Ð½Ñ–Ð¹ Ñ‚Ñ€Ð°Ñ”ÐºÑ‚Ð¾Ñ€Ñ–Ñ— Ð· Ñ„ÑƒÐ½ÐºÑ†Ñ–Ñ”ÑŽ Ñ‡Ð°ÑÑƒ, Ð²Ñ–Ð´Ð¼Ñ–Ð½Ð½Ð¾ÑŽ Ð²Ñ–Ð´ ÐºÑ€Ð¸Ð²Ð¸Ñ… Ð‘ÐµÐ·ÑŒÑ”, Ð°Ð±Ð¾ ÑÑ‚Ð²Ð¾Ñ€ÑŽÐ²Ð°Ñ‚Ð¸ Ð°Ð½Ñ–Ð¼Ð°Ñ†Ñ–ÑŽ Ð² ÐµÐ»ÐµÐ¼ÐµÐ½Ñ‚Ñ– canvas.

Ð’Ð¸ÐºÐ¾Ñ€Ð¸ÑÑ‚Ð°Ð½Ð½Ñ setInterval

          let timer = setInterval(function() {
  if (animation complete) clearInterval(timer);
  else increase style.left by 2px
}, 20); // Ð·Ð¼Ñ–Ð½ÑŽÑ”Ñ‚ÑŒÑÑ Ð½Ð° 2 Ð¿Ñ–ÐºÑÐµÐ»Ñ– ÐºÐ¾Ð¶Ð½Ñ– 20 Ð¼Ñ, Ñ‰Ð¾ Ð¿Ñ€Ð¸Ð±Ð»Ð¸Ð·Ð½Ð¾ 50 ÐºÐ°Ð´Ñ€Ñ–Ð² Ð½Ð° ÑÐµÐºÑƒÐ½Ð´Ñƒ
        

          let start = Date.now(); // Ð·Ð±ÐµÑ€Ñ–Ð³Ð°Ñ”Ð¼Ð¾ Ñ‡Ð°Ñ Ð¿Ð¾Ñ‡Ð°Ñ‚ÐºÑƒ

let timer = setInterval(function() {
  // ÑÐºÑ–Ð»ÑŒÐºÐ¸ Ñ‡Ð°ÑÑƒ Ð¿Ñ€Ð¾Ð¹ÑˆÐ»Ð¾ Ð²Ñ–Ð´ Ð¿Ð¾Ñ‡Ð°Ñ‚ÐºÑƒ?
  let timePassed = Date.now() - start;

  if (timePassed >= 2000) {
    clearInterval(timer); // Ð·Ð°Ð²ÐµÑ€ÑˆÑƒÑ”Ð¼Ð¾ Ð°Ð½Ñ–Ð¼Ð°Ñ†Ñ–ÑŽ Ñ‡ÐµÑ€ÐµÐ· 2 ÑÐµÐºÑƒÐ½Ð´Ð¸
    return;
  }

  // Ð¼Ð°Ð»ÑŽÑ”Ð¼Ð¾ Ð°Ð½Ñ–Ð¼Ð°Ñ†Ñ–ÑŽ Ð² Ð¼Ð¾Ð¼ÐµÐ½Ñ‚ Ñ‡Ð°ÑÑƒ timePassed
  draw(timePassed);

}, 20);

// ÐºÐ¾Ð»Ð¸ timePassed Ð·Ð¼Ñ–Ð½ÑŽÑ”Ñ‚ÑŒÑÑ Ð²Ñ–Ð´ 0 Ð´Ð¾ 2000
// left Ð¾Ñ‚Ñ€Ð¸Ð¼ÑƒÑ” Ð·Ð½Ð°Ñ‡ÐµÐ½Ð½Ñ Ð²Ñ–Ð´ 0px Ð´Ð¾ 400px
function draw(timePassed) {
  train.style.left = timePassed / 5 + 'px';
}
        

Ð ÐµÐ·ÑƒÐ»ÑŒÑ‚Ð°Ñ‚

index.html

<!DOCTYPE HTML>
<html>

<head>
  <style>
    #train {
      position: relative;
      cursor: pointer;
    }
  </style>
</head>

<body>

  <img id="train" src="https://js.cx/clipart/train.gif">


  <script>
    train.onclick = function() {
      let start = Date.now();

      let timer = setInterval(function() {
        let timePassed = Date.now() - start;

        train.style.left = timePassed / 5 + 'px';

        if (timePassed > 2000) clearInterval(timer);

      }, 20);
    }
  </script>


</body>

</html>

Ð’Ð¸ÐºÐ¾Ñ€Ð¸ÑÑ‚Ð°Ð½Ð½Ñ requestAnimationFrame

Ð†Ð½ÑˆÐ¸Ð¼Ð¸ ÑÐ»Ð¾Ð²Ð°Ð¼Ð¸, Ñ†Ðµ:

          setInterval(function() {
  animate1();
  animate2();
  animate3();
}, 20)
        

          setInterval(animate1, 20); // Ð½ÐµÐ·Ð°Ð»ÐµÐ¶Ð½Ñ– Ð°Ð½Ñ–Ð¼Ð°Ñ†Ñ–Ñ—
setInterval(animate2, 20); // Ð² Ñ€Ñ–Ð·Ð½Ð¸Ñ… Ð¼Ñ–ÑÑ†ÑÑ… ÐºÐ¾Ð´Ñƒ
setInterval(animate3, 20);
        

ÐÐ»Ðµ ÑÐº Ð´Ñ–Ð·Ð½Ð°Ñ‚Ð¸ÑÑ Ð¿Ñ€Ð¾ Ñ†Ðµ Ð² JavaScript? Ð†ÑÐ½ÑƒÑ” ÑÐ¿ÐµÑ†Ð¸Ñ„Ñ–ÐºÐ°Ñ†Ñ–Ñ Animation timing, ÑÐºÐ° Ð½Ð°Ð´Ð°Ñ” Ñ„ÑƒÐ½ÐºÑ†Ñ–ÑŽ requestAnimationFrame. Ð’Ð¾Ð½Ð° Ð²Ð¸Ñ€Ñ–ÑˆÑƒÑ” Ð²ÑÑ– Ñ†Ñ– Ð¿Ð¸Ñ‚Ð°Ð½Ð½Ñ Ñ– Ð½Ð°Ð²Ñ–Ñ‚ÑŒ Ð±Ñ–Ð»ÑŒÑˆÐµ.

Ð¡Ð¸Ð½Ñ‚Ð°ÐºÑÐ¸Ñ:

let requestId = requestAnimationFrame(callback)

          // ÑÐºÐ°ÑÐ¾Ð²ÑƒÑ”Ð¼Ð¾ Ð·Ð°Ð¿Ð»Ð°Ð½Ð¾Ð²Ð°Ð½Ðµ Ð²Ð¸ÐºÐ¾Ð½Ð°Ð½Ð½Ñ ÐºÐ¾Ð»Ð±ÐµÐºÑƒ
cancelAnimationFrame(requestId);
        

<script>
  let prev = performance.now();
  let times = 0;

  requestAnimationFrame(function measure(time) {
    document.body.insertAdjacentHTML("beforeEnd", Math.floor(time - prev) + " ");
    prev = time;

    if (times++ < 10) requestAnimationFrame(measure);
  })
</script>

Ð¡Ñ‚Ñ€ÑƒÐºÑ‚ÑƒÑ€Ð¾Ð²Ð°Ð½Ð° Ð°Ð½Ñ–Ð¼Ð°Ñ†Ñ–Ñ

Ð¢ÐµÐ¿ÐµÑ€ Ð¼Ð¸ Ð¼Ð¾Ð¶ÐµÐ¼Ð¾ Ð·Ñ€Ð¾Ð±Ð¸Ñ‚Ð¸ Ð±Ñ–Ð»ÑŒÑˆ ÑƒÐ½Ñ–Ð²ÐµÑ€ÑÐ°Ð»ÑŒÐ½Ñƒ Ñ„ÑƒÐ½ÐºÑ†Ñ–ÑŽ Ð°Ð½Ñ–Ð¼Ð°Ñ†Ñ–Ñ— Ð½Ð° Ð¾ÑÐ½Ð¾Ð²Ñ– requestAnimationFrame:

          function animate({timing, draw, duration}) {

  let start = performance.now();

  requestAnimationFrame(function animate(time) {
    // timeFraction Ð·Ð¼Ñ–Ð½ÑŽÑ”Ñ‚ÑŒÑÑ Ð²Ñ–Ð´ 0 Ð´Ð¾ 1
    let timeFraction = (time - start) / duration;
    if (timeFraction > 1) timeFraction = 1;

    // Ð¾Ð±Ñ‡Ð¸ÑÐ»ÑŽÑ”Ð¼Ð¾ Ð¿Ð¾Ñ‚Ð¾Ñ‡Ð½Ð¸Ð¹ ÑÑ‚Ð°Ð½ Ð°Ð½Ñ–Ð¼Ð°Ñ†Ñ–Ñ—
    let progress = timing(timeFraction)

    draw(progress); // Ð¼Ð°Ð»ÑŽÑ”Ð¼Ð¾

    if (timeFraction < 1) {
      requestAnimationFrame(animate);
    }

  });
}
        

Ð¤ÑƒÐ½ÐºÑ†Ñ–Ñ animate Ð¿Ñ€Ð¸Ð¹Ð¼Ð°Ñ” 3 Ð¿Ð°Ñ€Ð°Ð¼ÐµÑ‚Ñ€Ð¸, ÑÐºÑ– Ð¾Ð¿Ð¸ÑÑƒÑŽÑ‚ÑŒ Ð°Ð½Ñ–Ð¼Ð°Ñ†Ñ–ÑŽ:

duration

timing(timeFraction)

Ð¤ÑƒÐ½ÐºÑ†Ñ–Ñ Ñ‡Ð°ÑÑƒ, Ð¿Ð¾Ð´Ñ–Ð±Ð½Ð° Ð´Ð¾ CSS-Ð²Ð»Ð°ÑÑ‚Ð¸Ð²Ð¾ÑÑ‚Ñ– transition-timing-function, ÑÐºÐ° Ð¾Ñ‚Ñ€Ð¸Ð¼ÑƒÑ” Ñ‡Ð°ÑÑ‚ÐºÑƒ Ñ‡Ð°ÑÑƒ, Ñ‰Ð¾ Ð¼Ð¸Ð½ÑƒÐ² (0 Ð½Ð° Ð¿Ð¾Ñ‡Ð°Ñ‚ÐºÑƒ, 1 Ð² ÐºÑ–Ð½Ñ†Ñ–) Ñ– Ð¿Ð¾Ð²ÐµÑ€Ñ‚Ð°Ñ” Ð·Ð°Ð²ÐµÑ€ÑˆÐµÐ½Ð½Ñ Ð°Ð½Ñ–Ð¼Ð°Ñ†Ñ–Ñ— (ÑÐº y Ð½Ð° ÐºÑ€Ð¸Ð²Ñ–Ð¹ Ð‘ÐµÐ·ÑŒÑ”).

          function linear(timeFraction) {
  return timeFraction;
}
        

Ð‡Ñ— Ð³Ñ€Ð°Ñ„Ñ–Ðº:

Ð¦Ðµ Ñ‚Ðµ ÑÐ°Ð¼Ðµ, Ñ‰Ð¾ Ð¹ transition-timing-function: linear. Ð¢Ð°ÐºÐ¾Ð¶ Ñ–ÑÐ½ÑƒÑŽÑ‚ÑŒ Ñ†Ñ–ÐºÐ°Ð²Ñ–ÑˆÑ– Ð²Ð°Ñ€Ñ–Ð°Ð½Ñ‚Ð¸, Ð¿Ð¾ÐºÐ°Ð·Ð°Ð½Ñ– Ð½Ð¸Ð¶Ñ‡Ðµ.

draw(progress)

Ð¤ÑƒÐ½ÐºÑ†Ñ–Ñ, ÑÐºÐ° Ð¿Ñ€Ð¸Ð¹Ð¼Ð°Ñ” ÑÑ‚Ð°Ð½ Ð·Ð°Ð²ÐµÑ€ÑˆÐµÐ½Ð½Ñ Ð°Ð½Ñ–Ð¼Ð°Ñ†Ñ–Ñ— Ñ– Ð¼Ð°Ð»ÑŽÑ” Ñ—Ñ—. Ð—Ð½Ð°Ñ‡ÐµÐ½Ð½Ñ progress=0 Ð¾Ð·Ð½Ð°Ñ‡Ð°Ñ” Ð¿Ð¾Ñ‡Ð°Ñ‚ÐºÐ¾Ð²Ð¸Ð¹ ÑÑ‚Ð°Ð½ Ð°Ð½Ñ–Ð¼Ð°Ñ†Ñ–Ñ—, Ð° progress=1 â€“ ÐºÑ–Ð½Ñ†ÐµÐ²Ð¸Ð¹.

          function draw(progress) {
  train.style.left = progress + 'px';
}
        

Ð ÐµÐ·ÑƒÐ»ÑŒÑ‚Ð°Ñ‚

animate.js

index.html

function animate({duration, draw, timing}) {

  let start = performance.now();

  requestAnimationFrame(function animate(time) {
    let timeFraction = (time - start) / duration;
    if (timeFraction > 1) timeFraction = 1;

    let progress = timing(timeFraction)

    draw(progress);

    if (timeFraction < 1) {
      requestAnimationFrame(animate);
    }

  });
}

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <style>
    progress {
      width: 5%;
    }
  </style>
  <script src="animate.js"></script>
</head>

<body>


  <progress id="elem"></progress>

  <script>
    elem.onclick = function() {
      animate({
        duration: 1000,
        timing: function(timeFraction) {
          return timeFraction;
        },
        draw: function(progress) {
          elem.style.width = progress * 100 + '%';
        }
      });
    };
  </script>


</body>

</html>

ÐšÐ¾Ð´ Ð´Ð¾ Ð½ÐµÑ—:

          animate({
  duration: 1000,
  timing(timeFraction) {
    return timeFraction;
  },
  draw(progress) {
    elem.style.width = progress * 100 + '%';
  }
});
        

Ð¤ÑƒÐ½ÐºÑ†Ñ–Ñ— Ñ‡Ð°ÑÑƒ (timing functions)

Ð’Ð¸Ñ‰Ðµ Ð¼Ð¸ Ð±Ð°Ñ‡Ð¸Ð»Ð¸ Ð½Ð°Ð¹Ð¿Ñ€Ð¾ÑÑ‚Ñ–ÑˆÑƒ, Ð»Ñ–Ð½Ñ–Ð¹Ð½Ñƒ Ñ„ÑƒÐ½ÐºÑ†Ñ–ÑŽ Ñ‡Ð°ÑÑƒ.

Ð¡Ñ‚ÐµÐ¿Ñ–Ð½ÑŒ n

          function quad(timeFraction) {
  return Math.pow(timeFraction, 2)
}
        

Ð“Ñ€Ð°Ñ„Ñ–Ðº:

ÐžÑÑŒ Ð³Ñ€Ð°Ñ„Ñ–Ðº progress Ð² ÑÑ‚ÐµÐ¿ÐµÐ½Ñ– 5:

Ð£ Ð´Ñ–Ñ—:

Ð”ÑƒÐ³Ð°

Ð¤ÑƒÐ½ÐºÑ†Ñ–Ñ:

          function circ(timeFraction) {
  return 1 - Math.sin(Math.acos(timeFraction));
}
        

Ð“Ñ€Ð°Ñ„Ñ–Ðº:

Back: ÑÑ‚Ñ€Ñ–Ð»ÑŒÐ±Ð° Ð· Ð»ÑƒÐºÐ°

Ð¦Ñ Ñ„ÑƒÐ½ÐºÑ†Ñ–Ñ Ð²Ð¸ÐºÐ¾Ð½ÑƒÑ” â€œÑÑ‚Ñ€Ñ–Ð»ÑŒÐ±Ñƒ Ð· Ð»ÑƒÐºÐ°â€. Ð¡Ð¿Ð¾Ñ‡Ð°Ñ‚ÐºÑƒ Ð¼Ð¸ â€œÐ½Ð°Ñ‚ÑÐ³ÑƒÑ”Ð¼Ð¾ Ñ‚ÑÑ‚Ð¸Ð²Ñƒâ€, Ð° Ð¿Ð¾Ñ‚Ñ–Ð¼ â€œÑÑ‚Ñ€Ñ–Ð»ÑÑ”Ð¼Ð¾â€.

ÐšÐ¾Ð´:

          function back(x, timeFraction) {
  return Math.pow(timeFraction, 2) * ((x + 1) * timeFraction - x)
}
        

Ð“Ñ€Ð°Ñ„Ñ–Ðº Ð´Ð»Ñ x = 1.5:.

Ð’Ñ–Ð´ÑÐºÐ¾Ðº

          function bounce(timeFraction) {
  for (let a = 0, b = 1; 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)
    }
  }
}
        

Ð£ Ð´Ñ–Ñ—:

Ð•Ð»Ð°ÑÑ‚Ð¸Ñ‡Ð½Ð° Ð°Ð½Ñ–Ð¼Ð°Ñ†Ñ–Ñ

          function elastic(x, timeFraction) {
  return Math.pow(2, 10 * (timeFraction - 1)) * Math.cos(20 * Math.PI * x / 3 * timeFraction)
}
        

Ð“Ñ€Ð°Ñ„Ñ–Ðº Ð´Ð»Ñ x=1.5:.

Ð£ Ð´Ñ–Ñ— Ð´Ð»Ñ x=1.5:

Ð ÐµÐ²ÐµÑ€Ñ: ease*

ÐžÑ‚Ð¶Ðµ, Ñƒ Ð½Ð°Ñ Ñ” Ð½Ð°Ð±Ñ–Ñ€ Ñ„ÑƒÐ½ÐºÑ†Ñ–Ð¹ Ñ‡Ð°ÑÑƒ. Ð‡Ñ… Ð¿Ñ€ÑÐ¼Ðµ Ð²Ð¸ÐºÐ¾Ñ€Ð¸ÑÑ‚Ð°Ð½Ð½Ñ Ð½Ð°Ð·Ð¸Ð²Ð°Ñ”Ñ‚ÑŒÑÑ â€œeaseInâ€.

easeOut

Ð£ Ñ€ÐµÐ¶Ð¸Ð¼Ñ– â€œeaseOutâ€ Ñ„ÑƒÐ½ÐºÑ†Ñ–Ñ timing Ð¿Ð¾Ð¼Ñ–Ñ‰Ð°Ñ”Ñ‚ÑŒÑÑ Ð² Ð¾Ð±Ð³Ð¾Ñ€Ñ‚ÐºÑƒ timingEaseOut:

timingEaseOut(timeFraction) = 1 - timing(1 - timeFraction)

          // Ð¾Ñ‚Ñ€Ð¸Ð¼ÑƒÑ” Ñ„ÑƒÐ½ÐºÑ†Ñ–ÑŽ Ñ‡Ð°ÑÑƒ, Ð¿Ð¾Ð²ÐµÑ€Ñ‚Ð°Ñ” Ð¿ÐµÑ€ÐµÑ‚Ð²Ð¾Ñ€ÐµÐ½Ð¸Ð¹ Ð²Ð°Ñ€Ñ–Ð°Ð½Ñ‚
function makeEaseOut(timing) {
  return function(timeFraction) {
    return 1 - timing(1 - timeFraction);
  }
}
        

let bounceEaseOut = makeEaseOut(bounce);

Ð ÐµÐ·ÑƒÐ»ÑŒÑ‚Ð°Ñ‚

style.css

index.html

#brick {
  width: 40px;
  height: 20px;
  background: #EE6B47;
  position: relative;
  cursor: pointer;
}

#path {
  outline: 1px solid #E8C48E;
  width: 540px;
  height: 20px;
}

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <script src="https://js.cx/libs/animate.js"></script>
</head>

<body>


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

  <script>
    function makeEaseOut(timing) {
      return function(timeFraction) {
        return 1 - timing(1 - timeFraction);
      }
    }

    function bounce(timeFraction) {
      for (let a = 0, b = 1; 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)
        }
      }
    }

    let bounceEaseOut = makeEaseOut(bounce);

    brick.onclick = function() {
      animate({
        duration: 3000,
        timing: bounceEaseOut,
        draw: function(progress) {
          brick.style.left = progress * 500 + 'px';
        }
      });
    };
  </script>


</body>

</html>

ÐÐ° Ð³Ñ€Ð°Ñ„Ñ–ÐºÑƒ Ð²Ð¸Ñ‰Ðµ Ð·Ð²Ð¸Ñ‡Ð°Ð¹Ð½Ð¸Ð¹ bounce Ð¼Ð°Ñ” Ñ‡ÐµÑ€Ð²Ð¾Ð½Ð¸Ð¹ ÐºÐ¾Ð»Ñ–Ñ€, Ð° easeOut bounce â€“ ÑÐ¸Ð½Ñ–Ð¹.

Ð—Ð²Ð¸Ñ‡Ð°Ð¹Ð½Ð¸Ð¹ bounce â€“ Ð¾Ð±â€™Ñ”ÐºÑ‚ Ð²Ñ–Ð´ÑÐºÐ°ÐºÑƒÑ” Ð²Ð½Ð¸Ð·Ñƒ, Ð° Ð¿Ð¾Ñ‚Ñ–Ð¼ Ð² ÐºÑ–Ð½Ñ†Ñ– Ñ€Ñ–Ð·ÐºÐ¾ Ð¿Ñ–Ð´ÑÑ‚Ñ€Ð¸Ð±ÑƒÑ” Ð´Ð¾Ð³Ð¾Ñ€Ð¸.
ÐŸÑ–ÑÐ»Ñ easeOut â€“ Ð²Ñ–Ð½ ÑÐ¿Ð¾Ñ‡Ð°Ñ‚ÐºÑƒ ÑÑ‚Ñ€Ð¸Ð±Ð°Ñ” Ð²Ð³Ð¾Ñ€Ñƒ, Ð° Ð¿Ð¾Ñ‚Ñ–Ð¼ Ð¿Ñ–Ð´ÑÑ‚Ñ€Ð¸Ð±ÑƒÑ” Ñ‚Ð°Ð¼.

easeInOut

          if (timeFraction <= 0.5) { // Ð¿ÐµÑ€ÑˆÐ° Ð¿Ð¾Ð»Ð¾Ð²Ð¸Ð½Ð° Ð°Ð½Ñ–Ð¼Ð°Ñ†Ñ–Ñ—
  return timing(2 * timeFraction) / 2;
} else { // Ð´Ñ€ÑƒÐ³Ð° Ð¿Ð¾Ð»Ð¾Ð²Ð¸Ð½Ð° Ð°Ð½Ñ–Ð¼Ð°Ñ†Ñ–Ñ—
  return (2 - timing(2 * (1 - timeFraction))) / 2;
}
        

ÐšÐ¾Ð´ Ð¾Ð±Ð³Ð¾Ñ€Ñ‚ÐºÐ¸:

          function makeEaseInOut(timing) {
  return function(timeFraction) {
    if (timeFraction < .5)
      return timing(2 * timeFraction) / 2;
    else
      return (2 - timing(2 * (1 - timeFraction))) / 2;
  }
}

bounceEaseInOut = makeEaseInOut(bounce);
        

bounceEaseInOut Ð² Ð´Ñ–Ñ—:

Ð ÐµÐ·ÑƒÐ»ÑŒÑ‚Ð°Ñ‚

style.css

index.html

#brick {
  width: 40px;
  height: 20px;
  background: #EE6B47;
  position: relative;
  cursor: pointer;
}

#path {
  outline: 1px solid #E8C48E;
  width: 540px;
  height: 20px;
}

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <script src="https://js.cx/libs/animate.js"></script>
</head>

<body>


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

  <script>
    function makeEaseInOut(timing) {
      return function(timeFraction) {
        if (timeFraction < .5)
          return timing(2 * timeFraction) / 2;
        else
          return (2 - timing(2 * (1 - timeFraction))) / 2;
      }
    }


    function bounce(timeFraction) {
      for (let a = 0, b = 1; 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)
        }
      }
    }

    let bounceEaseInOut = makeEaseInOut(bounce);

    brick.onclick = function() {
      animate({
        duration: 3000,
        timing: bounceEaseInOut,
        draw: function(progress) {
          brick.style.left = progress * 500 + 'px';
        }
      });
    };
  </script>


</body>

</html>

Ð•Ñ„ÐµÐºÑ‚ Ð´Ð¾Ð±Ñ€Ðµ Ð²Ð¸Ð´Ð½Ð¾, ÑÐºÑ‰Ð¾ Ð¿Ð¾Ñ€Ñ–Ð²Ð½ÑÑ‚Ð¸ Ð³Ñ€Ð°Ñ„Ñ–ÐºÐ¸ easeIn, easeOut Ñ‚Ð° easeInOut Ñ„ÑƒÐ½ÐºÑ†Ñ–Ñ— Ñ‡Ð°ÑÑƒ circ:

Ð§ÐµÑ€Ð²Ð¾Ð½Ð¸Ð¹ â€“ Ð·Ð²Ð¸Ñ‡Ð°Ð¹Ð½Ð¸Ð¹ Ð²Ð°Ñ€Ñ–Ð°Ð½Ñ‚ circ (easeIn).
Ð—ÐµÐ»ÐµÐ½Ð¸Ð¹ â€“ easeOut.
Ð¡Ð¸Ð½Ñ–Ð¹ â€“ easeInOut.

Ð‘Ñ–Ð»ÑŒÑˆ Ñ†Ñ–ÐºÐ°Ð²Ð° Ñ„ÑƒÐ½ÐºÑ†Ñ–Ñ â€œdrawâ€

Ð ÐµÐ·ÑƒÐ»ÑŒÑ‚Ð°Ñ‚

style.css

index.html

textarea {
  display: block;
  border: 1px solid #BBB;
  color: #444;
  font-size: 110%;
}

button {
  margin-top: 10px;
}

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <script src="https://js.cx/libs/animate.js"></script>
</head>

<body>


  <textarea id="textExample" rows="5" cols="60">He took his vorpal sword in hand:
Long time the manxome foe he soughtâ€”
So rested he by the Tumtum tree,
And stood awhile in thought.
  </textarea>

  <button onclick="animateText(textExample)">Run the animated typing!</button>

  <script>
    function animateText(textArea) {
      let text = textArea.value;
      let to = text.length,
        from = 0;

      animate({
        duration: 5000,
        timing: bounce,
        draw: function(progress) {
          let result = (to - from) * progress + from;
          textArea.value = text.slice(0, Math.ceil(result))
        }
      });
    }


    function bounce(timeFraction) {
      for (let a = 0, b = 1; 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)
        }
      }
    }
  </script>


</body>

</html>

ÐŸÑ–Ð´ÑÑƒÐ¼ÐºÐ¸

ÐžÑÑŒ Ð´Ð¾Ð¿Ð¾Ð¼Ñ–Ð¶Ð½Ð° Ñ„ÑƒÐ½ÐºÑ†Ñ–Ñ animate Ð´Ð»Ñ Ð½Ð°Ð»Ð°ÑˆÑ‚ÑƒÐ²Ð°Ð½Ð½Ñ Ð±Ñ–Ð»ÑŒÑˆÐ¾ÑÑ‚Ñ– Ð°Ð½Ñ–Ð¼Ð°Ñ†Ñ–Ð¹:

          function animate({timing, draw, duration}) {

  let start = performance.now();

  requestAnimationFrame(function animate(time) {
    // timeFraction Ð·Ð¼Ñ–Ð½ÑŽÑ”Ñ‚ÑŒÑÑ Ð²Ñ–Ð´ 0 Ð´Ð¾ 1
    let timeFraction = (time - start) / duration;
    if (timeFraction > 1) timeFraction = 1;

    // Ð¾Ð±Ñ‡Ð¸ÑÐ»ÑŽÑ”Ð¼Ð¾ Ð¿Ð¾Ñ‚Ð¾Ñ‡Ð½Ð¸Ð¹ ÑÑ‚Ð°Ð½ Ð°Ð½Ñ–Ð¼Ð°Ñ†Ñ–Ñ—
    let progress = timing(timeFraction);

    draw(progress); // Ð¼Ð°Ð»ÑŽÑ”Ð¼Ð¾

    if (timeFraction < 1) {
      requestAnimationFrame(animate);
    }

  });
}
        

ÐŸÐ°Ñ€Ð°Ð¼ÐµÑ‚Ñ€Ð¸:

duration â€“ Ð·Ð°Ð³Ð°Ð»ÑŒÐ½Ð¸Ð¹ Ñ‡Ð°Ñ Ð°Ð½Ñ–Ð¼Ð°Ñ†Ñ–Ñ— Ñƒ Ð¼Ñ–Ð»Ñ–ÑÐµÐºÑƒÐ½Ð´Ð°Ñ….
timing â€“ Ñ„ÑƒÐ½ÐºÑ†Ñ–Ñ Ð´Ð»Ñ Ð¾Ð±Ñ‡Ð¸ÑÐ»ÐµÐ½Ð½Ñ Ð¿Ñ€Ð¾Ð³Ñ€ÐµÑÑƒ Ð°Ð½Ñ–Ð¼Ð°Ñ†Ñ–Ñ—. ÐžÑ‚Ñ€Ð¸Ð¼ÑƒÑ” Ð¿Ñ€Ð¾Ð¼Ñ–Ð¶Ð¾Ðº Ñ‡Ð°ÑÑƒ Ð²Ñ–Ð´ 0 Ð´Ð¾ 1, Ð¿Ð¾Ð²ÐµÑ€Ñ‚Ð°Ñ” Ð¿Ñ€Ð¾Ð³Ñ€ÐµÑ Ð°Ð½Ñ–Ð¼Ð°Ñ†Ñ–Ñ—, Ð·Ð°Ð·Ð²Ð¸Ñ‡Ð°Ð¹ Ð²Ñ–Ð´ 0 Ð´Ð¾ 1.
draw â€“ Ñ„ÑƒÐ½ÐºÑ†Ñ–Ñ Ð´Ð»Ñ Ð¼Ð°Ð»ÑŽÐ²Ð°Ð½Ð½Ñ Ð°Ð½Ñ–Ð¼Ð°Ñ†Ñ–Ñ—.

Ð¢Ðµ Ð¶ ÑÐ°Ð¼Ðµ ÑÑ‚Ð¾ÑÑƒÑ”Ñ‚ÑŒÑÑ Ñ– Ñ„ÑƒÐ½ÐºÑ†Ñ–Ñ— draw: Ð¼Ð¸ Ð¼Ð¾Ð¶ÐµÐ¼Ð¾ Ð°Ð½Ñ–Ð¼ÑƒÐ²Ð°Ñ‚Ð¸ Ð±ÑƒÐ´ÑŒ-Ñ‰Ð¾, Ð° Ð½Ðµ Ð»Ð¸ÑˆÐµ Ð²Ð»Ð°ÑÑ‚Ð¸Ð²Ð¾ÑÑ‚Ñ– CSS.

Ð—Ð°Ð²Ð´Ð°Ð½Ð½Ñ

Animate the bouncing ball

Make a bouncing ball. Click to see how it should look:

To bounce we can use CSS property top and position:absolute for the ball inside the field with position:relative.

The bottom coordinate of the field is field.clientHeight. The CSS top property refers to the upper edge of the ball. So it should go from 0 till field.clientHeight - ball.clientHeight, thatâ€™s the final lowest position of the upper edge of the ball.

To get the â€œbouncingâ€ effect we can use the timing function bounce in easeOut mode.

Hereâ€™s the final code for the animation:

          let to = field.clientHeight - ball.clientHeight;

animate({
  duration: 2000,
  timing: makeEaseOut(bounce),
  draw(progress) {
    ball.style.top = to * progress + 'px'
  }
});
        

Ð’Ñ–Ð´ÐºÑ€Ð¸Ñ‚Ð¸ Ñ€Ñ–ÑˆÐµÐ½Ð½Ñ Ð² Ð¿Ñ–ÑÐ¾Ñ‡Ð½Ð¸Ñ†Ñ–.

Animate the ball bouncing to the right

Make the ball bounce to the right. Like this:

Write the animation code. The distance to the left is 100px.

Take the solution of the previous task Animate the bouncing ball as the source.

In the task Animate the bouncing ball we had only one property to animate. Now we need one more: elem.style.left.

The horizontal coordinate changes by another law: it does not â€œbounceâ€, but gradually increases shifting the ball to the right.

We can write one more animate for it.

As the time function we could use linear, but something like makeEaseOut(quad) looks much better.

The code:

          let height = field.clientHeight - ball.clientHeight;
let width = 100;

// animate top (bouncing)
animate({
  duration: 2000,
  timing: makeEaseOut(bounce),
  draw: function(progress) {
    ball.style.top = height * progress + 'px'
  }
});

// animate left (moving to the right)
animate({
  duration: 2000,
  timing: makeEaseOut(quad),
  draw: function(progress) {
    ball.style.left = width * progress + "px"
  }
});
        

Ð’Ñ–Ð´ÐºÑ€Ð¸Ñ‚Ð¸ Ñ€Ñ–ÑˆÐµÐ½Ð½Ñ Ð² Ð¿Ñ–ÑÐ¾Ñ‡Ð½Ð¸Ñ†Ñ–.

ÐÐ°Ð²Ñ‡Ð°Ð»ÑŒÐ½Ð° ÐºÐ°Ñ€Ñ‚Ð°

ÐšÐ¾Ð¼ÐµÐ½Ñ‚Ð°Ñ€Ñ–

JavaScript-Ð°Ð½Ñ–Ð¼Ð°Ñ†Ñ–Ñ—

Ð’Ð¸ÐºÐ¾Ñ€Ð¸ÑÑ‚Ð°Ð½Ð½Ñ setInterval

Ð’Ð¸ÐºÐ¾Ñ€Ð¸ÑÑ‚Ð°Ð½Ð½Ñ requestAnimationFrame

Ð¡Ñ‚Ñ€ÑƒÐºÑ‚ÑƒÑ€Ð¾Ð²Ð°Ð½Ð° Ð°Ð½Ñ–Ð¼Ð°Ñ†Ñ–Ñ

Ð¤ÑƒÐ½ÐºÑ†Ñ–Ñ— Ñ‡Ð°ÑÑƒ (timing functions)

Ð¡Ñ‚ÐµÐ¿Ñ–Ð½ÑŒ n

Ð”ÑƒÐ³Ð°

Back: ÑÑ‚Ñ€Ñ–Ð»ÑŒÐ±Ð° Ð· Ð»ÑƒÐºÐ°

Ð’Ñ–Ð´ÑÐºÐ¾Ðº

Ð•Ð»Ð°ÑÑ‚Ð¸Ñ‡Ð½Ð° Ð°Ð½Ñ–Ð¼Ð°Ñ†Ñ–Ñ

Ð ÐµÐ²ÐµÑ€Ñ: ease*

easeOut

easeInOut

Ð‘Ñ–Ð»ÑŒÑˆ Ñ†Ñ–ÐºÐ°Ð²Ð° Ñ„ÑƒÐ½ÐºÑ†Ñ–Ñ â€œdrawâ€

ÐŸÑ–Ð´ÑÑƒÐ¼ÐºÐ¸

Ð—Ð°Ð²Ð´Ð°Ð½Ð½Ñ

Animate the bouncing ball

Animate the ball bouncing to the right

ÐšÐ¾Ð¼ÐµÐ½Ñ‚Ð°Ñ€Ñ–

Ð“Ð»Ð°Ð²Ð°

ÐÐ°Ð²Ñ–Ð³Ð°Ñ†Ñ–Ñ Ð¿Ð¾ ÑƒÑ€Ð¾ÐºÑƒ

Ð“Ð»Ð°Ð²Ð°

ÐÐ°Ð²Ñ–Ð³Ð°Ñ†Ñ–Ñ Ð¿Ð¾ ÑƒÑ€Ð¾ÐºÑƒ

ÐÐ°Ð²Ñ–Ð³Ð°Ñ†Ñ–Ñ Ð¿Ð¾ ÑƒÑ€Ð¾ÐºÑƒ