近年来，在各种网页设计和APP的设计中，有效的设计引人注目。 惊人的创意和流畅自然的动作设计迅速捕捉到用户的视线，大幅提高了品质感和转化率。
创造有效的UI动画效果当然也需要优秀的软件，UI动态工具在设计师的工作中开始发挥越来越大的价值。
有效的设计有什么优点？
节约屏幕空间
提高产品可用性
给产品增添创造性和趣味性
方便的交流
可以同时执行多个任务
向用户提供明确的反馈
引起用户的注意
那么，就抱着为广大设计师朋友“谋福利”的想法，整理一下业界比较流行的10种UI效果工具，供大家参考和学习。
1.Adobe After Effects
After Effects绝对是最强大的UI动画工具之一，也是视觉、UI设计师的行业标准。 无论是令人惊艳的过渡效果还是创意动作设计，所有这些功能和其他功能都可以通过After Effects实现。 它不仅是动画，而且在电影、电视、视频和互联网的动态图形和视觉效果合成方面也很出色。
优点：
-充分实现你动画创意的强大功能。
与其他Adobe工具(如Adobe Portfolio、Adobe Fonts和Adobe Spark )无缝协作。
-与插件配合使用，支持视频数据导出。
-丰富的素材和学习资源。
坏处：
-功能过多，学习曲线陡峭。
-对计算机的处理性能要求很高的存储容量。
-高分辨率预览的渲染速度变慢。
用户注释：
“如果你想成为优秀的设计师，After Effects是首选！ ”
“动态图形和动画设计的理想工具”
2.Origami
Origami Studio是Facebook团队创建的免费UI动画工具。 设计器可以直接从UI组件库中拖放不同的组件，以便快速创建交互和动画。 但这需要用户以开发者的思维出发，才能做出优秀的动画和设计。
价格：免费
系统： Mac
优点：
-强大的动画和交互效果。
-完全免费。
-GitHub上的开放源代码软件。
坏处：
仅支持Mac系统。
-鼠标驱动的交互。 用户不能直接测试。
-高学习成本。
-需要编码知识。
用户注释：
“非常强大的动画和交互工具”
3.Flinto
Flinto是一个轻量级、全面的原型创建和UI动画工具。 设计师将创建APP应用程序和Web的交互式原型和动画原型。 提供了一种动画工具，使设计人员可以快速创建基于过渡的动画。 在移动设备和PC上都能顺利预览。
价格：免费试用，专业版-$99/用户/年
系统： Mac
优点：
Sketch与Figma的集成。
-3D转换。
-内置手势：单击、双击、长按、幻灯片等。
坏处：
仅支持Mac系统。
不支持导入Photoshop。
-如果没有时间轴，则无法创建更复杂的效果。
用户注释：
“那会让动画更有趣，更快。 ”
“这是一个非常好的模拟动画的软件。 ”
4 .帧器
Framer是一种基于JavaScript的开源软件，主要用于交互式动态设计。 您可以快速导入和实时预览Photoshop和Sketch设计文稿，以创建复杂的交互原型和效果。
价格：个人-每月$15，小型团队-每月$99
系统： Mac
优点：
支持Sketch和Photoshop文件的导入。
-Framer X商店提供大量的设计资源。
-可以使用编码知识进行创造性设计(对懂编程知识的设计师很友好)。
坏处：
仅支持Mac系统。
-需要编码知识(对初学者不温柔)。
-没有标记工具，不支持将标记信息直接分发给开发人员。
-导入的Sketch文件与位图图层不匹配。
-与主要工具缺乏合作性，导致了很多重复工作。
用户注释：
“互动细节和动画好产品！ ”
5.Motion UI
Motion UI是一个基于Sass的CSS迁移和动态设计库。 这是一个非常强大的UI动画工具，可为CSS文件提供20多种过渡和动画效果。 此外，如果是开放源代码的CSS文件，也可以在Motion UI中构建自己的效果。
价格：免费
系统： Win，Mac
优点：
-支持系列动画效果。
-用户可以自定义7维动画。
开放源代码工具。
提供代码教程。
坏处：
不支持在-ie浏览器中运行Motion UI。
需要编码知识。
6.Hype 4
Hype 4是Mac上的HTML5动画制作软件，无需Flash插件或代码就可以制作H5动画。 具有看了就能得到的功能。 与AE类似，可以使用时间轴为各种场景创建交互式动画。
价格：标准版-$49.9，专业版-$99.99
系统： Mac
优点：
-支持将文件导出为视频和GIF。
-使用时间轴可以通过添加或播放元素来创建动画
-使您可以从动作中捕获动画并创建关键帧。
-不需要编码。
支持中文。
坏处：
仅支持Mac系统。
没有对Adobe Acrobat的支持。
-要编辑特定元素，必须导出网站代码。
用户注释：
“至今为止使用最多的UI效果工具！ ”
7.Lottie
Lottie是由Airbnb创建的开源动态库，支持Android、iOS和React Native。 支持演示从Adobe After Effects导出的JSON文件，以快速实现动画效果。
价格：免费
系统： Web
优点：
-Github有免费资源。
-包含各种动画，例如基线、基于字符的动画和动态徽标动画。
-JSON文件可以从网络加载。
-支持捕获常用视频。
坏处：
-不支持表达式或效果菜单效果。
-不支持阴影、颜色叠加和触摸屏效果等图层效果。
用户注释：
“最大的优点是提供完整的跨平台动画实现工作流。 ”
8.Keynote
众所周知，Keynote是苹果为Mac平台开发的演示设计工具。 对大多数人来说，这只是Mac上使用的幻灯片放映软件。 但是，对设计师来说也是很棒的UI动画工具。 例如，苹果团队也用于交互式设计和演示。 因此，如果您熟悉该软件，还可以在Keynote上创建常见的动画。
价格：免费
系统： Mac
优点：
包括PowerPoint的大部分动画。
-动画质量优于PowerPoint。
与iCloud兼容。
坏处：
仅支持Mac系统。
-本地文件导入速度慢。
-无法显示动画时间线。
用户注释：
“在过渡和动画方面，Keynote确实比同期的PowerPoint过渡得更顺利。 ”
9 .猫头鹰
Flow是一个功能强大的UI动画工具，可以为iOS和HTML项目创建交互式过渡和布局代码。 作为生产型工具，不仅可以制作具有强大时间轴的美丽动画，还可以导出动画代码。
价格：免费试用-30天，专业版-$15/月或$150/年
系统： Mac
优点：
-强大的时间线允许您准确地编辑和设置动画。
-支持导出代码。
-简化的界面有助于编辑关键帧。
坏处：
仅支持Mac系统。
只能导入草图文件。
用户注释：
“关于Flow的最好的地方是，它支持输出清晰的JS代码，以便于阅读和编辑。 ”
结语：
动画和其他启发性元素的共同作用使现在的设计更具创意和多样化，有了UI动态工具的支持，网页设计和App设计将不再单调，同时变得更加生动有趣。
