Anime.js를 사용한 JavaScript 기반 애니메이션, 3부: 값, 타임라인 및 재생 탐색-Word누르다-php.cn

使用 Anime.js 基于 JavaScript 的动画，第 3 部分：探索值、时间轴和播放

Anime.js 시리즈의 이전 튜토리얼에서는 다양한 대상 요소가 애니메이션되는 방식을 제어하는 다양한 유형의 매개변수에 대해 배웠습니다. 또한 함수 인수를 사용하여 요소의 지연 또는 기간을 점진적으로 변경하는 방법도 배웠습니다.

이 튜토리얼에서는 한 단계 더 나아가 일반 숫자, 함수 기반 값 및 키프레임을 사용하여 속성 값 자체를 지정하는 방법을 알아봅니다. 또한 타임라인을 사용하여 애니메이션을 순서대로 재생하는 방법도 알아봅니다.

속성 값 지정

Anime.js를 사용하면 대상 요소의 애니메이션 가능 속성의 최종 값을 지정할 수 있습니다. 애니메이션의 초기 또는 시작 값은 속성의 기본값입니다. CSS에 지정된 모든 값을 시작 값으로 사용할 수도 있습니다. 최종 값을 지정하는 방법에는 여러 가지가 있습니다.

단위 없는 숫자일 수도 있습니다. 이 경우, 부동산 값을 계산할 때 해당 부동산의 원래 단위 또는 기본 단위가 사용됩니다. 값을 문자열로 지정할 수도 있지만 문자열에는 숫자 값이 하나 이상 포함되어야 합니다. 문자열 값의 예는 10vh、80% 和 9.125turn입니다.

절대값을 지정하는 대신 현재 값을 기준으로 속성값을 지정할 수도 있습니다. 예를 들어 +=150px 作为值，将最终 translateY 值设置为比当前值大 150px 을 사용할 수 있습니다. 상대값을 지정할 때는 덧셈, 곱셈, 뺄셈만 사용할 수 있다는 점을 기억하세요.

색상에 애니메이션을 적용할 때 빨간색, 검정색, 파란색과 같은 색상 이름을 사용하여 애니메이션의 최종 색상 값을 설정할 수 없습니다. 이 경우 색상 애니메이션이 전혀 발생하지 않으며 변경 사항이 즉각적으로 적용됩니다. 색상에 애니메이션을 적용하는 유일한 방법은 값을 16진수 또는 RGB 및 HSL 값으로 지정하는 것입니다.

애니메이션을 적용하기 위해 대상 요소의 초기 값을 지정하지 않았다는 점을 눈치채셨을 것입니다. Anime.js는 CSS와 이러한 속성의 기본값을 기반으로 초기 값을 자동으로 결정합니다. 그러나 배열을 사용하여 기본값이 아닌 속성의 초기 값을 지정할 수 있습니다. 배열의 첫 번째 항목은 초기 값을 나타내고 두 번째 항목은 최종 값을 나타냅니다.

모든 대상 요소에 동일한 최종 값을 사용하는 대신 함수를 사용하여 다양한 매개변수에 대해 서로 다른 값을 설정할 수 있습니다. 이 프로세스는 함수 기반 속성 매개변수를 지정하는 것과 유사합니다.

으아아아

translateY 属性，我们使用元素的索引来设置翻译值。使用 50 * (i + 1) 会将每个元素的 translateY 값은 50픽셀씩 증가합니다.

스케일링 애니메이션은 또한 내장된 Math.random() 函数返回一个小于 1 的浮点伪随机数。这样元素随机缩放，但属性的 i/10 섹션과 함께 요소의 인덱스를 사용하여 결국 요소의 크기가 더 커질 가능성을 약간 높입니다.

회전 애니메이션 코드에서는 anime.random(a, b) 辅助函数来获取 -180 到 180 之间的随机整数。此函数有助于分配随机积分translateY 和 rotate와 같은 속성의 값을 사용합니다. 이 기능을 사용하여 임의의 스케일 값을 할당하면 극단적인 결과가 생성됩니다.

다양한 요소의 테두리 반경 값은 el 函数参数计算目标元素的宽度来确定的。最后，代码的最后一部分也为 duration 和 delay 매개변수를 사용하여 무작위 값으로 할당됩니다.

마지막 부분에 구현된 애니메이션이 매우 랜덤하다는 것을 알 수 있습니다. 요소의 다양한 속성 값이나 지연 및 기간 값 사이에는 아무런 관계가 없습니다. 실제 생활에서는 애니메이션에 방향성을 어느 정도 추가하는 값을 사용하는 것이 더 합리적입니다.

