---
disqus: paoyung
description: 動態圖片在顯示上比單一圖片來得活潑且具有較佳的互動感，在各類顯示螢幕上已是必備的元素了。而 GIF 格式的圖檔裡包含了多張相關且連續的圖片，依續播放則能達成動態的效果，其在網頁上已被大量的運用，因此是取得容易的素材之一，若能成為小型裝置上的動態圖片來源，即可先看到呈現的效果，且能降低製作和取材的難度。而在MicroPython上該如何實現呢?
---

# MicroPython GIF 動態圖
###### tags: `致敬` | `MicroPython` | `ESP32`

> [color=#58f][name=Paoyung][time=Jun 29, 2022][:snake: ℳ𝒾𝒸𝓇ℴ𝒫𝓎𝓉𝒽ℴ𝓃 隨手記](/@PaoyungChang/mpy_trifiles)

> [color=green] <span class="c_maroon">相關文章 👉 [MicroPython 真動態圖](/@PaoyungChang/mpy_gif2)</span>

前言
---
>[color=skyblue]<span class="c_brown f_sz11">這是一篇致敬文。目的是用 MicroPython 以更為簡捷的方式達成與 Arduino IDE 相同的程式效果。</span>

先看一段影片：(前段為静態圖的說明，動態的部份請從 **03:55** 開始觀賞)
{%youtube 0KGMFhFQ0YY %}

動態圖片在顯示上比單一圖片來得活潑且具有較佳的互動感，在各類顯示螢幕上已是必備的元素了。而 GIF 格式的圖檔裡包含了多張相關且連續的圖片，依續播放則能達成動態的效果，其在網頁上已被大量的運用，因此是取得容易的素材之一，若能成為小型裝置上的動態圖片來源，即可先看到呈現的效果，且能降低製作和取材的難度。但從以上的影片中可以得知要將 GIF 在 Arduino IDE 架構中置於小型如 SSD1306 OLED 的設備上來顯示，仍需經過以下幾個步驟：
1. 從網路下載 GIF。
2. 利用網路工具將 GIF 分成多個 frames 圖檔。
3. 利用圖片軟體批次改變大小，並存成 bitmap 格式圖檔。
4. 使用影片作者所撰寫的工具製作出資料格式片段及程式片段。
5. 將上述的資料片段及程式片段貼至主程式中。

換人做做看
---
從上述的程序中可以發現需要切換使用不同的工具或軟體來達成各個階段性目標，才能再往再下一步驟進行。若換成 MicroPython 的生態又該怎麼做呢? 如同[之前運用字庫的處理方式](/@PaoyungChang/mpy_cns11643)，會先以 Python 處理前段，後續再由 MicroPython 接手。在 Python 中有個強大的影像處理函式庫 PIL，只要調用它就可以把上述的步驟 2～4 簡化成單一步驟，且個人認為轉出來的圖檔細緻度頗佳。簡化後如下：
1. 從網路下載 GIF。
2. **使用 Python 分 frames、resize、轉單色並存為 list 供後續載入調用。**
3. 將步驟 2. 的 list 上傳並載入即可秀出 GIF 效果。

高<span class="c_brown">枕</span>無憂
---
Python 這個方便的影像處理函式庫叫做 PIL，即 **P**ython **I**maging **L**ibrary，但它不再支援新版的 Python，而 [Pillow](https://github.com/python-pillow/Pillow) 是 PIL 的分支且持續更新中，它已完全的取代了 PIL，且在程式中仍以 PIL 的名稱來調用，所以可以延用原本的方法和參數。若您不曾安裝 Pillow 函式庫，操作前請先使用以下指令安裝。

pip install pillow

>[color=orange]<span class="c_black f_sz11">參考: [Pillow 的 github](https://github.com/python-pillow/Pillow)</span>

步驟 2 的程式如下：

:snake: <span class="c_brown f_sz11">使用 <span class="f_b c_darkGreen">Python</span> 執行分 frames、resize、轉單色及存 list，產生的檔案需上傳至 MicroPython</span>

{%gist b9954dd10189ec77bbc44385dd58faf7 %}

調用
---
:snake: <span class="c_brown f_sz11">在 <span class="f_b c_darkGreen">MicroPython</span> 以 SSD1306 顯示動態圖 (SSD1306 需先做好設定)</span>
>[color=orange] <span class="f_sz10">SSD1306設定請參考： [my_util.py 說明](/@PaoyungChang/my_util_py)</span>

{%gist fffbfa243b0d6d5d38a229a7456af274 %}

展示
---
若您已觀賞完以 Arduino IDE 來完成 GIF 的影片並瞭解其過程，會發現在 Python 與 MicroPython 的聯手配搭下，整個過程變得相對簡單且快速許多，而本篇提供的程式可直接取用執行即可生成 frames 檔，也可做為參考並修改成更適合自己的版本。以下即為程式執行的輸出結果。 :laughing:

{%youtube jNGmzGXSXNo %}

> [color=orange][name=Paoyung Chang][time=Sat, Jul 2, 2022 3:55 PM]<span class="c_darkSlateGrey f_sz12 f_b"> :loudspeaker: 別走開，續集來囉！ [MicroPython 真動態圖](/@PaoyungChang/mpy_gif2)</span>

{%hackmd /@PaoyungChang/intro_v0702 %}

{%hackmd /@PaoyungChang/css_01 %}