适合 UI 设计师的最佳 JavaScript 和 CSS 动画库

suchonakaniz

今天，我们将介绍 9 个最适合 UI 设计工作的免费、编码良好的动画库 - 涵盖它们的优点和缺点，以及何时选择每个库。 Backward Skip 10s Play Video Forward Skip 10s 前端网页设计在过去十年中经历了一场革命。在二十世纪九十年代末，我们大多数人仍在设计静态杂志布局。如今，我们正在构建具有数千个可调整大小、协调的移动部件的“数字机器”。 很简单，优秀的 UI 设计师也需要成为优秀的动画师——对网页动画技术和技术有扎实的理解。 请记住，我们是从精通代码的 UI 设计师而不是“代码大师”开发人员的角度来看待每个库的。其中一些库是纯 CSS。其他的是 JavaScript，但除了基本的 HTML/CSS 和/或 JavaScript 理解之外，没有任何其他语言需要任何东西才能有用。 我们的 9 大动画库列表 Lottie.js：非常适合任何规模的基于矢量的动画 Animate.css：最适合小型。



有针对性的 UI 操作 GreenSock (GSAP)：功能齐全但庞大的动画平台，能够处理从游戏到应用程序开发的任何内容 动漫JS 魔法动画 兹狗 CSS摇动 悬停CSS 阿尼JS Learn to Code with JavaScript 洛蒂.js Lottie 动画示例（GIF 格式） 让我们明确一点：Lottiejs是一种与列表中其他八个非常不 决策者电子邮件列表 同类型的动画库。尽管如此，我们认为 UI/UX 设计师不能忽视它。 创建 Lottie 动画更类似于创建视频作品。您需要一个可以导出“Lottie-ready”JSON 文件的第三方动画工具。事实上，Lottie 格式是专门为使Adob​​e After Effects动画在网络和移动设备上高效工作而设计的。这使得 Lottie 动画快速、高效、易于编写脚本，而且通常非常漂亮。 尽管 Lottie 被认为是Adob​​e After Effects的扩展，但仍有大量（可以说更好的）“Lottie 原生”替代方案可用于创建 Lottie 动画。




这些包括： 流动 骑兵 Keyshape（仅限 Mac，但价格便宜） Adobe Animator（有限功能支持） 草图（插件） Haiku（最近开源 - 免费但未来不确定 - 买家要小心） Lottie 使用分别针对 Web、iOS 和 Android 进行优化的单独“动画播放器”。Lottie 代码库由AirBnb开发和维护，背后有一个超级热情、热情的社区。 创建者：爱彼迎 发布时间：2015 受欢迎程度：GitHub 上的星星 描述： “Lottie 是一个 iOS、Android 和 React Native 库，可实时渲染 After Effects 动画。” GitHub：Lottie Web – Lottie iOS – Lottie Android 执照：执照 动画.css Animate.css是最小且最易于使用的 CSS 动画库之一。自 2013 年发布以来，它精致、高效、维护良好。 Learn to Code with JavaScript 将 Animate 库应用到您的项目就像链接 CSS 并将所需的 CSS 类添加到 HTML 元素一样简单。