网站建设需要用到的css动画库

前端网页设计在过去十年中经历了一场革命。在已故的顽皮中,我们大多数人仍在设计静态杂志布局。如今,我们正在构建具有数千个调整大小,协调,移动部件的“数字机器”。 很简单,优秀的UI设计师也需要成为伟大的动画师 – 对网络动画技术有扎实的理解。 请记住,我们从代码精通的UI设计师的角度来看待每个库,而不是“代码大 WP网站建设

前端网页设计在过去十年中经历了一场革命。在已故的顽皮中,我们大多数人仍在设计静态杂志布局。如今,我们正在构建具有数千个调整大小,协调,移动部件的“数字机器”。

很简单,优秀的UI设计师也需要成为伟大的动画师 – 对网络动画技术有扎实的理解。

请记住,我们从代码精通的UI设计师的角度来看待每个库,而不是“代码大师”开发人员。其中一些库是纯CSS。其他是JavaScript,但没有什么比基本的HTML / CSS理解更有用了。链接图书馆; 添加一个CSS类。

我们的9大动画库列表

  1. Animate.css
  2. Bounce.js
  3. AnimeJS
  4. 魔法动画
  5. DynCSS
  6. CSShake
  7. Hover.CSS
  8. Velocity.js
  9. AniJS

Animate.css

Animate.css是最小和最易于使用的CSS动画库之一。将Animate库应用于项目就像链接CSS并将所需的CSS类添加到HTML元素一样简单。如果您愿意,还可以使用jQuery触发特定事件的动画。

网站建设需要用到的css动画库

  • 创作者:丹尼尔伊登
  • 发行日期:2013年
  • 当前版本网站建设需要用到的css动画库
  • 人气网站建设需要用到的css动画库
  • 描述: “CSS动画的跨浏览器库。易于使用,简单易用。“
  • 库大小: 47 kB
  • GitHub:https://github.com/daneden/animate.css
  • 许可证网站建设需要用到的css动画库

在撰写本文时,它仍然是最受欢迎和广泛使用的CSS动画库之一,其缩小文件也足够小,可以包含在移动网站中。它网站建设需要用到的css动画库在GitHub上有明星,并且经常被打包成许多大型项目的组件。

Animate.css仍在积极开发中。这是最简单,最强大的动画库之一,我们会毫不犹豫地在任何项目中使用它。

Bounce.js

Bounce.js是一个JavaScript动画库,专注于为您的网站提供一系列独特有趣,充满乐趣的“华纳兄弟式”动画。

网站建设需要用到的css动画库

  • 创作者:Tictail
  • 发布日期:2014年
  • 当前版本网站建设需要用到的css动画库
  • 人气网站建设需要用到的css动画库
  • 描述:“立即创建漂亮的CSS3动力动画。”
  • 库大小:16 kB
  • GitHub:https://github.com/tictail/bounce.js
  • 许可证网站建设需要用到的css动画库

Bounce.js是一个整洁的动画库,附带了大约十个动画“预设” – 因此库的体积很小。与animate.css一样,动画流畅无瑕。如果您的需求以“pop和bubble”式动画类型为中心,并且可以从较低的文件大小开销中受益,您可能需要考虑使用此库。

AnimeJS

AnimeJS是我们列表中的最新成员,但自创建以来赢得了众多皈依者。它具有令人难以置信的多功能性和强大功能,并且不会为HTML游戏动画提供动力。唯一真正的问题是“ 简单的网络应用程序是否有点过分?

也许。但由于它也快速,小巧且相对容易学习,因此很难找到它的错误。

AnimeJS被描述为一个轻量级JavaScript动画库,可以“ 与任何CSS属性,单个CSS转换,SVG或任何DOM属性以及JavaScript对象一起使用”。这真是太棒了 – 事实上,我所采取的GIF捕获对于动作的平滑和柔和是不公平的。

网站建设需要用到的css动画库

该项目可在GitHub上获得。

  • 创作者:Julian Garnier
  • 发布日期:2016年
  • 当前版本网站建设需要用到的css动画库
  • 人气网站建设需要用到的css动画库
  • 描述:“JavaScript动画引擎”。
  • 图书馆大小:10.9kB
  • GitHub:https:  //github.com/juliangarnier/anime
  • 许可证网站建设需要用到的css动画库

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

简而言之,如果您对JavaScript动画解决方案感到满意,则很难找到忽略Anime.JS的理由。

魔法动画

Magic Animations是一个令人印象深刻的动画库。它有许多不同的动画,其中许多是这个库非常独特的。与Animate.css一样,您只需导入CSS文件即可实现Magic。您还可以使用jQuery中的动画。该项目提供了一个特别酷的演示应用程序

 

  • 网站建设需要用到的css动画库
  • 当前版本网站建设需要用到的css动画库
  • 人气网站建设需要用到的css动画库
  • 描述:“具有特殊效果的CSS3动画”
  • 库大小:36.5 kB
  • GitHub:https://github.com/miniMAC/magic
  • 许可证网站建设需要用到的css动画库

与animate.css相比,Magic Animation的文件大小适中,并且以其标志性动画而闻名,例如魔法效果,愚蠢效果和炸弹效果。

如果你正在寻找一些与众不同的东西,我肯定会建议你在下一个项目中为这个动画库添加一个镜头。你不会失望的。

DynCSS

DynCSS是一个动画库,您可能希望在您的网站中使用动态库以及视差效果。要更清楚地了解使用此库可以执行的操作,请查看此演示。

