Lottie 是 Airbnb 開源的一個面向 iOS、Android、React Native、Web 的動畫庫,能分析 Adobe After Effects 導出的動畫,并且能在移動設備上實現原生動畫。
現在使用各平臺的代碼實現一套復雜的動畫,是一件很困難并且耗時的事,我們需要為不同尺寸的屏幕加載不同的素材資源,還需要寫大量難維護的代碼。而 Lottie 可以做到同一個動畫文件,在不同平臺上實現相同的效果,極大減少開發時間,實現不同的動畫,只需要設置不同的動畫文件即可,極大減少開發和維護成本。
二、官方效果圖效果圖:
三、使用方法動畫特效?這里是一個教學視頻,介紹了怎樣去導出一個基礎的動畫,和怎么去加載到 html 頁面中。
地址:https://www.youtube.com/watch?v=5XMUJdjI0L8
四、基礎方法可以調用 lottie.loadAnimation()啟動動畫。它采用以下形式將對象作為唯一參數:
animationData:具有導出的動畫數據的 Object
path:動畫對象的相對路徑(animationData 和 path 是互斥的)
loop:true/false/number
autoplay: true/ false
lottie動畫制作。
name: 動畫名稱
renderer'svg'/'canvas'/'html'
container:在其上呈現動畫的 dom 元素
lottie.loadAnimation({
?container: element, // the dom element that will contain the animation
?renderer: 'svg',
?loop: true,
?autoplay: true,
?path: 'data.json' // the path to the animation json});
五、舉個栗子本地用 serve 起一個服務, 訪問該頁面就可以看到效果:
關于極光極光(Aurora Mobile,納斯達克股票代碼:JG)成立于2011年,是中國領先的開發者服務提供商。極光專注于為移動應用開發者提供穩定高效的消息推送、即時通訊、統計分析、極光分享、短信、一鍵認證、深度鏈接等開發者服務。截止到2019年12月份,極光已經為超過50萬移動開發者和145.2萬款移動應用提供服務,其開發工具包(SDK)安裝量累計336億,月度獨立活躍設備13.6億部。同時,極光持續賦能開發者和傳統行業客戶,推出精準營銷、金融風控、市場洞察、商業地理服務產品,致力于為社會和各行各業提高運營效率,優化決策制定。
版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。
工作时间:8:00-18:00
客服电话
电子邮件
admin@qq.com
扫码二维码
获取最新动态