freeCodeCamp

3.2 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d78a9367417b2b2512aea	Make Motion More Natural Using a Bezier Curve	0		Haz el movimiento más natural usando una curva Bezier

Description

Este desafío anima un elemento para replicar el movimiento de una bola que se hace malabarismo. Los desafíos anteriores cubrieron las curvas Bezier cúbicas linear y de ease-out desahogo, sin embargo, ninguno de ellos describe con precisión el movimiento de los malabares. Necesitas personalizar una curva Bezier para esto. La animation-timing-function automáticamente en cada fotograma clave cuando la cuenta animation-iteration-count se establece en infinito. Dado que hay una regla de fotogramas clave establecida en la mitad de la duración de la animación (al 50% ), produce dos progresiones de animación idénticas en el movimiento ascendente y descendente de la bola. La siguiente curva de Bezier cúbica simula un movimiento de malabarismo: cubic-bezier(0.3, 0.4, 0.5, 1.6); Observe que el valor de y2 es mayor que 1. Aunque la curva de Bézier cúbica se asigna en un sistema de coordenadas 1 por 1, y solo puede aceptar valores de x de 1 a 1, el valor de y se puede configurar en números mayores que uno. Esto resulta en un movimiento de rebote que es ideal para simular la bola de malabarismo.

Instructions

Cambie el valor de la animation-timing-function de animation-timing-function del elemento con el id de green a una función de cubic-bezier con x1, y1, x2, y2 valores establecidos respectivamente en 0.311, 0.441, 0.444, 1.649.

Tests

tests:
  - text: 'El valor de la propiedad de <code>animation-timing-function</code> para el elemento con el id <code>green</code> debe ser una función de <code>cubic-bezier</code> con los valores de x1, y1, x2, y2 según lo especificado.'
    testString: 'assert($("#green").css("animation-timing-function") == "cubic-bezier(0.311, 0.441, 0.444, 1.649)", "The value of the <code>animation-timing-function</code> property for the element with the id <code>green</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values as specified.'

Challenge Seed

<style>
  .balls {
    border-radius: 50%;
    position: fixed;
    width: 50px;
    height: 50px;
    top: 60%;
    animation-name: jump;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
  #red {
    background: red;
    left: 25%;
    animation-timing-function: linear;
  }
  #blue {
    background: blue;
    left: 50%;
    animation-timing-function: ease-out;
  }
  #green {
    background: green;
    left: 75%;
    animation-timing-function: cubic-bezier(0.69, 0.1, 1, 0.1);
  }

  @keyframes jump {
    50% {
      top: 10%;
    }
  }
</style>
<div class="balls" id="red"></div>
<div class="balls" id="blue"></div>
<div class="balls" id="green"></div>

Solution

// solution required

3.2 KiB Raw Blame History