Try   HackMD

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

作者:王一哲
日期:2022/5/9

本次課程檔案已上傳至 GeoGebraTube,可以線上操作或下載檔案。


目標

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

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
使用按鈕及核取方塊控制動畫


基本的水平拋射動畫

  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)
    

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
基本的水平拋射動畫


新增控制動畫的按鈕

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

    ​​​​state = False
    
  2. 由工具列選取按鈕工具,於繪圖區上想要新增按鈕的位置點一下滑鼠左鍵,看到出現的按鈕視窗先按下確定


    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

由工具列新增按鈕

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
按鈕視窗


  1. 再開啟按鈕的屬性視窗,先在一般分頁中將按鈕名稱改為 onoff


    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
按鈕屬性視窗:一般


  1. 再於程式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 時將標籤顏色更新為 紅色,反之則更新為 藍色。比較特別的地方在於,要先將屬性視窗關閉,才會真的更改按鈕的屬性。一開始按鈕標籤上的字還沒有改變,但是在點選按鈕之後就會改變了。

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
按鈕屬性視窗:程式

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
新增的按鈕

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
點取按鈕之後的效果


  1. 用相同的方法新增將時間 t 重置為 0 的按鈕 reset,其中程式碼改為
    ​​​​SetValue(t, 0)
    

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
新增重置按鈕


新增控制動畫的核取方塊

  1. 由工具列選取核取方塊工具,於繪圖區上想要新增按鈕的位置點一下滑鼠左鍵,看到出現的按鈕視窗先按下套用,同時會在代數區新增一個布林值 a。


    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
新增核取方塊視窗

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
新增核取方塊


  1. 開啟核取方塊的屬性視窗,於程式OnUpdate 分頁中新增以下的程式碼
    ​​​​StartAnimation(t, a)
    ​​​​SetCaption(a, If(a, "暫停", "開始"))
    
    一開始按鈕標籤上的字還沒有改變,但是在點選核取方塊之後就會改變了。


    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
核取方塊屬性視窗:程式

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
可以控制動畫的核取方塊

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
最終成果


參考資料

  1. GeoGebra 討論區:Using Checkboxes or Buttons to start and stop "animation"
  2. GeoGebra 討論區:How to make a button to start and stop animation
  3. GeoGebra 官方說明書:StartAnimation Command
  4. GeoGebra 官方說明書:StartCaption Command
  5. GeoGebra 官方說明書:SetColor Command
  6. GeoGebra 官方說明書:SetValue Command


tags:GeoGebra