文档结构  
翻译进度:已翻译     翻译赏金:10 元 (?)    ¥ 我要打赏

Animation libraries.

快来参与 CSS 动画界泰斗 Donovan Hutchinson 开设的 CSS 动画课程来提升你的 CSS 动画制作能力吧。

前端 web 设计在过去十年经历了一场变革。在 2007 年,我们大部分设计者还在设计静态的杂志布局 —— 但到了 2017 年,我们却在使用数千个可缩放、可调节、可移动的模块构建“数字机器”。

很明确的是,伟大的 UI 设计者也需要是一位伟大的动画制作者 —— 随着对 web 动画技术有着越来越深刻的认识。

本指南是最新更新的,可以帮助你为每个任务选择合适的动画库。我们将介绍最适合 UI 设计工作,并且有着良好编程的 9 个免费动画库 —— 阐述他们的优缺点和正确的使用场景。

第 1 段(可获 1.56 积分)

请记住,我们是作为懂代码的设计师——而不是像“代码大师”的开发人员,来看每一个库。其中一些库是纯 CSS。其它的是 JavaScript,但是没有什么比理解基本的 HTML/CSS 更有用。连接(link)库——添加 CSS 类。

这个作者的更多文章

2017 年最好的 9 个动画库

  1. Animate.css
  2. Bounce.js
  3. AnimeJS
  4. Magic Animations
  5. DynCSS
  6. CSShake
  7. Hover.CSS
  8. Velocity.js
  9. AniJS
第 2 段(可获 1.24 积分)

Animate.css

Animate.css是可用的最轻巧也易于使用的CSS动态库之一。 在你的项目中添加 Animate库和链接CSS并且在HTML元素中添加所需的CSS类一样简单。如果你愿意,你还可以使用jQuery在某个特定时间触发动画。

Animate.css

第 3 段(可获 1.14 积分)

截止至 2017 年中,Animate.css 仍然是最受欢迎以及使用最广泛的 CSS 动画库之一,并且其压缩包只有 16.6kb,很适合放在移动版网站。Animate.css 在 Github 上有 41,000 个 stars,也经常被打包为一些大型项目的组件。

Animate.css 在发布 4 年后仍然还在积极开发。这是最简单、最健壮的动画库之一,我们可以毫不犹豫的在项目中使用。

Bounce.js

Bounce.js 是一个 JavaScript 动画库,专注于为网站提供一个具有独特乐趣、有弹性、“华纳兄弟式”的动画效果。

第 4 段(可获 1.33 积分)

Bounce.js

Bounce.js是一个灵巧的动画库,附有大约十个动画“pre-sets” - 因此这个库很小。与animate.css一样,动画流畅而完美。如果您的需求围绕“流行和气泡”风格的动画类型,您可能需要考虑使用此库,并可以从较低的文件大小开销中受益。

AnimeJS

第 5 段(可获 1.1 积分)

AnimeJS 是我们列表中唯一的后起之秀,并且自从创建之日至今的12个月中已经赢得了许多重大的转变。它具功能多且强大而且支持HTML游戏动画。其唯一真正的问题是:对于一般的网络应用程序是不是矫枉过正了?

或许有此类问题的存在,但是因为它快而小,学习起来相对简单的特点,发现其中的错误还是比较困难的。

AnimeJS被描述为一种轻量级的Java描述语言动画库,用于任何的CSS属性,单独的CSS转换,SVG或者任何的DOM属性,以及Java描述语言对象。它是相当的棒太棒了,实际上,我下面使用的GIF捕获不能够公正的评价运动的流畅与自然。

 

第 6 段(可获 1.58 积分)

AnimeJS

这个项目可以在GitHub上。

最令人印象深刻的是,Anime.JS具有令人惊叹的“文档”,在美丽的应用程序环境中演示HTML,JavaScript代码和工作示例。

简而言之,如果您喜欢JavaScript动画解决方案,很难找到忽略Anime.JS的原因。

魔术动画

Magic 动画一直是令人印象深刻的动画库。它有许多不同的动画,其中很多是这个库所独有的。 与Animate.css一样,您可以通过简单导入CSS文件来实现Magic 。你也可以使用jQuery的动画。这个项目提供了一个特别酷的演示应用程序。

第 7 段(可获 1.59 积分)

Magic Animations

Magic动画与animate.css相比文件大小适中,它的以特征性动画而闻名, 如:magic 效果, foolish 效果, 和 bomb效果.

如果你正在寻找一些不寻常的东西,我肯定会建议你在你的下一个项目中使用这个动画库。你不会失望的。

DynCSS

DynCSS是一个动画库,您可能希望在您的网站中使用视差效果。 为了更清楚地了解如何使用这个库,请看一下这个 演示.

第 8 段(可获 1.51 积分)

DynCSS

