Rive 高級動畫技巧|打造互動漸層光環 Hover 效果

Rive 高級動畫技巧|打造互動漸層光環 Hover 效果

By Yuya Mei 6090 位订阅者
1116 次观看 · 2025-04-12 UI 设计动效设计
Rive 教學來了!這次我們做一個超有「科技感」的 Hover 光環動畫,從漸層設計到互動滑鼠控制,一次學會!
🌀 動畫亮點:
* 使用 Nest Artboard 如同组件管理重複组件結構
* 用 Constraint follow path 工具的使用
* 自訂 Glow + Gradient 給 UI 加上質感
* 使用 State Machine 結合 Timeline 控制滑鼠互動
如果你喜歡 Framer、Figma,但想做更高自由度的互動動畫,Rive 會是你的新神器!📌 記得訂閱支持我,我會繼續分享更多設計與動畫教學 🙌

🔔 别忘了点赞👍 + 订阅🎥,解锁更多前沿设计趋势! 🚀💡
🤗 订阅我每周的新视频: https://www.youtube.com/channel/UCtVn...

Remix my project (复制使用我的project)
https://rive.app/community/files/19094-35925-gradient-ring-hover-reveal

0:00 intro
0:58 制作组件
4:59 组件动画制作
9:17 组件跟随路径
11:50 整体动画制作

欢迎👏加入我的设计师交流群
https://discord.gg/WEuhP33f9P

我是谁:我是yuya , 热衷于UI/UX设计 和网页设计, 每周我都会分享很多好用的资源, 工具,和设计方面的一些小教程, 希望能跟志同道合的小伙伴一起分享