如何使用三次贝塞尔曲线来更改关键帧动画的速度？ [英] How to use cubic-bezier to change the speed of a keyframe animation?

问题描述

我正在尝试创建一个 @keyframe 动画，以从屏幕底部弹出一个框，然后将其从HTML主体的顶部弹起。文件。我以前用来做此操作的方法不允许您在动画期间更改速度，而实习生并不能使它看起来非常逼真（请参见下面的代码）。

我找到了一个

I am trying to create a @keyframe animation to bring a box up from the bottom of the screen and then have it bounce off the top of the body of the HTML document. The method that I used to do this doesn't allow you to change the speed during the duration of the animation which intern doesn't make it look very realistic (See Code Below).

I have found an answer to my question the only problem is that I really don't understand how cubic-bezier is creating the animation. I would like to make sense of what the code is doing before I go ahead and just slap it into my project. So, yeah I guess the title of this question shouldn't be "How to use cubic-bezier to change the speed of a keyframe animation?" but "How does the cubic-bezier work and how is it working in this instance". I would absolutely appreciate it if someone could explain this a little and even give me a simple example of code to follow and understand.

Note: I have looked at Mozila Developer Network at this property and still don't fully understand how it works in or out of a @keyframe animation.

document.querySelector('#button').addEventListener('click', function() {
  document.querySelector('#square').className = 'bounce';
  document.querySelector('#square').style.display = 'block';
});
document.querySelector('#square').addEventListener('animationend', function(e) {
  if (e.animationName == 'animate-in') {
    document.querySelector('#square').removeAttribute('class');
  }
});

#button {
  display: block;
  position: absolute;
  left: 75px;
}

#square {
  display: none;
  position: relative;
  width: 50px;
  height: 50px;
  background-color: tomato;
  animation-fill-mode: forwards;
}

.bounce {
  animation: animate-in 1.5s;
}

@keyframes animate-in {
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
  0% {
    transform: translateY(100vh);
  }
}

<input type="button" id="button" value="Run Animation">
<div id="square"></div>

解决方案

You may find by playing with the box on here https://matthewlein.com/ceaser/ that you get a decent understanding of cubic bezier.

Imagine a box. If you place a marker on:
bottom left corner of the box, it has a value of (0)
top right corner of the box, it has a value of (1)

But there are 4 values for cubic bezier e.g....
cubic-bezier(0.755, 0.050, 0.855, 0.060);

That is because there are in effect two markers (or start points).

The first two values are obtained from a starting point of the bottom left corner of the box, of which the value is (0,0). As you move the marker to the right, the first value changes, e.g.(0.755, 0.000). As you move the marker up the second value changes e.g.(0.755, 0.050).

The second two values are obtained by a starting point of top right of a box, of which the value is (1,1). As you move the marker to the left, the third value changes, e.g.(0.855, 1.000). As you move the marker down the fourth value changes e.g.(0.855, 0.060).

Values one and three (left and right) control the time, values two and four (up and down) control the animation.

Putting these values together makes (0.755, 0.050, 0.855, 0.060);

I have included a diagram (it does not show the same values as the example above) but should help to understand the information above.

这篇关于如何使用三次贝塞尔曲线来更改关键帧动画的速度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！