[別小看SVG 35] 系列完結~最後推薦幾個高效的svg動畫實現工具和庫| HTML CSS SVG 入門教程 HTML5 CSS3 SVG零基礎

学习呀三木
5 位粉絲
6 觀看·2024年9月18日
我的系列課程~就在B站課堂~
🎁 HTML+CSS完整網站項目實訓課程 → https://www.bilibili.com/cheese/play/ss25945
🔥 JavaScript + Nodejs前後端全棧全能課 →https://www.bilibili.com/cheese/play/ss1226
🏆 精通JavaScript和項目實戰課程 →https://www.bilibili.com/cheese/play/ss6998
🎉 後端入門與實操 Shell + Linux + Nodejs →https://www.bilibili.com/cheese/play/ss6988
---
我的高質量免費分享課程
🔥HTML CSS網站開發入門指南
BV1cm42137by
網站開發入門指南目錄網站地址 wdg.hellocode.fun
網站開發入門指南課程源碼
鏈接: https://pan.baidu.com/s/18vNsGTc6bkqg1eF8ZR5-gw?pwd=u3zd 提取碼: u3zd
🔥別小看SVG系列分享
BV1oy411i77z
別小看svg分享課程源碼
鏈接: https://pan.baidu.com/s/1Pc6oaVddT11mRCWIrLUoUA?pwd=nhev 提取碼: nhev
課程目錄網站 也是wdg.hellocode.fun
📚需要加學習交流群的,可以加w.x號 sirmumumu 註明 前端學習
最後我們要給大家介紹幾個
我們在SVG相關的一些動畫交互的處理過程當中
可能會用到的一些比較好用的工具和庫
因爲我們自己雖然已經瞭解了SVG相關的一些知識
也可以通過設置代碼來實現一些簡單的效果
但是當我們要去處理一些相對複雜一些的動畫效果
那麼可能用一些工具來做是更合適也是更方便的
比如說我們接下來要說的第一個東西就是Lottie
Lottie這個是Airbnb這個公司推出的一種開源的動畫解決方案
它在網頁端手機端等等都是可以用的
它的實現思路其實是非常簡單
就是我們通過一些軟件一些工具
先把整個動畫整個效果做完
然後直接導出某種格數的文件
然後再通過JS嵌入到代碼當中
直接播放這個動畫就可以了
比如說它自己現在有一個自身的創作軟件創作工具
你通過這個工具就能快速的製作一些有趣的複雜的動畫效果了
然後這個工具它目前還能自帶的一些交互的能力
也就是你做的這個動畫它現在是可以帶一些交互的功能的
像以前的Lottie這一點是做不到的
你只能通過你自己的代碼在後期去加
這個就比較麻煩
現在就很方便了
你通過它自己的軟件這樣的一個工具
直接做出來的效果就能自帶一些交互的能力了
然後Lottie這個網站上它其實還有一些
就是現成的做好的別人發上來的動畫效果
有免費的也有付費的
免費的話你就可以直接把它的文件下載下來
然後通過JS嵌入到你的代碼當中直接就可以用了
還有一個工具叫做Rive
Rive這個工具它能做的效果就更誇張了
因爲它這個工具它基於的不僅僅是SVG這樣一種能力
它是基於網頁當中的Canvas那個元素
所以基本上你看到任何誇張的效果它都能實現
它自身也帶了一個這種設計軟件設計工具
能讓我們在這樣一個工具裏面
去創作出我們想要的動畫效果 交互效果
然後直接導出再通過JS引入到頁面當中直接去用
它也是可以去帶交互的
所以這兩個工具你可以自行去了解一下
通常來說純SVG的這些動畫效果的話這種二維的
那麼一般用Lottie這個方案就完全夠用了
如果你要做一些比較複雜的很誇張的一些效果的話
那麼可能Rive更合適
除了Lottie和Rive還有兩個庫
我們之前也給大家去介紹過
當然跟SVG相關的庫不止這兩個
只是這兩個可能比較有名一些
剛纔說的Lottie和Rive它適合的是元素本身的一些動畫效果 交互效果
也就是說像前面這兩個它們能實現的動畫和交互
都是侷限在於動畫元素本身的一個範圍內的
但是如果你想實現類似於你這個動畫效果動畫元素
要跟頁面當中的其他元素產生聯動
甚至是跟頁面的一些滾動機制產生聯動
那麼你可能就要用到這種代碼庫了
比如說GSAP它就非常適合
我們看一下GSAP它這個官網
它這個庫其實是非常有名
在很多的這種你看起來非常高級非常有趣的頁面當中
網站當中它都有大量的使用
它能幫我們去實現很多元素變化動畫的效果
當然它不侷限於頁面當中的SVG元素
它任何元素它都可以變化
然後的話像另外這個庫
另外這個庫它其實主要就是來做SVG的動畫效果了
像一些你想基於某種邏輯某種交互
從而讓這個元素髮生特定邏輯變化的這樣一些效果的話
你就可以用像這種動畫的庫來做
到這裏的話我們整個SVG的知識的部分就已經講完了
希望這一系列的更新
確實能幫助到大家對SVG有了一個比較全面的
比較深入的瞭解了
如果你覺得這個系列分享真的對你有幫助的話
那麼一定要記得幫我點個贊或者點個關注
後續我會繼續更新其他的內容
