如何使用Anime.js创建Web动画

唯一能阻止您立即使用anime.js的是它最小的、类似于禅的文档。我喜欢简洁、结构化、优雅的方法，但我认为更详细的解释会有帮助。我将在本教程中尝试解决此问题。

Anime.js入门

首先，下载anime.js文件并将其包含在万博manbetx平台页面中：

<script src="path/to/anime.min.js"></script>

或者，可以使用托管在CDN上的库的最新版本：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>

现在，要创建动画，我们使用anime()函数，该函数将一个对象作为参数。在这个对象中，我们描述了所有的动画细节。

let myAnimation = anime({
  /* describe the animation details */
});

有几种用于描述动画的属性。它们分为四个不同的类别：

• Targets – 包括对我们要设置动画的元素的引用。这可以是一个CSS选择器（div，#square，.rectangle），DOM节点或节点列表，也可以是普通的JavaScript对象。还有一个在数组中混合使用以上内容的选项。

• Properties – 包括在处理CSS，JavaScript对象，DOM和SVG时可以设置动画的所有属性和属性。

• Property Parameters – 这包括属性相关参数，如duration，delay，easing等。

• Animation Parameters – 这包括动画相关的参数，如direction，loop等。

现在让我们看看这在实践中如何应用。考虑以下示例：

let animation = anime({
  targets: 'div',
  // Properties 
  translateX: 100,
  borderRadius: 50,
  // Property Parameters
  duration: 2000,
  easing: 'linear',
  // Animation Parameters
  direction: 'alternate'
});

注意：我不打算在教程中介绍代码的万博manbetx平台和css部分。这些往往很容易掌握，没有额外的解释。您可以在每个示例后面的嵌入式笔中查找和浏览万博manbetx平台和CSS。

在上面的示例中：

1. 我们选择绿色正方形（样式为div）。

2. 我们将其向左移动100像素，同时将其转换为一个圆形。

3. 我们将所有这些设置为在两秒钟内顺利完成（这linear意味着不会对动画应用任何缓动）。

4. 通过将direction属性设置为alternate，我们指示div元素在动画完成后返回其初始位置和形状。Anime.js通过以相反的顺序播放动画来实现。

您可能会注意到，指定属性值时我不使用任何单位。这是因为如果原始值具有单位，则会将其自动添加到动画值中。因此，我们可以安全地省略单位。但是，如果要使用特定单位，则必须有意添加它。

让我们创建一些更有意义的东西。

创建钟摆动画

在此示例中，我们将创建一个摆动画。在使用万博manbetx平台和CSS技能“绘制”钟摆之后，是时候将其变为现实了：

let animation = anime({
  targets: '#rod',
  rotate: [60, -60], // from 60 to -60 degrees
  duration: 3000,
  easing: 'easeInOutSine',
  direction: 'alternate',
  loop: true
});

在此动画中，我们使用所谓的“ from to”值类型，该类型定义了动画的移动范围。在我们的例子下，摆杆从60度旋转到-60度。我们还使用easeInOutSine-easing来模拟钟摆的自然运动，该运动在峰值时变慢，在底部变快。我们再次使用alternate选项在两个方向上移动钟摆，并将loop参数设置为true以无休止地重复移动。

做得好。让我们转到下一个示例。

创建电池充电动画

在此示例中，我们要创建一个充电电池的动画图标，类似于智能手机上的图标。使用一点万博manbetx平台和CSS即可轻松实现。这是动画的代码：

let animation = anime({
  targets: '.segment',
  width: 20,
  duration: 300,
  delay: function(el, i, l) {
    return i * 500;
  },
  endDelay: 500,
  easing: 'linear',
  loop: true
});

在这里，我们有三个段（绿色div元素），它们依次展开（通过增加width属性）。为了达到这个效果，我们需要对每个延迟使用不同的延迟。动画只能使用一个延迟参数，因此在这种情况下，我们将使用基于函数的参数，该参数为每个目标生成不同的值。

为此，我们提供一个具有三个参数（target、index和targetslength）的函数，而不是一个文本值。在我们的例子中，函数返回索引乘以500毫秒，这将导致每个元素在前一个元素之后半秒开始设置动画。

