立即登入

或使用以下方式登入
尚未有帳戶?現在建立帳戶!
驗證你的電話號碼
已發送驗證碼訊息至你的電話號碼。 輸入驗證碼以啟動你的帳戶。
在此輸入驗證碼
沒有收到驗證碼?
登入
/立即註冊
語言設定
ENG
中(港)
中(台)

發佈工作

類別

>

資料

>

內容

我想尋找 ...

指定專長 (請選擇至少一個)

下一步
發佈工作可以即時通知所有freelancer,讓你免費及快速找到合適工作人選。每當有freelancer向你的工作提交回覆,你便會收到電郵通知(你在此授權Freehunter為你以電郵方式收集報價資料)。 你的電郵將會收到來自最合適的申請者的訊息。

日期

工作時間

位置

上一步
下一步

工作主題

工作類型

工作內容

預算金額

發佈工作
上一步

【網頁設計】 免費UI 網頁動畫製作工具大公開!

【網頁設計】 免費UI 網頁動畫製作工具大公開!

 

如果對UI/UX不太熟悉的你可以先瀏覽【網頁設計】一文學懂什麼是 UI/UX設計,了解UI/UX對於網頁設計的重要性!在網頁加入動畫效果能令網頁生色不少,然而動畫製作背後涉及不少繁複步驟,令不少人卻步!

 

幸好現時坊間有不少第三方JavaScript動畫庫,為大家提供更多選擇!Freehunter明白你正努力提升網站的用戶體驗,所以今天我們為你整合各類網頁動畫製作工具,助你在網頁設計更進一步!

 

 

免費網頁動畫製作工具1: GreenSock (GSAP)

GreenSock (GSAP)特點:

  • 通用各大瀏覽器
  • 符合 HTML5 規範
  • 提供不同的版本,不同容量,滿足不同需求

GSAP 是目前其中一個最受歡迎的免費動畫庫。它是 JavaScript 的套件,而且能符合 HTML5 的規範,能套用在幾乎現今所有的瀏覽器,可以從簡單的效果延伸到各種複雜的特效,方便管理與改動。GSAP提供了不同的版本如TweenMax、TweenLite、TimelineLite、TimelineMax等等,滿足不同使用者的需求。

 

 

GreenSock (GSAP)例子

 

 

 

免費網頁動畫製作工具2: Anime.js

Anime.js特點:

  • 容量極小,只有6.2KB
  • 配合CSS性能、DOM及SVG屬性
  • 支援多種觸發機制

Anime.js的最大特點是它極小的容量!相比其他網頁動畫製作工具,它只佔極小電腦容量,只有6.2 KB。你可以利用 Anime.js在LOGO、按鈕、圖像等各類元素上加入動畫,它能配合CSS性能、DOM及SVG屬性。它支援各種常見的觸發機制,比如點擊、懸停、滑動,提升網站的UI/UX體驗。

 

 

Anime.js例子

 

 

 

免費網頁動畫製作工具3: Three.js

Three.js特點:

  • 能製作3D動畫
  • 應用程式介面簡單
  • 提供官方在線編輯器

Three.js 是一個製作3D動畫的定件,它是一套基於 WebGL 開發出的 Javascript 函式庫,它提供了比 WebGL 更簡單的 Javascript 應用程式介面,讓開發者能夠輕易在瀏覽器創作 3D 繪圖。Three.js 使用場景放置物件,把物件增加到場景之後,需要為場景提供一個相機(觀察點),然後使用繪製器繪製,令圖像呈現3D效果。

 

 

Three.js例子

 

 

 

結語🌟

在網頁加入動畫效果能令網頁生色不少,但同時製作適合網頁風格的動畫亦非想像中簡單!正尋找專業的網頁設計師?Freehunter有超過30000Freelancer,當中不少網頁設計師很多都具備專業資格和豐富經驗,相信他們對能提供專業的意見和協助!趕快免費發佈工作以尋找專業Freelancer為您服務吧!

 

精選30,000+位自由業者,涵蓋18種不同行業,
一個網站一應俱全。

 

參考資料及多媒體來源:

https://yalantis.com/blog/web-animation-technologies-and-tools/

https://www.codeinwp.com/blog/best-javascript-animation-libraries/

https://gogoshark.com/10-best-free-animation-libraries/

https://codepen.io/kassandrasanch/details/mdevxPx

https://luccianos.net/

https://threejs.org/

https://animejs.com/

https://greensock.com/

想更有效率的發佈工作?
限時優惠
推廣工作
NT$1590
  • 即時電郵通知平台上
    所有
    相關Freelancer
  • 你的工作會置頂於工作版上
不用了, 謝謝!
確認要關閉工作?
關閉工作
保留工作
工作已關閉
OK
你身處的位置是
版網頁
你想回到
版網頁嗎?
好的