JobCannon
全部技能

Lottie Motion Animation

⬢ 層級 2工具
中等
薪資影響
2 個月
學習時長
中等
難度
1
職業
一覽

Lottie is an open-source animation library. Designers create animations in Adobe After Effects, export as JSON, and developers embed in web/mobile apps. Animations are tiny (10-50KB vs 1MB video), scale infinitely, and respond to user interaction. Companies using Lottie see 30-40% smaller bundle sizes and 2-3x higher animation quality vs CSS. Mastery takes 4-6 weeks. Designers and developers specializing in Lottie animations command 15-25% premium because they create high-impact micro-interactions.

什麼是 Lottie Motion Animation

Lottie is an open-source animation library by Airbnb. Designers create animations in Adobe After Effects, export as JSON via the BodyMovin plugin, and developers embed the JSON in web/mobile apps. Lottie renders animations using JavaScript (web) or native code (mobile). Animations are lightweight (10-200KB JSON vs 5-50MB video), scale infinitely without quality loss, and respond to user interaction. Lottie is the standard for high-quality, performant micro-interactions in product design. Video animations are heavy and can't respond to interaction. CSS animations are limited. Lottie is the sweet spot: designer control, small file size, performant, interactive. Products using Lottie (Airbnb, Stripe, Facebook) have delightful micro-interactions that users notice and remember. Learning Lottie positions you to create premium product experiences. Designer + developer collaboration via Lottie is frictionless: export JSON, embed, done.

🔧 工具與生態
Adobe After EffectsLottie Web libraryReact LottieLottieFilesBodyMovin pluginFigma (emerging Lottie export)Visual Studio CodeChrome DevTools

💰 各地區薪資

地區初級中級高級
USA$65,000$110,000$170,000
UK£39,000£67,000£103,000
EU€43,000€73,000€112,000
CANADACA$60,000CA$105,000CA$160,000

🎯 使用 Lottie Motion Animation 的職業

Motion Graphics Designer

❓ 常見問題

What's the difference between Lottie and CSS animations?
CSS = 60fps, but limited capabilities (simple transitions, transforms). Lottie = complex animations, pixel-perfect, designer control. CSS good for simple hover effects. Lottie good for complex micro-interactions, onboarding, product tours.
Why is Lottie smaller than video?
Video is raster (pixels). Lottie is vector JSON. A 10-second video = 5-50MB. Same 10-second Lottie = 50-200KB. 100x smaller because JSON describes shapes, not pixels.
Can I edit Lottie animations after export?
Limited. You can trigger animations (play, pause, seek) via code. You can't modify animation frames. Major changes = re-export from After Effects.
Which designers can create Lottie animations?
Anyone using After Effects. Animation must be exported via BodyMovin plugin. Figma is adding Lottie export (beta). Most Lottie is After Effects.
Can Lottie animations be interactive?
Yes. Play/pause, seek to frame, speed control, color changes. User clicks button = animation plays. Scroll triggers animation progress.

不確定這項技能適不適合你？

做一下職業匹配，我們會推薦合適的方向。

找到最適合我的技能 →

找到理想的職業方向

在 2,521 個職業中進行技能匹配。免費。

免費做職業匹配 →