키프레임을 사용하여 대상 요소의 다양한 속성에 애니메이션을 적용할 수도 있습니다. 각 키프레임에는 속성 개체 배열이 포함되어 있습니다. 이 객체를 사용하여 애니메이션의 해당 부분 duration、delay 和 easing에 대한 속성 값을 지정할 수 있습니다. 다음 코드는 키프레임 기반 번역 애니메이션을 만듭니다.

으아아아

모든 매개변수에 대해 서로 다르거나 동일한 값을 지정하여 한 번에 여러 속성에 애니메이션을 적용할 수도 있습니다. 두 번째 경우 전역 delay 매개변수는 인덱스를 기반으로 모든 요소에 초기 지연을 적용합니다. 이 지연은 키프레임 내의 각 속성에 적용되는 지연과 무관합니다.

创建和操作时间线

到目前为止，在本系列中，我们一直在使用 delay 参数以特定顺序播放不同的动画。要为此目的使用延迟，我们还需要知道前一个动画的持续时间。

随着动画序列的复杂性不断增加，维护正确的延迟值变得非常繁琐。其中一个动画的持续时间的任何变化都会迫使我们重新计算所有延迟值，以保持动画的原始序列。

解决这个问题的一个更好的方法是使用时间轴来控制动画序列。您必须使用 anime.timeline() 函数在 Anime.js 中创建时间线。您还可以将不同的参数作为对象传递给该函数。这些参数可以指定时间线播放的方向、循环次数以及 autoplay 参数来确定是否应自动播放动画。所有这些参数都已在本系列的参数教程中详细讨论。

您可以使用 add() 方法将不同的动画添加到时间轴。添加到时间线的所有动画将按照添加顺序播放。可以指定绝对或相对偏移值来控制动画的播放顺序。

当使用相对偏移值时，当前动画的开始时间是相对于前一个动画的时间确定的。相对偏移可以分为三种类型：

+=offset：在这种情况下，当前动画会在上一个动画结束后经过 offset 毫秒后开始播放。
-=offset：在这种情况下，当前动画在上一个动画结束前 offset 毫秒开始播放。
*=offset：在这种情况下，当前动画会在前一个动画的动画持续时间的 offset 倍后的毫秒数后开始播放。

以下代码展示了如何创建基本时间线和具有相对偏移值的时间线。

var basicTimeline = anime.timeline({
  direction: "alternate",
  loop: 2,
  autoplay: false
});

basicTimeline.add({
    targets: '.square',
    translateY: 200
 }).add({
    targets: '.red',
    translateY: 100
 }).add({
    targets: '.blue',
    translateY: 0
 });

var offsetTimeline = anime.timeline({
  direction: "alternate",
  loop: 2,
  autoplay: false
});

offsetTimeline.add({
    targets: '.square',
    translateY: 200
 }).add({
    targets: '.red',
    offset: '+=1000',
    translateY: 100
 }).add({
    targets: '.blue',
    offset: '*=2',
    translateY: 0
 });

로그인 후 복사

尝试单击上述演示中的偏移时间线按钮。您将看到红色方块动画结束和蓝色方块动画开始之间有 2 秒的延迟。

我们没有为红方块动画指定 duration 。因此，使用默认值 1000ms 或 1s 作为持续时间。蓝色方形动画的乘数偏移量使该值加倍，这会导致动画延迟两秒。

当使用绝对偏移值时，时间线的起始时间用作参考点。通过对时间线开头发生的动画使用较大的偏移值，可以反转动画的播放顺序。

播放选项

Anime.js 有多种选项可以在任何给定点播放、暂停、重新启动或搜索动画或时间线。

play() 函数允许我们从当前进度开始播放动画。 pause() 函数将在调用该函数时冻结动画。 restart() 函数从头开始播放动画，无论其当前进度如何。 seek(value) 函数可用于将动画提前 value 毫秒数。

您应该记住，play() 函数仅从暂停时恢复动画。如果动画已经结束，则无法使用 play() 重播动画。要重播动画，您必须使用 restart() 函数。

var slowAnimation = anime({
  targets: '.square',
  translateY: 250,
  borderRadius: 50,
  duration: 4000,
  easing: 'linear',
  autoplay: false
});

document.querySelector('.play').onclick = slowAnimation.play;
document.querySelector('.pause').onclick = slowAnimation.pause;
document.querySelector('.restart').onclick = slowAnimation.restart;

var seekInput = document.querySelector('.seek');

seekInput.oninput = function() {
  slowAnimation.seek(slowAnimation.duration * (seekInput.value / 100));
};

로그인 후 복사

请注意，我们没有使用 seekInput.value 来设置查找函数的值。这是因为范围输入的最大值已在标记中设置为 100。直接使用输入范围的值将允许我们最多查找 100 毫秒。将范围输入值乘以动画持续时间可确保我们可以在范围滑块上从头到尾查找动画。