平面设计师和ui设计师_UI设计师最佳动画图书馆中的9个-CSDN博客

平面设计师和ui设计师

This article was updated in October 2019 to reflect the current state of animation libraries. We’re going to run-through 9 free, well-coded animation libraries best-suited to UI design work — covering their strengths and weaknesses, and when to choose each one.

本文已于2019年10月更新，以反映动画库的当前状态。 我们将遍历9个最适合UI设计工作的免费，编码良好的动画库-涵盖它们的优缺点，以及何时选择每个优缺点。

Take your CSS skills to the next level with our book CSS Master, 2nd Edition by Tiffany B. Brown – covering CSS animations, transitions, transformations and much more.

蒂芙尼·布朗(Tiffany B. Brown)出版的第二版CSS Master，将您CSS技能提升到一个新的水平–涵盖CSS动画，过渡，转换等等。

Front-end web design has been through a revolution in the last decade. In the late noughties, most of us were still designing static magazine layouts. Nowadays, we’re building “digital machines” with thousands of resizing, coordinated, moving parts.

前端网页设计在过去十年中经历了一场革命。在上世纪90年代后期，我们大多数人仍在设计静态杂志版式。如今，我们正在构建具有数以千计的大小调整，协调一致的活动部件的“数字机器”。

Quite simply, great UI designers need to be great animators too — with a solid working understanding of web animation techniques.

简而言之， 出色的UI设计师也需要成为出色的动画师 -对网络动画技术具有扎实的工作理解。

Keep in mind that we’re looking at each library from the perspective of a code-savvy UI designer, not as a “code guru” developer. Some of these libraries are pure CSS. Others are JavaScript, but none require anything more than basic HTML/CSS and/or JavaScript understanding to be useful.

请记住，我们是从精通代码的UI设计人员而不是“代码专家”开发人员的角度来看每个库的。其中一些库是纯CSS。其他的都是JavaScript，但除了基本HTML / CSS和/或JavaScript理解之外，没有其他要求才有用。

我们的9大动画库列表 (Our Top 9 Animation Libraries List)

Animate.css (Animate.css)

Animate.css is one of the smallest and most easy-to-use CSS animation libraries available. Applying the Animate library to your project is as simple as linking the CSS and adding the required CSS classes to your HTML elements. You can also use jQuery to trigger the animations on a particular event if you prefer.

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

Creators: Daniel Eden
创作者 ： Daniel Eden
Released: 2013
发行日期 ：2013
Current Version: 3.7.2
当前版本 ：3.7.2
Popularity: 62,284 stars on GitHub
人气：GitHub上的62,284星
Description: “A cross-browser library of CSS animations. As easy to use as an easy thing.”
描述： “跨浏览器CSS动画库。易用性与易用性一样。”
Library Size: 56.7 kB (minified)
库大小： 56.7 kB(最小)
GitHub: https://github.com/daneden/animate.css
GitHub的 ： https ： //github.com/daneden/animate.css
License:
执照：

At the time of writing, it’s still one of the most popular and widely-used CSS animation libraries and its minified file is small enough for inclusion in mobile websites as well.

在撰写本文时，它仍然是最流行和广泛使用CSS动画库之一，其缩小的文件也足够小，可以包含在移动网站中。

Animate.css is still under active development. Watch out for version 4, which will support CSS custom properties (aka CSS variables). This is one of the simplest and most robust animation libraries and we wouldn’t hesitate to use this in any project.

Animate.css仍在积极开发中。请注意第4版，它将支持CSS自定义属性(又称CSS变量)。这是最简单，最强大的动画库之一，我们会在任何项目中使用它。

Bounce.js (Bounce.js)

Bounce.js is a JavaScript animation library that focuses on providing a selection of unique fun, bouncy, Warner Brothers-esque animations to your website.

Bounce.js是一个JavaScript动画库，致力于为您的网站提供一系列独特的，有趣的，华纳兄弟风格的动画。

Creators: Tictail
创作者 ： Tictail
Released: 2014
发售日：2014
Current Version: 0.8.2
当前版本 ：0.8.2
Popularity: 5,975 stars on GitHub
人气：GitHub上的5,975星
Description: “Create beautiful CSS3 powered animations in no time.”
描述：“立即创建漂亮CSS3动画。”
Library Size: 16 kB
资料库大小 ：16 kB
GitHub: https://github.com/tictail/bounce.js
GitHub的 ： https ： //github.com/tictail/bounce.js
License:
执照：

