基礎動畫

Chapter 4

APP INVENTOR 動畫概念

• 必須在畫布 (Canvas) 中
• 有兩種動畫元件
• 圖片精靈 (ImageSprite)：速度較慢
• 球形精靈 (Ball)：無法變更圖形

​

• 怎麼移動
• 自己動
• 拖曳
• 程式設計(使用計時器)

​

新增專案

1

2

新增專案

3

4

加入 CANVAS(畫布)

2

拖曳

1

變更寬度

3

變更寬度

4

5

變更高度

6

變更高度

7

8

加入 球形精靈 (BALL)

2

拖曳

球形精靈 重要屬性說明

移動方向

0

90

180

270

移動時間間隔

(ms)

顏色

半徑

移動速度

顯示 或 隱藏

變更 球形精靈1 顏色

1

2

變更 球形精靈1 半徑

3

變更 球形精靈1 移動速度

4

模擬執行結果

停在這裡不動

反彈概念

• 什麼時候反彈？
• 碰到邊界的時候
• 怎麼反彈？
• 改變移動方向
• 0⁰ 🡪 180⁰
• 180⁰ 🡪 0⁰

​

​

• 使用內建函式

公式：新的移動方向 = 180 – 原來的移動方向

邊緣偵測

1

2

3

變更移動方向

4

5

變更移動方向

串接至這裡

公式：新的移動方向 = 180 – 原來的移動方向

變更移動方向

1

2

公式：新的移動方向 = 180 – 原來的移動方向

變更移動方向

串接至這裡

公式：新的移動方向 = 180 – 原來的移動方向

變更移動方向

1

2

公式：新的移動方向 = 180 – 原來的移動方向

變更移動方向

串接至這裡

公式：新的移動方向 = 180 – 原來的移動方向

變更移動方向

改為180

公式：新的移動方向 = 180 – 原來的移動方向

變更移動方向

1

2

公式：新的移動方向 = 180 – 原來的移動方向

變更移動方向

串接至這裡

公式：新的移動方向 = 180 – 原來的移動方向

觀察執行結果 – 會反彈

問題思考

• 上下反彈公式？ 90⁰ 🡨🡪270⁰