DynCSS 是一个简单的库,它会在不久的将来受到更多关注,但目前从其 Github 上的标星来看,它还是一个相当新的项目。这个库中有一个非常酷的特性是根据滚动来旋转元素,这是 Vittorio 在 DynCSS 漂亮的主页上展示出来的(这是视差相关页面的一个完美用例)。

第 9 段(可获 1.16 积分)

CSShake

CSShake 就像它的名称说的一样 —— 它是专门用来为你的主页为页面元素添加晃动效果的 CSS 库。正如你所想,它有相当多的变化用于抖动你的 Web 组件。

CSShake

苹果使晃动 UI 元素(对话框、模态框或文本框) 这种活泼的效果得以流行,这是在用户输入不正确时的一种反馈 —— 仿佛是一个人在摇着头说“不对”。CSShake 提供了一系列的“晃动”动态,并且在这个库中有着丰富的变化。

第 10 段(可获 1.28 积分)

虽然现在这个库比 DynCSS 更受欢迎,但我觉得与其提供的功能相比,其文本大小并不合理。虽然动画足够聪明,但我仍然想不到大量需要使用它但不需要使用非晃动效果的场景。

不过也许我只是缺乏想象力?

Hover.css

Hover.css 是一个 CSS 动画库,它被设计用在网站的按钮和其它 UI 元素上。它有非常好的 2D 转换效果,还有许多精心设计的动画。

Hover.css

  • 当前版本:
  • 受欢迎程度:
  • 说明: “易于应用于你的元素,可用于修改或只是找找感觉。”
  • 库大小: 104.2 kB
  • GitHub: https://github.com/IanLunn/Hover
  • 许可证:
第 11 段(可获 1.54 积分)

Hover.css 最适用于单个页面元素的动画,例如按钮,logo,SVG组件或是特征图片,而不适用于更大,复杂的页面动画。 它有一个全面的例程列表,而这占用了相当大的尺寸(然而,我依然感觉该尺寸可以进行更多的优化)。 当然,它最值得注意的动画效果是其独特的语音泡泡和卷发.

Velocity.js

Velocity.js 是另一个高级,全特性的 JavaScript 动画套件,包括淡化与滑动,滚动,停止,完成,反转以及其他功能。

第 12 段(可获 1.11 积分)

当前它拥有令人印象深刻的大客户列表,包括 Tumblr, WhatsApp, MailChimp, Scribd, Gap 与 HTC, 所以你知道它对于大用户群与奇怪的边界条件已久经考验。

Velocity JS

Velocity 对于某些情况并不能完美适用,因为它是一个 JavaScript 动画引擎,事实上它是一个使用与 jQuery 的 $.animate() 相同 API 的动画引擎。无论 jQuery 是否存在它都能工作。也就是说,其令人难以置信的快速与其特性,包括颜色动画,变换,循环与消除,实质上它是 jQuery 与 CSS 变换的最好结合。

第 13 段(可获 1.51 积分)

AniJS

我们最后要介绍的这个库有趣在它的方法上。AniJS动画库允许你使用一种简单的语句结构来为元素添加动画,比如下面的格式:

(译者注:为了与命令相对应,故保留原文)

如果点击,方形上,晃动动画,container-box类

If click, On Square, Do wobble animated To .container-box

<div data-anijs="if: click, do: flipInY, to: .container-box"></div>

如果你没有足够的JavaScript经验,这将会是个使用JS动画的绝佳方式。


AniJS

  • 作者: anijs
  • 发行时间: 2014
  • 最近更新:
  • 使用程度:
  • 描述: “一个不使用代码提升web设计的库”
  • 大小: 10.5 kB
  • GitHub: https://github.com/anijs/anijs
  • 许可证:

AniJS是个“麻雀虽小,五脏俱全”的库。与那些非常规实现的动画库不同的是,它的实现十分的原始(译者注:采用的原生JavaScript较多)。

比起其它的竞争者来说,它可能在总体的效率和适配性上来说有所欠缺。不过,这个库值得一试。因为它比较有潜力,未来也会迎来一个不错的增长。

第 14 段(可获 2.08 积分)

你应该选择哪个库?

大量动画库都已就绪并等待着你把它们用在项目中。上面列出的都是兼具复杂度和稳定性组合的库。

如果你想使用简单而强大的 CSS 解决方案,Animate.CSS 可能是最佳选择,值得选用。

 

如果你在寻找完整、强大的 JavaScript 库,VelocityJSAnime.JS 会令你难以割舍。Velocity 当前有跟踪记录以及更大的安装基础,但 Anime.JS 却是一个如此优雅,令人兴奋的新项目。现在,Anime.JS 漂亮的文档恐怕就足以启得我们的支持。

虽然在 Web 应用中使用动画库可以提升交互效果,但过度使用会使用户迷惑,所以需要谨慎而明智的使用。

你在项目中使用动画库吗?你最喜欢的动画库是什么?

将你的 CSS 动画带入 Donovan Hutchinson 的下一级课程CSS 动画,他是一个战在 CSS 动画基石之上的人。

第 15 段(可获 2.23 积分)

文章评论