我们还使用enddelay参数在动画再次开始之前暂停片刻。

改善电池充电动画

现在，动画看起来不错，但是让我们添加一个显示收费百分比的进度标签来改进它。代码如下：

let progress = document.querySelector('#progress');

let battery = {
  progress: '0%'
}

let icon = anime({
  targets: '.segment',
  width: 20,
  duration: 300,
  delay: anime.stagger(500),
  endDelay: 500,
  easing: 'linear', 
  loop: true
});    

let label = anime({
  targets: battery,
  progress: '100%',
  duration: 30000,
  easing: 'linear',
  round: 1, 
  update: function() {
    progress.inner万博manbetx平台 = battery.progress
  },
  complete: function() {
    icon.pause();
    icon.seek(icon.duration);
  }  
});

这个例子还介绍了几个库特性。我们会一个一个地探索。

首先，我们创建一个progress变量，它引用万博manbetx平台中的标签。然后，我们创建包含progress属性的battery对象。然后，我们创建两个动画。

除了delay参数外，第一个动画几乎与前面的示例相同。在这里，我们将使用anime.js功能，它允许我们一次设置多个元素的动画。为此，我们使用anime.stagger()函数。在我们的例子中，anime.stagger(500)的工作原理与基于函数的参数类似——它在每个元素动画之前添加50毫秒的延迟。

在第二个动画中，我们使用battery对象作为目标。然后我们将progress属性设置为100%动画。round参数将动画值舍入到给定的小数点。把它设为1，我们就得到了整数。

接下来，我们使用Anime.js提供的两个回调。

要将来自万博manbetx平台的进度标签值与battery进度值绑定，我们使用update()回调。我们还使用complete()回调函数在进度等于100%之后停止动画，并使用seek()方法将动画设置为完成状态。

结果，将播放充电动画，直到进度变为100％，然后它将停止并将片段强制为其最终动画状态。该图标将显示为已充满电。

用关键帧创建更复杂的动画

到目前为止，我们已经处理了将对象从A移到B的单步动画。但是，如何将对象从A移到B到C移到D呢？

在下一个示例中，我们将探索如何使用属性关键帧创建多步动画。我们将在另一个作为盒子的正方形周围移动一个简单的正方形。

let box = document.querySelector('#box');

let animation = anime({
  targets: '#content',   
  translateY: [
    {value: 50, duration: 500},
    {value: 0, duration: 500, delay: 1500},  
    {value: -53, duration: 500, delay: 500},
    {value: 0, duration: 500, delay: 2500},
    {value: 50, duration: 500, delay: 500},
    {value: 0, duration: 500, delay: 1500}  
  ],
  translateX: [
    {value: 53, duration: 500, delay: 1000},
    {value: 0, duration: 500, delay: 2500},
    {value: -53, duration: 500, delay: 500},
    {value: 0, duration: 500, delay: 2500} 
  ],
  easing: 'linear',   
  begin: function() { 
    box.style.borderBottom="none";  
  },
  complete: function() {
    box.style.borderBottom="solid darkorange 3px";     
  }
});

首先，我们创建对box元素的引用。我们在begin()和complete()回调中使用它来在动画开始时“打开”框，在动画结束时“关闭”它。让我们来探索一下如何移动另一个方块——内容。

对于要设置动画的每个属性，我们使用对象数组，其中每个对象描述一个特定的关键帧。

在我们的例子中，我们想垂直和水平移动正方形。因此，我们使用translateY和translateX属性，并为每个属性提供关键帧数组。创建正确运动的技巧是正确计算duration和delay参数--这可能很棘手！

帧从上到下执行，并对每个具有指定关键帧数组的属性同时启动。一旦开始，旅程将如何继续完全取决于duration和delay参数的设置方式。祝计算顺利!

我们动画的结果是方块离开了盒子，绕着它转了一圈，然后又回到了里面。

创建文本效果

我们在上面已经看到了一个惊人的例子，现在我们将探索更高级的用法。我们将使用交错创建漂亮的文字效果。

