Pregunta ¿Puedo establecer el progreso de una animación de fotograma clave en una etapa específica?


Tengo una animación de fotograma clave con varios pasos:

@keyframes rotateLeftSideCustom {
    0% {
    }
    40% {
        -webkit-transform: rotateY(-15deg);
        transform: rotateY(-15deg);
        opacity: .8;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    100% {
        -webkit-transform: scale(0.8) translateZ(-200px);
        transform: scale(0.8) translateZ(-200px);
        opacity: 0;
    }
}

.section-animation {
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-animation: rotateLeftSideCustom 0.6s both ease-in;
    animation: rotateLeftSideCustom 0.6s both ease-in;
}

¿Hay alguna forma de que pueda usar JavaScript para establecer el progreso de la animación?

P.ej:

document.querySelector('.section-animation').animationState('40%');

Contexto: Estoy intentando construir una interfaz arrastrable en la que necesito alinear el progreso de la animación con la cantidad de arrastre que hace el usuario.


11
2018-04-21 14:00


origen


Respuestas:


¿Lo hice bien, que quieres comenzar la animación no al 0%, sino al 40%?

Hay una manera de hacerlo CSS-only, mediante el uso de valor negativo para animación-delay

.section-animation {
    animation-delay: -0.24s; /*40% of 0.6s */
}

Además, es posible que desee agregar

.section-animation {
    animation-play-state: paused;
}

a su elemento, para que pueda ver el estado de la animación como una imagen estática, no animada.

Aquí hay un enlace: https://css-tricks.com/starting-css-animations-midway/


5
2018-04-21 14:21



Podría usar jQuery para animación. Con .animate() tienes una propiedad step.

API animada

De los documentos:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>animate demo</title>
  <style>
  div {
    position: relative;
    background-color: #abc;
    width: 40px;
    height: 40px;
    float: left;
    margin: 5px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p><button id="go">Run »</button></p>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

<script>
$( "#go" ).click(function() {
  $( ".block:first" ).animate({
    left: 100
  }, {
    duration: 1000,
    step: function( now, fx ){
      $( ".block:gt(0)" ).css( "left", now );
    }
  });
});
</script>

</body>
</html>

Dónde *now* es el estado real de tu animación

ACTUALIZAR

Propably puedes usar requestAnimationFrame pero esto también es como mi otra solución. La diferencia es que es JavaScript puro, por lo que no se necesita una biblioteca externa.


0
2018-04-21 14:07