확장된 매개변수: Anime.js를 사용한 JavaScript 기반 애니메이션, 2부-Word누르다-php.cn

확장된 매개변수: Anime.js를 사용한 JavaScript 기반 애니메이션, 2부

Anime.js 시리즈의 첫 번째 튜토리얼에서는 애니메이션을 적용할 대상 요소를 지정하는 다양한 방법과 애니메이션을 적용할 수 있는 CSS 속성 및 DOM 속성 유형에 대해 배웠습니다. 이전 튜토리얼의 애니메이션은 매우 기본적이었습니다. 모든 대상 요소는 단순히 특정 거리를 이동하거나 고정된 속도로 경계 반경을 변경합니다.

때로는 좀 더 리드미컬한 방식으로 대상 요소에 애니메이션을 적용해야 할 수도 있습니다. 예를 들어, 각 요소의 애니메이션 시작 사이에 500ms의 지연을 두고 왼쪽에서 오른쪽으로 이동하려는 10개의 서로 다른 요소가 있을 수 있습니다. 마찬가지로 각 요소의 위치에 따라 애니메이션 지속 시간을 늘리거나 줄일 수도 있습니다.

이 튜토리얼에서는 Anime.js를 사용하여 특정 매개변수를 사용하여 다양한 요소의 애니메이션 시간을 정확하게 맞추는 방법을 배웁니다. 이를 통해 개별 요소 또는 모든 요소에 대한 애니메이션 시퀀스의 재생 순서를 제어할 수 있습니다.

속성 매개변수

이러한 매개변수를 사용하면 단일 속성 또는 속성 그룹의 지속 시간, 지연 및 완화를 한 번에 제어할 수 있습니다. duration 和 delay 매개변수는 밀리초 단위로 지정됩니다. 기간의 기본값은 1000밀리초 또는 1초입니다.

즉, 달리 지정하지 않는 한 요소에 적용된 모든 애니메이션은 1초 동안 재생됩니다. delay 매개변수는 트리거 후 애니메이션이 시작되는 데 걸리는 시간을 지정합니다. 지연의 기본값은 0입니다. 이는 애니메이션이 트리거되자마자 시작된다는 의미입니다.

easing 매개변수를 사용하여 활동 중 애니메이션이 재생되는 속도를 제어할 수 있습니다. 일부 애니메이션은 느리게 시작했다가 중간에 속도가 빨라졌다가 끝 부분에서 다시 느려집니다. 다른 사람들은 빠르게 시작한 다음 나머지 부분에서는 속도를 늦춥니다.

그러나 모든 경우에 애니메이션은 항상 duration 参数指定的时间内完成。 Anime.js 提供了许多缓动函数，您可以仅使用元素的名称直接将它们应用于元素。对于某些缓动函数，您还可以为 elasticity 매개변수를 사용하여 값을 설정하여 요소 값이 스프링처럼 앞뒤로 튀는 정도를 제어합니다.

이 시리즈의 마지막 튜토리얼에서 다양한 여유 기능에 대해 자세히 알아보세요. 다음 코드 조각은 이러한 모든 매개변수를 다양한 애니메이션에 적용하는 방법을 보여줍니다.

으아악

보시다시피 이러한 매개변수는 다른 매개변수와 독립적으로 또는 조합하여 사용할 수 있습니다. cubicAnimation은 duration 및 cubicAnimation 同时应用了 duration 和 easing 매개변수를 모두 적용합니다. 지속 시간을 지정하지 않으면 애니메이션이 1초 동안 실행됩니다. 이제 1,200밀리초 또는 1.2초 동안 실행됩니다.

위 예에서 속성 매개변수의 주요 제한 사항은 대상 요소의 모든 애니메이션이 동일한 기간, duration、delay 和 easing 및 easing 값입니다.

이것은 원하는 동작일 수도 있고 아닐 수도 있습니다. 예를 들어, 대상 요소의 테두리 반경을 동시에 패닝하고 변경하는 대신 먼저 대상 요소를 변환한 다음 테두리 반경에 애니메이션을 적용할 수 있습니다. Anime.js를 사용하면 각 속성의 duration, duration、delay、easing 和 指定不同的值各个属性的elastic,

및 elastic 매개변수에 대해 서로 다른 값을 지정할 수 있습니다. 아래 코드와 데모를 보면 더 명확해집니다.

으아악

위 코드에서 애니메이션을 적용하려는 모든 속성은 서로 다른 값을 갖습니다. 배경색 애니메이션의 지속 시간은 400ms인 반면 회전 및 패닝 애니메이션은 1500ms의 전역 지속 시간 값을 사용합니다.

rotate 和 translateY 属性使用 delay 和 easing배경 색상 애니메이션도 지연되므로 색상 변경은 1500밀리초가 지난 후에만 시작됩니다. rotate 및 translateY 속성은 로컬 또는 글로벌 값을 제공하지 않으므로

및

매개변수의 기본값을 사용합니다. 그들에게는 가치가 있습니다.

🎜🎜

基于函数的参数

当您想要更改单个属性的动画顺序和持续时间时，基于属性的参数非常有用。但是，相同的 duration 和 delay 仍将应用于所有目标元素上的各个属性。基于函数的参数允许您单独指定 duration、delay、elasticity 和 easing以紧凑的方式针对不同的目标元素。

