立即登入

或使用以下方式登入
尚未有帳戶?現在建立帳戶!
驗證你的電話號碼
已發送驗證碼訊息至你的電話號碼。 輸入驗證碼以啟動你的帳戶。
在此輸入驗證碼
沒有收到驗證碼?
登入
/立即註冊
語言設定
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
  • 你的工作會置頂於工作版上
不用了, 謝謝!
Are you sure to repost?
取消
Restart Job
確認要關閉工作?
請問關閉工作的理由是?
已在Freehunter上找到適合人選
已在其他渠道找到適合人
工作暫時取消
沒有特別原因
提交
保留工作
關閉工作
工作已關閉
OK
Your job has been repost
OK
你身處的位置是
版網頁
Do you want to switch to
site?
不要
好的