このチュートリアルでは、タイマーの作成方法を学びます。

https://uxpincommunity.cdn.prismic.io/uxpincommunity/278f67c9-6463-4286-91be-ad559268385c_timer-final.mp4

→このチュートリアルで使用されているサンプルのダウンロードはこちらより

デザインの設定

1. 左側のクイックツールバーから、キャンバスにTextとIconを追加します。
2. テキスト要素の中に00:00と入力します。
3. アイコンを選択し、トップバーのAdd Stateをクリックします。
4. Pause(一時停止)とStart(開始)の2つのStatesを作成します。Pause(一時停止)はベースのステートです。2つのステートのアイコンは、プロパティパネルのIconセクションで変更できます。

タイマー変数**(Variable)**の作成

1. 左ツールバーの下部にある$をクリックし変数を追加します。
2. New Variableをクリックします。
3. 名前をTimerにします。
4. デフォルト値を1に設定します。
5. Enterを押して保存します。

クリック時のアイコンステートの変更

Iconに２つのインタラクションを追加します。1つはベースステート（Pause）に、もう一つは再生されている場合のステートを作成してください。（例：サンプルでのステート名「Start」） ベースステートにインタラクションを追加すると、他のステートにも反映します。

1. Triggerを Click（Tap）に設定します。