Bounce.js is a neat animation library that ships with about ten animation presets — hence the small size of the library. As with animate.css, the animations are smooth and flawless. You might want to consider using this library if your needs center around “pop and bubble”-style animation types and could benefit from a lower file size overhead.

Bounce.js是一个简洁的动画库，附带约十个动画预设-因此该库很小。与animate.css一样 ，动画是平滑无瑕的。如果您的需求集中在“流行和泡泡”风格的动画类型上，并且可以从较低的文件大小开销中受益，则可能要考虑使用此库。

日本动漫 (AnimeJS)

AnimeJS is the newest addition to our list, but has won a great many converts since its creation. It’s incredibly versatile and powerful and wouldn’t be out of place powering HTML game animations. The only real question is “is it overkill for simple web apps?”

AnimeJS是我们列表中的最新成员，但自创建以来已赢得了许多转换。它具有难以置信的通用性和强大功能，并且不会为HTML游戏动画提供支持。唯一真正的问题是“ 对于简单的Web应用程序来说，它是否过于矫？过正？ ”

Maybe. But as it’s also fast, small and relatively easy to learn, it’s hard to find fault with it.

也许。但是由于它速度快，体积小并且相对容易学习，因此很难发现它的缺点。

AnimeJS is described as a “lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects”. Pretty awesome.

AnimeJS被描述为具有简单但功能强大的API的“ 轻量级JavaScript动画库 ” 。 它与CSS属性，SVG，DOM属性和JavaScript对象一起使用 。太棒了

This project is available on GitHub.

该项目可在GitHub上获得。

Creator: Julian Garnier
创建者 ：朱利安·加尼尔
Released: 2016
发行日期 ：2016
Current Version: 3.1.0
当前版本 ：3.1.0
Popularity: 32,605 stars on GitHub
人气：GitHub上32,605星
Description: “JavaScript Animation Engine.”
描述：“ JavaScript动画引擎”。
Library Size: 16.8 kB (minified)
程式库大小 ：16.8 kB(最小)
GitHub: https://github.com/juliangarnier/anime
GitHub的 ： https ： //github.com/juliangarnier/anime
License:
执照：

Most impressively, Anime.JS has stunning “documentation” that demonstrates HTML, JavaScript code, and working examples in a beautiful app environment.

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

In short, if you’re comfortable with a JavaScript animation solution, it’s hard to find reasons to ignore AnimeJS.

简而言之，如果您对JavaScript动画解决方案感到满意，那么很难找到忽略AnimeJS的理由。

绿袜子(GSAP) (GreenSock (GSAP))

GreenSock (or GSAP – GreenSock Animation Platform) is the Swiss army knife of web animation. For sleek and sophisticated animations that run smoothly, GSAP is ideal. You can animate anything, from DOM elements to SVGs, and its ecosystem includes some amazing plugins that let you do all sorts of fun stuff, e.g., morphing SVGs, drawing SVG strokes, scrolling functionality, scrambling text, and much more. It’s fast, cross-browser compatible, and its syntax is straightforward and intuitive.

GreenSock(或GSAP – GreenSock动画平台)是网络动画的瑞士军刀。对于流畅运行的时尚精美动画，GSAP是理想的选择。您可以设置动画，从DOM元素到SVG，其生态系统包括一些了不起的插件，可让您执行各种有趣的工作，例如，对SVG进行变形，绘制SVG描边，滚动功能，加扰文本等等。它是快速的，跨浏览器兼容的，并且其语法简单直观。

Current Version: 2.1.3
当前版本 ：2.1.3
Popularity on GitHub: 9,709 stars on GitHub
GitHub上的流行度 ： GitHub上的 9,709星
Description: “Ultra high-performance, professional-grade animation for the modern web.”
Description ：“适用于现代网络的超高性能专业级动画。”
Library Size: 313 kB (minified folder containing the lightweight download of the library)
库大小 ：313 kB(包含该库轻量级下载文件的最小文件夹)
GitHub: https://github.com/greensock/GreenSock-JS/
GitHub的 ： https ： //github.com/greensock/GreenSock-JS/
License: standard no charge license, mixed with a paid model for specific features and plugins. See the licensing page for more details.
许可证 ：标准的免费许可证，与特定功能和插件的付费模型混合在一起。有关更多详细信息，请参见许可页面。

GSAP is modular, therefore you can pick and choose which parts of the library you need for your project, which is great for keeping the file size under control.

