freeCodeCamp

5.5 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d78a9367417b2b2512ae9	Use a Bezier Curve to Move a Graphic	0		Используйте кривую Безье для перемещения графика

Description

В предыдущем задании обсуждалось ключевое слово ease-out которое описывает изменение анимации, которое ускоряется сначала, а затем замедляется в конце анимации. Справа показана разница между ключевым словом ease-out (для синего элемента) и linear ключевым словом (для красного элемента). Подобные анимационные прогрессии к ease-out ключевому слову могут быть достигнуты с помощью пользовательской кубической функции кривой Безье. В общем случае изменение опорных точек p1 и p2 приводит к созданию различных кривых Безье, которые контролируют ход анимации во времени. Вот пример кривой Безье с использованием значений, имитирующих стиль непринужденности: animation-timing-function: cubic-bezier(0, 0, 0.58, 1); Помните, что все функции cubic-bezier начинаются с p0 at (0, 0) и заканчиваются p3 в (1, 1). В этом примере кривая движется быстрее по оси Y (начинается с 0, переходит в p1 y значение 0, затем переходит в значение p2 y 1), чем она перемещается по оси X (0 для начала, затем 0 для p1 , до 0,58 для p2 ). В результате изменение анимированного элемента происходит быстрее, чем время анимации для этого сегмента. К концу кривой соотношение между изменением значений x и y меняется на противоположное - значение y перемещается от 1 до 1 (без изменений), а значения x перемещаются от 0,58 до 1, что делает изменения анимации медленнее по сравнению с продолжительность анимации.

Instructions

Чтобы увидеть эффект этой кривой Безье в действии, измените animation-timing-function элемента с id red на функцию cubic-bezier с значениями x1, y1, x2, y2, установленными соответственно 0, 0, 0.58, 1 Это заставит оба элемента продвигаться по анимации аналогичным образом.

Tests

tests:
  - text: 'Значение свойства <code>animation-timing-function</code> элемента с <code>red</code> id должно быть функцией <code>cubic-bezier</code> с значениями x1, y1, x2, y2, установленными соответственно 0, 0, 0,58, 1.'
    testString: 'assert($("#red").css("animation-timing-function") == "cubic-bezier(0, 0, 0.58, 1)", "The value of the <code>animation-timing-function</code> property of the element with the id <code>red</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .");'
  - text: Элемент с <code>red</code> идентификатором должен больше не обладать свойством <code>animation-timing-function</code> линейным.
    testString: 'assert($("#red").css("animation-timing-function") !== "linear", "The element with the id <code>red</code> should no longer have the <code>animation-timing-function</code> property of linear.");'
  - text: Значение свойства <code>animation-timing-function</code> для элемента с <code>blue</code> не должно изменяться.
    testString: 'assert($("#blue").css("animation-timing-function") == "ease-out", "The value of the <code>animation-timing-function</code> property for the element with the id <code>blue</code> should not change.");'

Challenge Seed

<style>
  .balls{
    border-radius: 50%;
    position: fixed;
    width: 50px;
    height: 50px;
    margin-top: 50px;
    animation-name: bounce;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
  #red {
    background: red;
    left: 27%;
    animation-timing-function: linear;
  }
  #blue {
    background: blue;
    left: 56%;
    animation-timing-function: ease-out;
  }
  @keyframes bounce {
    0% {
      top: 0px;
    }
    100% {
      top: 249px;
    }
  }
</style>
<div class="balls" id= "red"></div>
<div class="balls" id= "blue"></div>

Solution

// solution required

5.5 KiB Raw Blame History Unescape Escape