104學習

網頁動畫

AI 專區學習課程

證照測驗共學

網頁動畫

關注

邀請朋友

Line

Facebook

複製連結

取消

「網頁動畫：負責設計與製作吸引人的網頁動畫，以提升使用者體驗和互動性。主要職責包括創建動態效果、優化網頁性能以及與UI/UX設計師及開發團隊密切合作，確保視覺元素與功能的完美結合。所需技能包括精通動畫軟體（如Adobe After Effects）、HTML5、CSS3及JavaScript，並具備良好的視覺設計能力與創意思維。在台灣職場，需特別適應快節奏的數位環境並具備良好的溝通技巧，以跨部門協作達成共同目標。」

關於教室

關注人數 0 人

104人力銀行從職缺中挑選出常見技能所成立的官方教室，提供大家進行共學互動。

學習主持人

持續分享知識，
有機會成為官方教室主持人

教室標籤

網頁動畫

Hi~ 歡迎分享學習資源，有學習問題可匿名向Giver發問！

我要分享

我要提問

網頁動畫學習推薦

全部

影片

文章

Hahow 好學校

關注

Hahow 小蛙編輯

創作內容編輯

2022/08/29

翻滾吧蔥油餅！簡單 SVG 動畫製作_下集：讓場景元件動起來

本篇文章接續上集，要帶大家簡單做出好玩的 SVG 網頁動畫，讓蔥油餅翻滾！怎麼讓場景元件動起來，一步步帶你動手做。

本文翻自 [週四寫程式系列] 來做SVG動畫讓蔥油餅翻滾吧!，若是對文章內容有疑問，或是想要老闆手把手帶你飛，都可以觀看影片詳細內容。

在上集中，老闆帶大家從發想素材、將素材引入網頁，到製作場景進出的動畫。接下來我們將要賦予場景中的每個元件生命。

本篇文章會談到：

本篇文章中，老闆會帶大家完成蔥油餅小島中角色與物件的動畫，也會提示大家每個部份需要注意的地方，以下動畫的設定數值都都只是參考，開發時大家都能試試看不同的數值。

實際應用﹔讓場景中的元件動起來

怎麼讓素材動起來？

一、驚嘆號

首先我們從驚嘆號下手，老闆讓驚嘆號分布在場景的各處，用意是要提示使用者這邊有驚喜，引導使用者靠近這個區塊。為了增加提示效果，我們利用左右晃動的動畫效果，固定時間後會再撥放。

這邊使用了新的 css 屬性 animation ，需要搭配 @keyframes 使用，在 keyframes 用百分比去註記不同時間該顯示的樣式，透過 animation 定義動畫總時間，這也代表這個 keyframes 可以提供給不同元件使用，使用的元件賦予不同的時間等屬性，就是一個全新的樣貌。

要注意元件會以左上角為旋轉中心點，適時加上 transform-origin, transform-box 讓動畫更加合理。

詳見原文>

https://hahow.in/cafeteria/articles/60cafbca154d3d6876f6504c

看更多