js移动动画-js动画效果animate 收藏 0

创建优质动画的14个JavaScript库

随着JavaScript技术的不断发展，它的动画库也如雨后春笋般层出不穷。本文介绍一些实用的JavaScript动画库，希望它们能帮助你创建出令人着迷的用户体验！

Bounce.js是一个用于制作漂亮的CSS3关键帧动画的JavaScript库，使用其特有的方式生成的动画效果。只需添加一个组件，选择预设，然后你就可以得到一个短网址或者导出为CSS代码。

Snabbt.js是一个简约快速的JavaScript动画库。它侧重围绕元素进行移动，能够平移、旋转、缩放和调整元素。通过矩阵乘法操作，转换可以以任何你想要的方式进行组合。最终，将通过CSS3转换矩阵呈现页面结果。

Rekapi是一款JavaScript关键帧动画库。它提供了一套API让你可以定义关键帧动画并控制动画播放。Rekapi并未指定渲染行为。事实上，Rekapi的内核并未执行任何渲染操作。它提供了一个API来定义渲染器，标准的发行包包括HTML DOM和HTML5 2D Canvas渲染器模块。

Shifty是建立在JavaScript里一个渐变动画引擎，目的是适应任何数量的渐变动画的需求。

Tween.js是一款可生成平滑动画效果的js动画库。Tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。

Velocity.js是velocity模板语法的javascript实现。Velocity模板适用于大量模板使用的场景，支持复杂的逻辑运算，包含基本数据类型、变量赋值和函数等功能。Velocity.js支持Node.js和浏览器环境。

Move.js是一款简单小巧的模拟CSS3动画的js插件。该插件可以完成CSS3的各种动画效果：移动、变形、倾斜、背景色渐变、旋转等，并且可以在动画中使用各种easing效果。

本站文章除注明转载外，均为本站原创或翻译

实用的CSS动画实例分享，让你的网页更生动有趣

在现代网页设计中，视觉效果的优劣直接影响用户的体验和留存率；而随着技术的发展，CSS动画已经成为打造动感和吸引力网页的重要工具；无论是简单的颜色渐变，还是更进一步的旋转和翻转效果，CSS动画都能为你的设计增添亮点，使网页更加生动和互动

在博文中，我们了解的构建CSS动画的属性基础

在本篇中，将通过几个有趣的动画实例，助你更牢固地掌握CSS动画的技巧

CSS动画主要由过渡和动画属性与关键帧组成，合理地运用它们，不仅能增强视觉吸引力，还能提升用户体验，让网页更加生动和互动

拟态风是近年来在网页设计中流行的一种视觉风格，它结合了扁平设计和真实感设计的优点，通过巧妙地使用阴影和高光，使界面元素看起来既有立体感又简洁优雅

在拟态风的设计中，CSS动画同样扮演着重要角色，通过动画，拟态风界面变得更加生动和互动，例如，按钮的按压效果、输入框的聚焦等，都可以通过CSS动画来实现

以下为一个简单的拟态风表单展示：

左右两个表单结构一致，但左侧没有添加过渡，右侧添加了过渡

可以较为明显地看出，没有过渡的表单交互是比较生硬的，添加过渡后，交互变得更加生动，给人一种真的能够按下去的感觉，交互体验更优

代码如下

• HTML

• CSS

主要就是通过box-shadow属性设置不同状态时展示不同的阴影效果，然后通过transition设置box-shadow为过渡属性，让不同状态间的阴影效果过渡自然

关于box-shadow的过渡，只能是外阴影向外阴影过渡，内阴影(inset)向内阴影过渡，外阴影和内阴影交叉过渡是无效的

逐帧动画是CSS动画中的一种特殊效果，通过将动画分割成多个步骤，使元素在每一步骤之间进行离散的变化，与平滑过渡的动画不同，逐帧动画可以实现类似老式电影或动画的“跳帧”效果，非常适合用于图标闪烁、数字翻页、个性化较强的动画等场景

实现这种动画效果，主要需要借助一个CSS函数：steps，其接收两个参数，如下：

• step：(必需)阶梯数，表示动画分成多少步，将动画的总时长按照阶梯数等距划分
• direction：(可选)步进位置，定义每一步发生的时间点
• end：(默认)表示每个步骤在时间间隔的结束处发生，即动画在每个时间间隔的末尾跳变
• start：表示每个步骤在时间间隔的开始处发生，即动画在每个时间间隔的开头跳变

如下，是运用该函数制作的一些逐帧动画效果

代码如下

• HTML

• CSS

其中ma-steps.png是类似下面的逐帧分解图

使用steps() 函数，可以将动画分割成离散的步骤，使动画在这些步骤之间跳变，通过调整步数和步进位置参数，可以精确控制动画的行为，创建各种独特的、个性化更强的视觉效果

使用animation可以实现很多丰富有趣的动画，如：地球自转

我们只需要准备一张如下的地球平面图

然后给它加上一点移动动画和CSS样式，即可形成如下的酷炫效果

代码如下

• HTML

• CSS

篇幅有限，这里就不介绍太多案例，总之，CSS动画是一种强大的工具，能够在网页设计中添加动感和互动性；对比早先的依赖JS实现的动画而言，其通过纯CSS实现的动画效果，不仅可以提升用户体验，还能极大地提高网页性能和加载速度

无论是简单的渐变、缩放、旋转动画，还是复杂的逐帧动画，都能够通过CSS来实现

设计一个有趣、美观的动画，不仅要有好的创意，选择合适的速度曲线和动画时长也是极为重要的

在做平滑连续的动画时，不同的速度曲线可以实现不同的丰富效果，有时，一个普通的线性平移动画，只需改动使用合适的cubic-bezier()曲线，即可变成复杂的回弹动画

动画时长对于动画而言也是相当重要的，如不同类型的动画就要使用不同的动画时长，如：按钮点击动画的时长最好设置在200-300ms之间，由于按钮点击是一个比较短暂的过程，设置太长会显得卡顿或者反应延迟，太短会看不出效果，一般情况下，普通人的反应时间就在200-300ms之间

如下是一个测试反应时间的网页，感兴趣的可以去试试

网址：https://reaction.ltgcm.top

继续探索和实践CSS动画，可以发现它的无限可能性，能够为你的设计作品注入新的活力和创意，无论是为按钮添加动态效果，还是为页面元素创建复杂的交互动画，CSS动画都是不可或缺的利器

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com