iT邦幫忙

2019 iT 邦幫忙鐵人賽

0
自我挑戰組

程式設計師大冒險系列 第 77

[77/150]CPE一星題庫(十)動畫區製作選擇

找到動畫區範例LeetCode Animation作者MisterBooo,筆者想做跟這個類似。目前知道GIF檔和canvas可以達成效果,實作以後才知道哪個適合。

【大綱】

  • 實作過程
  • 心得
  • 總結

【實作過程】

參考:十大經典排序算法動畫與解析作者MisterBoooLeetCode Animation作者MisterBooo(大陸網站)、 get style values in js 提問stan
上面雖然是參考,不過對演算法學習很有幫助。

利用開發者工具檢視範例網頁,可以知道是用GIF檔製作。
用PPT製作GIF再丟到網頁上,製作效率會比較快。
不過也有可能是筆者對canvas不熟,所以才覺得慢。

中間想爬蟲題目原文URL,所以用開發者工具檢視就被葉佩了。
https://ithelp.ithome.com.tw/upload/images/20181216/200919102DoIxLD7NN.jpg
筆者可是GOOGLE派的,暫時還不打算用Firefox。
爬蟲目前沒有成功,雖然有找到程式碼,但是抓iframe卻失敗。
如果沒辦法順利爬蟲,可能要手動處理。

【心得】

很難想像千行以上程式,雖然可以用滑鼠選取物件跳到該段。
不過了解架構還是花了一些時間,才知道哪一行是需要的。
雖然目前專案程式行數很多,但大多是資料庫資料。

【總結】

沒能完成一個動畫,但是有找到更適合方法。
直接用PPT做GIF檔,PPT雖然不到做動漫主題曲程度,但是設定圖形還是沒問題。
感謝撥冗閱讀。


上一篇
[76/150]CPE一星題庫(九)添加題目PDF檔點擊事件
下一篇
[78/150]CPE一星題庫(十一)成功製作動畫區
系列文
程式設計師大冒險115
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言