网站建设需要用到的css动画库

  • 创作者:Vittorio Zaccaria
  • 发布日期:2014年
  • 当前版本网站建设需要用到的css动画库
  • 人气网站建设需要用到的css动画库
  • 描述:“使用Dynamic CSS让您的网站变得生动。”
  • GitHub:https://github.com/vzaccaria/DynCSS
  • 许可证网站建设需要用到的css动画库

DynCSS是一个没有大受欢迎的简单库,正如它在GitHub上的明星数量所证明的那样。但它仍然值得一看。这个库提供的一个很酷的功能是元素相对于滚动的旋转,Vittorio在DynCSS主页上精美地演示(这是视差相关页面的完美用例)。

CSShake

CSShake提供了它在盒子上所说的内容 – 一个专门用于在网页中抖动元素的CSS库。正如您所料,有许多变体可用于摇动您的Web组件。

网站建设需要用到的css动画库

  • 当前版本网站建设需要用到的css动画库
  • 人气网站建设需要用到的css动画库
  • 库大小:78.8 kB
  • GitHub:https://github.com/elrumordelaluz/csshake
  • 许可证网站建设需要用到的css动画库

当用户输入不正确的响应时,Apple推广了UI元素,大力摇动UI元素(对话框,模态或文本框) – 模仿一个人摇头。CSShake提供了一系列有趣的“摇动”动画,这个库中不乏变化。

虽然目前该库比DynCSS更受欢迎,但我觉得通常文件大小可能无法通过它添加的功能来证明。虽然动画很聪明,但我想不出很多用例,你不需要为非摇动效果包含第二个动画库。但也许我只是缺乏想象力?

Hover.css

Hover.css是一个CSS动画库,设计用于网站中的按钮和其他UI元素。它有非常好的2D过渡,以及许多其他精心设计的动画。

网站建设需要用到的css动画库

  • 当前版本网站建设需要用到的css动画库
  • 人气网站建设需要用到的css动画库
  • 描述:“轻松应用于您自己的元素,修改或仅用于灵感。”
  • 库大小:104.2 kB
  • GitHub:https://github.com/IanLunn/Hover
  • 许可证网站建设需要用到的css动画库

Hover.css最适合动画离散页面元素,如按钮,徽标,SVG组件或特色图像,而不是更大,更复杂的页面动画。它有一个完整的例程列表,这说明它的尺寸相对较大(但是,我仍然认为尺寸可以更加优化)。可以说它最引人注目的动画效果是它独特的气泡和卷发。

Velocity.js

Velocity.js是另一个复杂的全功能JavaScript动画套件,包括Fade&Slide,Scroll,Stop,Finish,Reverse等功能。

它拥有令人印象深刻的大牌用户名单,包括Tumblr,WhatsApp,MailChimp,Scribd,Gap和HTC,所以你知道它已经过对大型用户基础和奇怪边缘情况的战斗测试。

网站建设需要用到的css动画库

  • 创作者:Julian Shapiro
  • 发布日期:2014年
  • 当前版本网站建设需要用到的css动画库
  • 人气网站建设需要用到的css动画库
  • 描述:“加速JavaScript动画。”
  • 库大小:34.8 kB
  • GitHub:https://github.com/julianshapiro/velocity
  • 许可证网站建设需要用到的css动画库

Velocity可能不适合某些人,因为它是一个JavaScript动画引擎,它实际上是一个使用与jQuery相同的API的动画引擎$.animate()。无论是否存在jQuery,这都有效。也就是说,它的速度非常快,其功能包括色彩动画,变换,循环和缓动。从本质上讲,它是jQuery和CSS转换相结合的最佳选择。

AniJS

我们的最终图书馆以其独特的方法而闻名。AniJS是一个动画库,允许您以简单的“类似句子”的结构向元素添加动画。采用以下格式:

如果点击,广场,摆动动画 .container盒

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

如果你不熟悉JavaScript,这可能是进入JS编排运动的好方法。
网站建设需要用到的css动画库

  • 创作者:anijs
  • 发布日期:2014年
  • 当前版本网站建设需要用到的css动画库
  • 人气网站建设需要用到的css动画库
  • 描述:“无需编码即可提升Web设计的库。”
  • 库大小:10.5 kB
  • GitHub:https://github.com/anijs/anijs
  • 许可证网站建设需要用到的css动画库

AniJS是一个具有非常合理的大小因素的库。与其他动画库(许多其他动画库可能会发现非常规动画库)相比,它用于实现的格式非常原始且不同。

不过,这个库值得为您的项目至少尝试一次。它可能缺乏一些竞争的整体力量和润色,但它有可能在未来增长。

你应该选择哪个图书馆?

有许多动画库已准备就绪,等待在您的项目中实施。上面列出的是一些具有最佳复杂性和稳定性的组合。

如果您正在寻找一个简单易用,强大的CSS解决方案,Animate.CSS可能是最通用的“bang-for-buck”选项。

如果您正在寻找更完整,更强大的JavaScript选项,VelocityJSAnime.JS很难分割。Velocity目前拥有良好的记录和更大的安装基础,但Anime.JS令人难以置信的优雅和令人兴奋。现在,Anime.JS的精美文档可能足以赢得我们的支持。

虽然在Web应用程序中使用动画库肯定可以提高交互性,但是过度使用它会使目的失败并且经常使用户感到困惑。小心并明智地使用它们。

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/11711

发表评论

电子邮件地址不会被公开。 必填项已用*标注