WEEK4 – DAY3 – 新老師與網頁動畫

今天是新老師來教我們上Javascript,這位老師的教學風格很有熱情,但缺點是容易偏題,講一講會延伸到奇怪的地方,還有一句話結束會有口頭禪,比如「哼」。因為今天主要是複習,所以講的新內容不多。我們班同學普遍比較害羞、內斂(也有可能是在睡覺),沒什麼人願意互動,我能體會,老師想要維持熱情也很難。

下午的 Lab課程,我開始思考做完網頁後還能加什麼功能。我很想加入一個可互動的 2D 動畫,覺得這樣會很有趣。我考慮放一個簡單的雷姆跳舞,雖然我不是動漫迷,但之前有看到有人這樣做,可愛到讓我印象蠻深刻的。但這需要用到一些新的套件和技術,並結合 Javascript,目前看到也想嘗試技術有 GSAP。

我也去逛了很多網站,但一直找不到雷姆的模型,就想要不要去 Bilibili、YouTube,或其他有 GIF 和 MP4 的網站抓圖,再處理成不同的動作。這個方法雖然能讓我控制每一幀的動作,但過程很花時間,結果也不確定。所以我想先試試現成的,看看別人寫的,對於要實作的內容比較有個方向,也能快速地看到成果。

最後我找到了 Live2D Widget 和 OhMyLive2D 這兩個專案。Live2D Widget可以用 CDN 快速引入,功能也很多,但自定義回覆和動態動作很不方便,還需要把整個倉庫下載下來,對我這種新手來說太大、太難維護了。

後來發現 OhMyLive2D 是很好的選擇,但在實測時發現官方文檔有錯誤,因為字母大小寫問題、範例問題,導致無法正常匯入功能。解了很久後,終於把基礎功能做出來了。

現在已經完成了基本功能,接下來想加一些新的功能,比如網頁跳轉。如果順利,明天應該能把動態效果的部分都嘗試完。之後計劃做會員登錄、串接資料庫、輸入書籍內容、頁面跳轉功能,甚至考慮做一個購物車,剩下一個禮拜多,不確定時間夠不夠用。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *