2022年12月14日 星期三

HTML5 : 柵欄動畫產生器

2022年12月14日 星期三

自從 2020年底,在網路上看了 Brusspup 的 Animated Optical Illusion 影片以後,研究了好一陣子的「柵欄動畫」(Moiré Animation),照原理,利用 Inkscape 將多格的原圖重組成一張圖片,就可以利用「柵欄」在上面平移,看到動畫;後來甚至設計了柵欄的 3D 模式,並以 3D printer 印出來,可以當玩動畫的柵欄,也能拿來當手繪柵欄動畫的冶具,詳情可以參考 Blogger 中舊文:

來到 2022年,又心血來潮,想玩玩彩色版的,在四月時,寫了個「柵欄動畫產生器」,可以將多張圖片或照片加入後,自動依設定生成「柵欄動畫」的圖片及柵欄,接著可以在電腦上玩,或是將圖片及柵欄匯出後,以印表機或影印機印出來,將圖片印在紙上、柵欄印在透明的投影片上,即可拿在手上玩。

[圖1] 柵欄動畫產生器的操作程序

在柵欄動畫產生器中,可以選擇是要用預設的「矩形柵橺」或是「圓形柵欄」,前者在玩的時候是用平移的方式產生動畫,圓形的則是將圓心固定,以旋轉的方式產生動畫;也能自訂柵欄縫隙大小及要輸出的柵欄動畫尺寸大小。使用的時候,記得先設定好各項設定,再開始加入圖片。

[圖2] 柵欄動畫產生器的功能按鈕

[圖2] 是動畫產生器左上角的功能按鈕,由左而右,依序為:

  1. 匯出動畫圖片檔案,可供列印。
  2. 匯出動畫柵欄圖片檔案,可供列印。
  3. 匯出一頁式的動畫網頁檔案,開啟網頁檔案即可播放動畫。
  4. 調整圖片順序或是增加/刪除圖片。
  5. 重新製作。

按底下的按鈕即可啟動「柵欄動畫產生器」,進入動畫產生器後,按右上角的小叉叉可以關閉動畫產生器,回到文章。


Your browser does not support the HTML5 canvas tag.

柵欄縫隙大小:

圖片大小限制(橫)

圖片大小限制(直)

玩玩做好的範例

底下這個是以四張照片完成的柵欄動畫,在下載動畫網頁以後,將語法篏入 Blogger 中。可以玩玩看:

這個影片中的鬧鐘鐘面則是利用柵欄動畫產生器所製作的圓形柵欄動畫,動畫相片印在紙上後,貼在鐘面,而圓形的柵欄則是印在透明投影片上,固定在秒針上:



相關連結


沒有留言:

張貼留言

 
雄::gsyan © 2009. Design by Pocket