有许多 JavaScript 动画库,但Anime.js是最好的之一。它易于使用,有一个小而简单的 API,并提供了现代动画引擎所需的一切。该库文件较小,支持所有现代浏览器,包括 IE/Edge 11+。

唯一可以阻止您立即使用 Anime.js 的是其极简的、类似禅宗的文档。我喜欢它采用的紧凑、结构化、优雅的方法,但我认为更详细的解释会有所帮助。我将尝试在本教程中解决此问题。

开始使用 Anime.js

要开始使用,请下载该anime.js文件并将其包含在您的 HTML 页面中:

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

或者,您可以使用托管在 CDN 上的最新版本的库:

<script src="https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js"></script>

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

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

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

  • 目标——这包括对我们想要动画的元素的引用。它可以是 CSS 选择器 ( div, #square, .rectangle)、DOM 节点或节点列表,或纯 JavaScript 对象。还可以选择在数组中混合使用上述内容。
  • 属性——这包括在处理 CSS、JavaScript 对象、DOM 和 SVG 时可以动画的所有属性和属性。
  • 属性参数– 这包括与属性相关的参数,如durationdelayeasing等。
  • 动画参数– 这包括与动画相关的参数,如directionloop等。

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

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

注意:我不会在教程中介绍代码的 HTML 和 CSS 部分。这些往往很容易掌握,无需额外解释。您可以在每个示例后面的嵌入式笔中找到并探索 HTML 和 CSS。

在上面的例子中:

  1. 我们选择绿色方块(样式div)。
  2. 我们将其向左移动 100 像素,同时将其转换为圆形。
  3. 我们将所有这些设置为在两秒内顺利进行(linear意味着不会对动画应用缓动)。
  4. 通过将方向属性设置为alternate,我们指示div元素在动画完成后返回其初始位置和形状。Anime.js 通过以相反的顺序播放动画来做到这一点。

您可能会注意到我在指定属性值时没有使用任何单位。那是因为如果原始值有一个单位,它会自动添加到动画值中。所以,我们可以放心地省略单位。但是如果我们想使用一个特定的单位,我们必须有意识地添加它。

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

创建钟摆动画

在本例中,我们将创建一个钟摆动画。在我们使用 HTML 和 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缓动来模拟钟摆的自然运动,它在峰值处减慢并在底部变快。我们alternate再次使用该选项在两个方向上移动钟摆,并将loop参数设置true为无休止地重复运动。

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

创建电池充电动画

在这个例子中,我们想要创建一个充电电池的动画图标,类似于我们智能手机上的图标。这很容易通过一些 HTML 和 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.innerHTML = battery.progress
  },
  complete: function() {
    icon.pause();
    icon.seek(icon.duration);
  }  
});  

这个例子介绍了更多的库特性。我们将一一探索。

首先,我们创建一个progress变量,它引用 HTML 中的标签。然后我们创建battery持有该progress属性的对象。然后,我们创建两个动画。

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

在第二个动画中,我们使用battery对象作为目标。然后我们将progress要动画的属性设置为 100%。该round参数将动画值四舍五入到给定的小数。通过将其设置为 1,我们得到整数。

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

要将 HTML 中的进度标签值与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参数的方式。祝你计算顺利!

我们动画的结果是正方形离开了盒子,绕着盒子绕了一圈,然后再次进入里面。

创建文本效果

我们已经在上面看到了一个惊人的例子,现在我们将探索更高级的用法。我们将使用 staggering 创建一个很酷的文本效果。

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 度,应用easeInExpo缓动。

在接下来的两个属性中,我们使用该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()函数的第二个参数。在我们的例子中,我们使用相对于前一个动画的值。

结果是平滑的球旋转动画。

加客服微信:qsiq17,开通VIP下载权限!VIP全站资源免费下载!!!