UI 动效与微交互资源清单|Lottie 素材 动效灵感 交互动效工具

整理一份偏实用的 UI 动效与微交互资源清单,覆盖动效素材、原型/交互动效制作、可直接套用的组件与灵感站点,帮助你更快把静态界面做得更“会动”。

LottieFiles

工具地址:https://lottiefiles.com

需看协议:动画资源来自社区与作者上传,商用前先看每个作品的授权与署名要求;适合快速找现成 Lottie 动效、预览并导出。

Rive

工具地址:https://rive.app

需看协议:交互式矢量动效工具与运行时方案,适合做可点击/可拖拽的微交互;用于商业产品前请按官方条款选择合适计划。

Jitter

工具地址:https://jitter.video

需看协议:偏社媒与短视频的动效排版工具,模板上手快;商用输出前确认字体/模板素材的许可范围。

Framer

工具地址:https://www.framer.com

需看协议:原型、交互与网站一体化工具,适合快速做可滚动、可点击的高保真动效演示;商用发布按其服务条款执行。

ProtoPie

工具地址:https://www.protopie.io

需看协议:强交互原型工具,适合做复杂手势、传感器、条件分支等微交互;用于团队交付时可把交互逻辑当成规格说明。

Principle

工具地址:https://principleformac.com

需看协议:经典的 UI 动效原型软件(Mac),时间轴思路适合做转场、弹出、列表展开等;商用按其授权购买即可。

SVGator

工具地址:https://www.svgator.com

需看协议:把 SVG 做成可控的矢量动画,适合网页 UI 的轻量动效;输出素材用于商用前确认导出格式与许可限制。

UI Movement

工具地址:https://uimovement.com

需看协议:聚合式动效灵感站点,适合找“该怎么动”的参考;多数内容为作品展示,直接复用素材需联系作者。

UX Movement

工具地址:https://uxmovement.com

需看协议:偏交互与可用性的动效/界面分析文章合集;适合作为交互说明的论据与思路参考。

Material Design Motion

工具地址:https://m3.material.io/styles/motion

需看协议:系统化的动效原则与模式(节奏、层级、转场等),适合统一产品动效语言;参考实现时注意品牌与内容使用条款。

Motion One

工具地址:https://motion.dev

需看协议:面向 Web 的动效库与文档,适合在开发阶段把设计动效落地;使用前确认其开源协议/商业条款。

anime.js

工具地址:https://animejs.com

免费商用:常见为开源协议(以项目实际 LICENSE 为准),适合做简单而精致的 UI 动效;建议把缓动曲线与时长写进动效规范。

GSAP

工具地址:https://gsap.com

需看协议:工业级 Web 动效库,适合复杂时间轴、滚动触发与精确控制;部分功能与商用授权相关,落地前确认许可。

Lottie(Airbnb)

工具地址:https://airbnb.io/lottie/

需看协议:Lottie 技术与多端实现的入口文档;当你要统一 iOS/Android/Web 的动效交付时,这里能帮你明确格式与导出策略。

Iconscout Lottie Animations

工具地址:https://iconscout.com/lottie-animations

需看协议:可下载动效素材的资源站点,适合临时补齐空状态/加载动效;素材商用前务必逐条核对授权范围与署名要求。

用户评论 (0)

登录后参与讨论

立即登录 注册账号

暂无评论,快来抢沙发吧~

操作成功