# GeoGebra 教學 14：使用按鈕及核取方塊控制動畫

> 作者：王一哲
> 日期：2022/5/9

本次課程檔案已上傳至 [GeoGebraTube](https://www.geogebra.org/m/zph29waw)，可以線上操作或下載檔案。

<br />

## 目標

我們之前都是在數值滑桿上按滑鼠右鍵，再點選快速選單中的開始動畫，但是這樣似乎有點麻煩。比較直覺的操作方式，應該是有一個按鈕，點一下開始動畫，再點一下暫停動畫；另一個按鈕則是重置動畫，點一下將時間歸零；或是有一個核取方塊，打勾開始動畫，取消打勾停止動畫。下圖是以水平拋射為例，使用按鈕及核取方塊控制動畫。

<img height="70%" width="70%" src="https://imgur.com/E2Lwq4y.png" style="display: block; margin-left: auto; margin-right: auto;"/>
<div style="text-align:center">使用按鈕及核取方塊控制動畫</div>
<br /><br />

## 基本的水平拋射動畫

1. 於指令列中依序輸入以下指令定義數值

    H = 10
    g = 9.8
    v_0 = 10
    tmax = sqrt(2*H/g)

2. 於指令列中輸入以下指令新增數值拉桿定義時間 t，再開啟**屬性視窗**，將動畫種類調整為**遞增**。

    t = Slider(0, tmax, 0.01*tmax)

3. 於指令列中輸入以下指令新增隨時間移動的點P。

    P = Point({v_0*t, H - 0.5*gt**2})

4. 於指令列中輸入以下指令新增水平抛射軌跡。到步驟4為止，就是一個可以由數值滑桿控制的水平拋射動畫。

    trail = Curve(v_0*t, H - 0.5*g*t**2, t, 0, tmax)

<br />

<img height="70%" width="70%" src="https://imgur.com/q4qGLvm.png" style="display: block; margin-left: auto; margin-right: auto;"/>
<div style="text-align:center">基本的水平拋射動畫</div>
<br /><br />

## 新增控制動畫的按鈕

1. 於指令列中新增控動畫用的布林值 state 並預設為**否** (**False**)。雖然在 GeoGebra 當中 True 及 False 可以用小寫字母開頭，不過我為了符合大多數程式語言的寫法，以下的指令中都還是採用大寫字母開頭。

    state = False

2. 由工具列選取**按鈕**工具，於繪圖區上想要新增按鈕的位置點一下滑鼠左鍵，看到出現的按鈕視窗先按下**確定**。
<br />
<img height="20%" width="20%" src="https://imgur.com/xLUzIf6.png" style="display: block; margin-left: auto; margin-right: auto;"/>
<div style="text-align:center">由工具列新增按鈕</div>
<br />

<img height="40%" width="40%" src="https://imgur.com/fsWOqJf.png" style="display: block; margin-left: auto; margin-right: auto;"/>
<div style="text-align:center">按鈕視窗</div>
<br /><br />

3. 再開啟按鈕的屬性視窗，先在**一般**分頁中將按鈕名稱改為 **onoff**。
<br />
<img height="75%" width="75%" src="https://imgur.com/yZIG9aT.png" style="display: block; margin-left: auto; margin-right: auto;"/>
<div style="text-align:center">按鈕屬性視窗：一般</div>
<br /><br />

4. 再於**程式** ⇒ **OnClick** 分頁中新增以下的程式碼

    SetValue(state, If(state, False, True))
    StartAnimation(t, state)
    SetCaption(onoff, If(state,"暫停", "開始"))
    SetColor(onoff, If(state, "Red", "Blue"))

第一行的 **SetValue** 用來更新布林值 state 的數值，若 state 原為 True 將它更新為 False；反之則更新為 True。第二行的 **StartAnimation** 用來控制動畫，動畫由第一個參數裡的物件控制，在此為數值滑桿 t，當第二個參數值為 True 時會執行動畫。第三行的 **SetCaption** 用來更新按鈕 onoff 的標籤，若 state 的值為 True 時將標籤更新為 **暫停**，反之則更新為 **開始**。第四行的 **SetColor** 用來更新按鈕 onoff 的標籤顏色，若 state 的值為 True 時將標籤顏色更新為 **紅色**，反之則更新為 **藍色**。比較特別的地方在於，要先將屬性視窗關閉，才會真的更改按鈕的屬性。一開始按鈕標籤上的字還沒有改變，但是在點選按鈕之後就會改變了。
<br />

<img height="75%" width="75%" src="https://imgur.com/Z9Xlt2x.png" style="display: block; margin-left: auto; margin-right: auto;"/>
<div style="text-align:center">按鈕屬性視窗：程式</div>
<br />

<img height="70%" width="70%" src="https://imgur.com/WhwXEGc.png" style="display: block; margin-left: auto; margin-right: auto;"/>
<div style="text-align:center">新增的按鈕</div>
<br />

<img height="70%" width="70%" src="https://imgur.com/rAv0WL0.png" style="display: block; margin-left: auto; margin-right: auto;"/>
<div style="text-align:center">點取按鈕之後的效果</div>
<br /><br />

5. 用相同的方法新增將時間 t 重置為 0 的按鈕 reset，其中程式碼改為

    SetValue(t, 0)

<br />
<img height="70%" width="70%" src="https://imgur.com/soCcC3o.png" style="display: block; margin-left: auto; margin-right: auto;"/>
<div style="text-align:center">新增重置按鈕</div>
<br /><br />

## 新增控制動畫的核取方塊

1. 由工具列選取**核取方塊**工具，於繪圖區上想要新增按鈕的位置點一下滑鼠左鍵，看到出現的按鈕視窗先按下**套用**，同時會在代數區新增一個布林值 a。
<br />
<img height="60%" width="60%" src="https://imgur.com/eKaJVw4.png" style="display: block; margin-left: auto; margin-right: auto;"/>
<div style="text-align:center">新增核取方塊視窗</div>
<br />

<img height="75%" width="75%" src="https://imgur.com/gvu8N4D.png" style="display: block; margin-left: auto; margin-right: auto;"/>
<div style="text-align:center">新增核取方塊</div>
<br /><br />

2. 開啟核取方塊的屬性視窗，於**程式** ⇒ **OnUpdate** 分頁中新增以下的程式碼

    StartAnimation(t, a)
    SetCaption(a, If(a, "暫停", "開始"))

一開始按鈕標籤上的字還沒有改變，但是在點選核取方塊之後就會改變了。
<br />
<img height="60%" width="60%" src="https://imgur.com/lk2abnR.png" style="display: block; margin-left: auto; margin-right: auto;"/>
<div style="text-align:center">核取方塊屬性視窗：程式</div>
<br />

<img height="75%" width="75%" src="https://imgur.com/E2Lwq4y.png" style="display: block; margin-left: auto; margin-right: auto;"/>
<div style="text-align:center">可以控制動畫的核取方塊</div>
<br />

<img height="75%" width="75%" src="https://imgur.com/W8S3dtA.gif" style="display: block; margin-left: auto; margin-right: auto;"/>
<div style="text-align:center">最終成果</div>
<br /><br />

## 參考資料

1. [GeoGebra 討論區：Using Checkboxes or Buttons to start and stop "animation"](https://help.geogebra.org/topic/using-checkboxes-or-buttons-to-start-and-stop-animation-)
2. [GeoGebra 討論區：How to make a button to start and stop animation](https://help.geogebra.org/topic/how-to-make-a-button-to-start-and-stop-animation)
3. [GeoGebra 官方說明書：StartAnimation Command](https://wiki.geogebra.org/en/StartAnimation_Command)
4. [GeoGebra 官方說明書：StartCaption Command](https://wiki.geogebra.org/en/SetCaption_Command)
5. [GeoGebra 官方說明書：SetColor Command](https://wiki.geogebra.org/en/SetColor_Command)
6. [GeoGebra 官方說明書：SetValue Command](https://wiki.geogebra.org/en/SetValue_Command)

<br />

---

###### tags:`GeoGebra`