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

有很多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 */
});

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

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

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

  • Property Parameters – 这包括属性相关参数,如durationdelayeasing等。

  • Animation Parameters – 这包括动画相关的参数,如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. 通过将direction属性设置为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-easing来模拟钟摆的自然运动,该运动在峰值时变慢,在底部变快。我们再次使用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属性)。为了达到这个效果,我们需要对每个延迟使用不同的延迟。动画只能使用一个延迟参数,因此在这种情况下,我们将使用基于函数的参数,该参数为每个目标生成不同的值。

为此,我们提供一个具有三个参数(targetindextargetslength)的函数,而不是一个文本值。在我们的例子中,函数返回索引乘以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中的标签。然后,我们创建包含progress属性的battery对象。然后,我们创建两个动画。

除了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()回调中使用它来在动画开始时“打开”框,在动画结束时“关闭”它。让我们来探索一下如何移动另一个方块——内容。

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

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

帧从上到下执行,并对每个具有指定关键帧数组的属性同时启动。一旦开始,旅程将如何继续完全取决于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动画的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » JavaScript 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