GSAP是模块化的，因此您可以选择项目所需的库部分，这对于控制文件大小非常有用。

If you’re looking for something powerful but intuitive with awesome documentation and community support, I would definitely recommend you give this animation library a shot in your next project. You’ll be enthusiastic.

如果您正在寻找功能强大但直观，功能强大的文档和社区支持，我绝对建议您在下一个项目中为这个动画库做个尝试。你会很热情。

魔术动画 (Magic Animations)

Magic Animations has been one of the most impressive animation libraries available. It has many different animations, many of which are quite unique to this library. As with Animate.css, you can implement Magic by simply importing the CSS file. You can also implement the animations using jQuery. This project offers a particularly cool demo application.

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

Current Version: 1.4.1
当前版本 ：1.4.1
Popularity: 6,074 stars on GitHub
人气：GitHub 6,074星
Description: “CSS3 Animations with special effects”
描述：“具有特殊效果CSS3动画”
Library Size: 54.9 kB (minified)
库大小 ：54.9 kB(最小)
GitHub: https://github.com/miniMAC/magic
GitHub的 ： https ： //github.com/miniMAC/magic
License: MIT license.
许可证 ：MIT许可证。

Magic Animation’s file size is moderate compared to Animate.css and it is known for its signature animations, such as the magic effects, foolish effects, and bomb effects.

与Animate.css相比，Magic Animation的文件大小适中，并且以其签名动画而闻名，例如魔术效果，愚蠢效果和炸弹效果。

If you’re looking for something a little out of the ordinary, go for it. You won’t be disappointed.

如果您正在寻找一些与众不同的东西，那就去吧。您不会失望的。

Zdog (Zdog)

Zdog is a JavaScript library for creating 3D designs and animations by David DeSandro. With its help, you can draw your designs using the <canvas> element or SVGs and bring them to life in smooth animations with a sleek 3D effect.

Zdog是一个JavaScript库，用于创建David DeSandro制作的3D设计和动画。借助它的帮助，您可以使用<canvas>元素或SVG绘制设计，并以光滑的3D效果在平滑的动画中使它们栩栩如生。

Current Version: 1.1.0
当前版本 ：1.1.0
Popularity: 6,940 stars on GitHub
人气：GitHub上的6,940星
Description: “Round, flat, designer-friendly
描述：“圆形，扁平，设计友好

pseudo-3D engine for canvas & SVG”
用于画布和SVG的伪3D引擎”
Library Size: 28 kB (minified)
库大小 ：28 kB(最小)
GitHub: https://github.com/metafizzy/zdog
GitHub的 ： https ： //github.com/metafizzy/zdog
License: MIT license.
许可证 ：MIT许可证。

If you’re familiar with JavaScript, you’ll learn the basics of Zdog pretty quickly: it’s got a straightforward declarative API, great docs and plenty of learning resources. Check out my intro to Zdog on SitePoint.

如果您熟悉JavaScript，您将很快学习Zdog的基础知识：它具有简单易懂的声明性API，出色的文档和大量的学习资源。在SitePoint上查看我对Zdog的介绍。

CSShake (CSShake)

CSShake delivers exactly what it says on the box — a CSS library designed specifically for shaking elements within your web page. As you might expect, there are a number of variations available for shaking your web components.

CSShake准确地传达了包装盒上所说的内容-一个CSS库，专门用于在您的网页中摇动元素。如您所料，可以使用多种变体来摇动Web组件。

Current Version: 1.5.0
当前版本 ：1.5.0
Popularity: 4,039 stars on GitHub
人气：GitHub 4,039星
Library Size: 21.9 kB (minified version)
库大小 ：21.9 kB(最小版本)
GitHub: https://github.com/elrumordelaluz/csshake
GitHub的 ： https ： //github.com/elrumordelaluz/csshake
License:
执照：

Apple popularized the UI trope of vigorously shaking a UI element (a dialog, modal or textbox) when a user enters an incorrect response — mimicking a person shaking their head. CSShake provides a range of interesting “shake” animations and there’s no lack of variation in this library.

Apple普及了UI风格，即当用户输入错误的响应时(例如模仿人摇头)大力摇晃UI元素(对话框，模态框或文本框)。 CSShake提供了一系列有趣的“摇动”动画，并且该库中不乏任何变体。

悬停 (Hover.css)

