使用 Anime.js 创建网页动画

有许多 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 时可以动画的所有属性和属性。
• 属性参数– 这包括与属性相关的参数，如duration、delay、easing等。
• 动画参数- 这包括与动画相关的参数，如direction、loop等。

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

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()函数的第二个参数。在我们的例子中，我们使用相对于前一个动画的值。

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

js代码实现水平移动与垂直移动效果方法

今天wpmee小编为大家分享一个js代码实现水平移动与垂直移动效果方法，感兴趣的朋友可以尝试一下。

水平移动分析：

可看成是一个物体的左边距变化。

比如：向右移动是左边距越来越大（数值为正），可调整物体的左边距来实现

向左移动是左边距越来越小（数值为负），可调整物体的左边距来实现

实际代码如下：

<style>
*{padding: 0;margin: 0px;}
#box{width: 100px;height: 100px;border-radius: 50%;background: red;position: absolute;top: 50px;left: 0;}
</style>
<body>
<button id=\"btn\">向右</button>
<button id=\"btn1\">向左</button>
<div id=\"box\"></div>
<script>
var box=document.getElementById(\'box\');
//速度
var index=10;
//定时器编号
var b;
//添加向右点击事件
document.getElementById(\'btn\').onclick=function(){
clearInterval(b);//清除上一个定时器执行的事件
b=setInterval(getMove,100,index);//每100毫秒执行一次getMove函数
}
//添加向左点击事件
document.getElementById(\'btn1\').onclick=function(){
clearInterval(b);//清除上一个定时器执行的事件
b=setInterval(getMove,100,-index);//每100毫秒执行一次getMove函数
}
//box移动位置
function getMove(index){
//获取box的左距离
var a=window.getComputedStyle(box,null).left;
a=parseInt(a);//转换为数值
box.style.left=a+index+\'px\'//计算box的左距离
}
</script>
</body>

垂直移动分析：

可看成是一个物体的上边距变化。

比如：向下移动是上边距越来越大（数值为正），可调整物体的上边距来实现

向上移动是上边距越来越小（数值为负），可调整物体的上边距来实现

实际代码如下：

<style>
*{padding: 0;margin: 0px;}
#box{width: 100px;height: 100px;border-radius: 50%;background: red;position: absolute;top: 50px;left: 0;}
</style>
<body>
<button id=\"btn\">向下</button>
<button id=\"btn1\">向上</button>
<div id=\"box\"></div>
<script>
var box=document.getElementById(\'box\');
//速度
var index=10;
//定时器编号
var b;
//添加向下点击事件
document.getElementById(\'btn\').onclick=function(){
clearInterval(b);//清除上一个定时器执行的事件
b=setInterval(getMove,100,index);//每100毫秒执行一次getMove函数
}
//添加向上点击事件
document.getElementById(\'btn1\').onclick=function(){
clearInterval(b);//清除上一个定时器执行的事件
b=setInterval(getMove,100,-index);//每100毫秒执行一次getMove函数
}
//box移动位置
function getMove(index){
//获取box的上距离
var a=window.getComputedStyle(box,null).top;
a=parseInt(a);//转换为数值
box.style.top=a+index+\'px\'//计算box的上距离
}
</script>
</body>

以上就是js代码实现水平移动与垂直移动效果方法的详细内容。