在这种情况下，您可以使用函数而不是数字来设置不同参数的值。这些函数接受三个参数：target、index 和 targetCount。 target 参数存储对当前目标元素的引用。 index 参数存储当前目标元素的索引或位置。 targetCount 参数存储目标元素的总数。

当需要根据目标元素的某些属性设置动画值时，target 参数非常有用。例如，您可以将目标元素的 delay、duration 或 easing 值存储在数据属性中，然后稍后访问它们.

类似地，您可以访问目标元素的背景颜色，然后操作它来为各个元素设置最终的唯一颜色值。通过这种方式，您可以对所有元素进行动画处理，使其背景颜色比当前颜色深 20%。

index 参数为您提供当前目标在目标元素列表中的位置。您可以使用它逐步更改不同元素的 duration 和 delay 等参数的值。

当您想要按升序设置值时，这通常很有用。您还可以从 targetCount 中减去 index 以按降序设置值。以下代码片段使用这两个参数来按升序和降序指定值。

var delaySequence = anime({
  targets: '.square',
  translateY: 250,
  delay: function(target, index) {
    return index * 200;
  }
});

var delaySequenceR = anime({
  targets: '.square',
  translateY: 250,
  delay: function(target, index, targetCount) {
    return (targetCount - index) * 200;
  }
});

로그인 후 복사

以下代码使用 index 参数为每个目标元素设置不同的 easing 值。

var easeInValues = ['easeInQuad', 'easeInCubic', 'easeInQuart', 'easeInQuint', 'easeInSine', 'easeInExpo', 'easeInCirc', 'easeInBack', 'easeInElastic'];

var easeInSequence = anime({
  targets: '.square',
  translateY: 250,
  duration: 2000,
  easing: function(target, index) {
    return easeInValues[index];
  },
  autoplay: false
});

로그인 후 복사

动画参数

最后一组参数允许您指定动画应播放的次数以及播放的方向。您可以使用loop参数指定动画播放的次数。还有一个 autoplay 参数，可以设置为 true 或 false。它的默认值为 true，但您可以通过将其设置为 false 来阻止动画自行启动。

direction 参数控制动画播放的方向。它可以具有三个值：normal、reverse 和 alternate。默认值为 normal，它使动画从开始值到结束值正常播放。一旦目标元素达到结束值，如果 loop 值大于 1，目标元素会突然跳回起始值，然后再次开始动画。

当direction 设置为reverse 并且loop 值大于1 时，动画将反转。换句话说，目标元素从最终状态开始动画，然后向后到达初始状态。一旦它们处于初始状态，元素就会跳回到最终状态，然后再次开始反向动画。 alternate 方向值会在每次循环后更改动画方向。

var normalLoop = anime({
  targets: '.square',
  translateY: 250,
  delay: function(target, index) {
    return index * 200;
  },
  loop: 4,
  easing: 'easeInSine',
  autoplay: false
});

로그인 후 복사

在下面的演示中，我将循环次数设置为四，以便您可以轻松注意到不同模式下元素动画的差异。

使用 `stagger()` 方法

到目前为止，在本教程中，我们已经使用函数将不同的值传递给目标元素的动画延迟或持续时间。您还可以借助 Anime.js 中的 stagger() 方法获得相同的功能。

stagger() 方法基本上允许您控制动画如何在多个元素上发生。它接受两个参数。第一个是您想要应用的值，第二个是一个带有一堆参数的对象，这些参数决定如何应用交错。

下面是一个示例，展示 stagger() 如何与我们到目前为止编写的常规函数进行比较：

// A function to introduce animation delay in elements.
delay: function(target, index) {
    return index * 200;
}

// The stagger() Equivalent
delay: anime.stagger(200);

로그인 후 복사

您现在可能会问是否有一种方法可以反向应用动画延迟，就像我们对函数所做的那样。是的，这绝对是可能的。这是一个例子：

// Reversing the delay direction
delay: function(target, index, targetCount) {
    return (targetCount - index) * 200;
}

// Equivalent functionality with stagger()
delay: anime.stagger(200, {"direction": "reverse"})

로그인 후 복사

我们可以类似地对动画持续时间应用交错。由于交错，前面示例中第一个元素的延迟值被设置为 0，这也是我们想要做的。但是，第一个元素的动画持续时间必须非零。否则，页面加载后就会处于结束阶段。

可以借助 start 参数设置第一个元素的动画的非零持续时间，该参数设置为 1000 以达到惊人效果。这是一个例子：

// Duration starts at 1000 and increases by 800
duration: function(target, index) {
    return 1000 + index * 800;
}

// Equivalent functionality with stagger()
duration: anime.stagger(800, {"start": 1000})

로그인 후 복사

如果在开始最后一个元素时必须应用非零持续时间值怎么办？在这种情况下，我们可以对 stagger() 方法使用以下参数：

// A non-zero duration in reverse direction
duration: function(target, index, targetCount) {
    return 1000 + (targetCount - index) * 800;
}

// Equivalent functionality with stagger()
duration: anime.stagger(800, {"start": 1000, "direction": "reverse"})

로그인 후 복사

以下 CodePen 演示的所有操作与“基于函数的参数”部分下的示例类似，但它使用 stagger() 方法来执行此操作。正如您所看到的，最终结果没有任何区别。

我想指出的一件事是交错方法在旧版本的库中不起作用。确保您使用的是最新版本以避免任何错误。