Hover.css is a CSS animation library designed for use with buttons and other UI elements in your website. It has really nice 2D transitions, along with a host of other well-crafted animations.

Hover.css是一个CSS动画库，旨在与您网站中的按钮和其他UI元素一起使用。它具有非常不错的2D过渡，以及许多其他精心制作的动画。

Current Version: 2.3.2
当前版本 ：2.3.2
Popularity: 21,818 stars on GitHub
人气：GitHub上21,818星
Description: “Easily apply to your own elements, modify or just use for inspiration.”
描述：“可以轻松地应用于您自己的元素，进行修改或仅用于启发。”
Library Size: 93.0 kB (minified)
资料库大小 ：93.0 kB(最小)
GitHub: https://github.com/IanLunn/Hover
GitHub的 ： https ： //github.com/IanLunn/Hover
License: free personal/open-source license and paid commercial license, depending on requirements. For details, read the licenses section on GitHub.
许可证 ：根据要求，免费提供个人/开源许可证和付费商业许可证。有关详细信息，请阅读GitHub上的许可部分。

Hover.css is best suited for animating discrete page elements such as buttons, logos, SVG components or featured images rather than larger, complex page animations. Arguably, its most notable animation effects are its distinctive speech bubbles and curls.

Hover.css最适合于动画离散页面元素，例如按钮，徽标，SVG组件或特色图像，而不是较大的复杂页面动画。可以说，其最引人注目的动画效果是其独特的气泡和卷曲。

AniJS (AniJS)

Our final library is interesting for its unique approach. AniJS is an animation library that allows you to add animations to elements in a simple ‘sentence-like’ structure. Take the following format:

我们的最终库因其独特的方法而很有趣。 AniJS是一个动画库，可让您以简单的“类似句子”的结构将动画添加到元素中。采用以下格式：

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

如果点击，在广场，难道摆动动画要 .container盒

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

If you don’t have much familiarity with JavaScript, this may well be a great way to step into JS-choreographed movements.

如果您对JavaScript不太熟悉，那么这可能是步入JS编排动作的好方法。

Creator: Dariel Noel
创作者 ： Dariel Noel
Released: 2014
发售日：2014
Current Version: 0.9.3
当前版本 ：0.9.3
Popularity: 3.524 stars on GitHub
人气：GitHub 3.524星
Description: “A Library to Raise your Web Design without Coding.”
描述：“一个无需编写代码即可提高您的Web设计的库。”
Library Size: 10.5 kB
资料库大小 ：10.5 kB
GitHub: https://github.com/anijs/anijs
GitHub的 ： https ： //github.com/anijs/anijs
License:
执照：

AniJS is a library with a very reasonable size factoring in its functionality. The format it uses for implementation is quite original and different as compared to other animation libraries (which many others might find unconventional).

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

Nevertheless, this library is worth giving a try, at least once for your projects.

尽管如此，该库还是值得一试的，对于您的项目至少要尝试一次。

您应该选择哪个图书馆？ (Which Library Should You Choose?)

There are many animation libraries out there ready and waiting to be implemented in your project. Those listed above are a few with the best combination of sophistication and stability.

有许多动画库可供您在项目中实施。上面列出的那些是复杂性和稳定性的最佳组合。

If you’re looking for a simple-to-use, robust CSS solution, Animate.css is probably the most versatile, “bang-for-buck” option available.

如果您正在寻找简单易用，功能强大CSS解决方案，则Animate.css可能是功能最丰富的“ 物有所值 ”选项。

If you’re looking for a more complete, powerful JavaScript option, GreenSock and AnimeJS are very hard to split.

如果您正在寻找更完整，更强大JavaScript选项，则很难拆分GreenSock和AnimeJS 。

Although using an animation library in your web application can certainly improve interactivity, overdoing it defeats the purpose and often confuses the user. Be careful and use animations judiciously.

尽管在Web应用程序中使用动画库当然可以改善交互性，但是过度使用动画库会破坏目的，并经常使用户感到困惑。请注意并谨慎使用动画。

Do you use animation libraries for your projects? What are your favorite animation libraries?

您是否在项目中使用动画库？ 您最喜欢的动画库是什么？

Take your CSS skills to the next level with our book CSS Master, 2nd Edition by Tiffany B. Brown – covering CSS animations, transitions, transformations and much more.

蒂芙尼·布朗(Tiffany B. Brown)出版的第二版CSS Master，将您CSS技能提升到一个新的水平–涵盖CSS动画，过渡，转换等等。