let animation = anime({
  targets: '.letter',
  opacity: 1,
  translateY: 50, 
  rotate: {
    value: 360,
    duration: 2000,
    easing: 'easeInExpo'
  }, 
  scale: anime.stagger([0.7, 1], {from: 'center'}), 
  delay: anime.stagger(100, {start: 1000}), 
  translateX: [-10, 30]
});

我们把每个字母放在一个span元素中。在动画代码中，我们选择所有字母，使它们可见，并将它们向下移动50个像素。

然后，我们使用一个特定的属性参数来旋转字母，该属性参数为给定的属性定义了特定的参数。这使我们可以更详细地控制动画。在这里，字母将在两秒钟内旋转360度，应用easeensio easing。

在接下来的两个属性中，我们使用了stagger()函数。我们将比例设置为均匀分布，从0.7到1的不透明度(使用范围值类型)，从中心开始(使用起始位置选项)。这使得句子中间的字母更小，两端的字母更大。

我们将动画设置为在开始前等待一秒钟（通过定义开始值），然后相对每个字母添加100毫秒的延迟。

我们有意在末尾添加translateX属性以创建所需的效果，即以螺旋运动旋转字母。

使用时间线创建动画

时间轴使您可以一起操纵多个动画。让我们来看一个简单的例子：

let animation = anime.timeline({
  duration: 1000, 
  easing: 'easeInOutSine',
  direction: 'alternate',  
  loop: true
});           

animation.add({
  targets: '.one',
  translateY: -50,
  backgroundColor: 'rgb(255, 0, 0)'
}).add({
  targets: '.two',
  translateY: -50,
  backgroundColor: 'rgb(0, 255, 0)'
}).add({
  targets: '.three',
  translateY: -50,
  backgroundColor: 'rgb(0, 0, 255)'
});

在此示例中，我们创建一个球形微调器。

要创建时间线，我们使用anime.timeline()函数。然后，我们定义所有添加的动画都继承的通用参数。

要将动画添加到时间轴，我们使用add()方法，然后以已经介绍的相同方式描述动画。

在我们的示例中，我们添加了三个动画，每个动画一个。结果是每个球一个一个地上升和下降。

问题在于，以这种基本形式，动画看起来非常静态。让我们改变它。

默认情况下，每个动画在上一个动画结束后开始。但是我们可以通过使用时间偏移来控制这种行为。另外，如果我们想使动画更加灵活和复杂，则必须使用动画关键帧。在下面的示例中，让我们看看这是如何应用的：

let animation = anime.timeline({
  duration: 1000, 
  easing: 'easeInOutSine',   
  loop: true
});           

animation.add({
  targets: '.one',
  keyframes: [
    {translateY: -50, backgroundColor: 'rgb(255, 0, 0)' },
    {translateY: 0, backgroundColor: 'rgb(128, 128, 128)'}
  ]
}).add({
  targets: '.two',
  keyframes: [
    {translateY: -50, backgroundColor: 'rgb(0, 255, 0)' },
    {translateY: 0, backgroundColor: 'rgb(128, 128, 128)'}
  ]
}, '-=900').add({
  targets: '.three',
  keyframes: [
    {translateY: -50, backgroundColor: 'rgb(0, 0, 255)' },
    {translateY: 0, backgroundColor: 'rgb(128, 128, 128)'}
  ]
}, '-=800');

在这里，我们删除了direction参数，因为我们使用关键帧来实现前后移动。我们通过添加keyframes参数来定义动画关键帧。与属性关键帧一样，阵列中的每个对象都是关键帧。

为了使球平稳移动，我们使用时间偏移量，它被指定为add()函数的第二个参数。在我们的例子中，我们使用相对于前一个动画的值。

结果是平滑的球形微调器动画。

结论

我希望你对anime.js有了更好的理解。为了继续学习这些基础知识，我建议。

英文原文地址：https://www.sitepoint.com/get-started-anime-js/

以上就是如何使用Anime.js创建Web动画的详细内容，更多请关注万博manbetx平台中文网其它相关文章！