Splineでは、マウスが押されたとき、離れたとき、重なったとき、マウスホイールを動かしたときのアニメーションを設定することができます。
[例題]Y軸に1回転するアニメーションの設定を行います。
【States】右側の「＋」の選択で、[State]項目が出来ます。
【Events】右側の「＋」の選択で、設定項目が表示されます。
Type／Mouse Downを選択します。
Rotation／Yに360と入力します。
Y軸に1回転するアニメーションが出来上がります。
Toggle、Cycle、Rewind、Repeatの選択によって変化する、アニメーションの違いを見ていきます。
※サンプルでは、アニメーションを強調するために、「Transition：Spring」を設定しています。
・Tgoggle：Yes／Cycle：非表示／Rewind：非表示／Repeat：非表示
・マウスで対象物をクリックするごとに右回転と左回転を交互に行います。
https://my.spline.design/-833f703f6e8b72b8b2dbbc3982093ef3/
・Cycle：Yes／Rewind：No／Repeat：No
・マウスで対象物をクリックすると右回転と左回転を1度行います。両回転の終了時にトランジション
https://my.spline.design/cycleyesrewindnorepeatno-8c53eaac19c7e08a53d498c6ecb082ff/
・Cycle：Yes／Rewind：Yes／Repeat：Yes
・マウスで対象物をクリックすると右回転を1度行った後は、左回転と右回転を180°繰り返します。
https://my.spline.design/cycleyesrewindyesrepeatyes-d7bcd22c54e44ccba98d483c8ce0578a/
・Cycle：No／Rewind：非表示／Repeat：Yes
・マウスで対象物をクリックすると右回転を繰り返します。
https://my.spline.design/cyclenorewindrepeatyes-ff32a2589da9a765da647cbbb5fb2b30/
各項目の詳細
■Type
– Mouse Down／マウスボタンが押された時のアニメーション
– Mouse Up／マウスボタンが離れた時のアニメーション
– Mouse Hover／オブジェクトにマウスが重なった時のアニメーション
– Scroll Wheel／マウスのスクロールホイールを動かした時のアニメーション
■Type／Mouse Down
■Type／Mouse Up
– Url／リンク先の設定
– Toggle／オン・オフの切り替え
– Object／アニメーションを設定する対象物の選択
– State／複数のアニメーションを設定した際に選択
– Cycle／アニメーションの再生と逆再生（Toggle選択時は非表示）
– Repeat／再生の繰り返し（Toggle選択時は非表示）
– Transition／動き方の設定
– Duration／アニメーションのスピード
– Delay／アニメーションが開始されるまでの遅延時間
– Delay Repeat／アニメーションの間隔時間設定
– Position／位置の設定
– Scale／拡大・縮小の設定
– Rotation／回転の設定
■Type／Mouse Hover
■Type／Scroll Wheel
– Object／アニメーションを設定する対象物の選択
– State／複数のアニメーションを設定した際に選択
– Cycle／アニメーションの再生と逆再生（Toggle選択時は非表示）
– Repeat／再生の繰り返し（Toggle選択時は非表示）
– Transition／動き方の設定
– Duration／アニメーションのスピード
– Delay／アニメーションが開始されるまでの遅延時間
– Delay Repeat／アニメーションの間隔時間設定
– Position／位置の設定
– Scale／拡大・縮小の設定
– Rotation／回転の設定
https://spline.design/
Splineとは：
ブラウザやアプリで、無料でも3D制作ができるサービスです。
Blenderなどの本格的な3Dソフトは、敷居が高いと感じたので、
初心者としては、Splineから始めてみました。
