目次
1 ループ アニメーション: SetLoops(-1 、loopType )
2.アニメーションループ数: SetLoops( count )
3. アニメーション イベントの監視とコールバック: OnStart \ OnComplete
5. アニメーションのカスタム更新コールバック: OnUpdate
6. アニメーション パス コールバック: OnWayPointChange
11. カスタム アニメーション カーブ: SetEase( Curve )
12.アニメーショントランジションエフェクト：SetEase
19. カメラの視点変更をアニメーション化する: DoRatate
21. カメラの視野変更をアニメーション化する: DOFieldIfView
25. マテリアル プロパティの変更をアニメーション化する: DoFloat
26. UI 要素の変更をアニメーション化する: DoSizeDelta
27. アニメーション手振れ効果: DoShakePosition
28. アニメーションオブジェクトの振動エフェクト: DoShakePosition
31. フォントサイズの変更をアニメーション化する: DoFontSize
33. アニメーションカメラの視野角スケーリング: DOOrthoSize
1. はじめに
Dotween は、アニメーションとトランジションを簡素化する Unity のプラグインです。複雑なアニメーション効果を簡単に作成するための一連の強力な機能を提供します。
1.1 プラグインのダウンロード
Unity ストアで dotween を検索します
また
1.2 公式文書
2.インポートとセットアップ
上記のように、Unity ストアで見つかった dotween リソースを自分のリソースに追加し、Unity で順番に選択します
ウィンドウ --> パッケージマネージャー
開いたウィンドウで「My Assets」を選択し、検索ボックスで「dotween」を検索します。
図に示すように:
初めて使用する場合は DOTween をセットアップする必要があります。インポート後にウィンドウが表示されます。開くボタンをクリックするだけです。
または、「ツール」-->「Demigiant」-->「DoTween ユーティリティ パネル」を選択します。
すると、次のような画像が表示されます。
次に、緑色の「DOTween のセットアップ」ボタンをクリックしてセットアップします。下のシアンのボタンは ASMDEF ファイルを生成するためのもので、スクリプトを書くときに毎回 DOTween の内容をエンコードする必要がなくなり、コードを書いた後の切り替え速度が向上します。
ボタンをクリックして次のインターフェースを表示し、デフォルトですべてを選択し、「適用」ボタンを選択します。
3. サンプルコード
1 ループ アニメーション: SetLoops(-1 、loopType )
transform.DOScale(targetScale, duration).SetLoops(-1, LoopType.Yoyo);このコードは、オブジェクトをターゲット サイズ `targetScale` まで滑らかに拡大縮小し、その後元のサイズに戻るなどのループ アニメーションを作成します。
transform.DOMove(targetPosition, duration).SetLoops(-1, LoopType.PingPong);このコードは、オブジェクトを現在の位置からターゲット位置 `targetPosition` まで滑らかに移動させ、その後元の位置に戻すなどの移動アニメーションを作成します。
2.アニメーションループ数: SetLoops( count )
transform.DOMove(targetPosition, duration).SetLoops(loopCount);このコードは、オブジェクトをターゲット位置 `targetPosition` にスムーズに移動し、それを `loopCount` 回ループする移動アニメーションを作成します。
3. アニメーション イベントの監視とコールバック: OnStart \ OnComplete
tween.OnStart(() =>
{
Debug.Log("动画开始");
});
tween.OnComplete(() =>
{
Debug.Log("动画完成");
});このコードは、アニメーションの開始とアニメーションの完了のためのイベント リスナーを追加します。アニメーションが開始されると、最初のコールバック関数が呼び出されて「アニメーション開始」を出力し、アニメーションが完了すると、2 番目のコールバック関数が呼び出されて「アニメーション完了」を出力します。
4.アニメーション遅延コールバック: SetDelay
transform.DOMove(targetPosition, duration)
.SetDelay(delay)
.OnComplete(() =>
{
Debug.Log("延迟回调动画完成");
});このコードは、DOTween プラグインを使用して、アニメーションの遅延コールバック効果を実装します。`transform.DOMove` はオブジェクトの移動のアニメーションを表し、`targetPosition` はターゲットの位置、`duration` はアニメーションの継続時間です。`SetDelay` メソッドはアニメーションの遅延開始時間を設定するために使用され、`OnComplete` メソッドはアニメーションが完了したときにコールバック関数を実行します。ここでは「遅延コールバック アニメーション完了」を出力します。
5. アニメーションのカスタム更新コールバック: OnUpdate
transform.DOMove(targetPosition, duration).OnUpdate(() =>
{
Debug.Log("动画更新中...");
});このコードは、DOTween プラグインを使用して、アニメーションのカスタム更新コールバック効果を実装します。`transform.DOMove` はオブジェクトの移動のアニメーションを表し、`targetPosition` はターゲットの位置、`duration` はアニメーションの継続時間です。`OnUpdate` メソッドはアニメーションが更新されたときにコールバック関数を実行します。ここでは「アニメーション更新...」を出力します。
6. アニメーション パス コールバック: OnWayPointChange
transform.DOPath(path, duration, PathType.CatmullRom).OnWaypointChange(index =>
{
Debug.Log("到达路径点：" + index);
});このコードは、DOTween プラグインを使用して、アニメーションのパス コールバック効果を実現します。`transform.DOPath` はパスに沿って移動するオブジェクトのアニメーションを示します。 `path` はパス ポイントの配列またはリストです。 `duration` はアニメーションの継続時間です。 `PathType.CatmullRom` はパスのタイプを示します。は Catmull-Rom 曲線です。`OnWaypointChange` メソッドは、ウェイポイントに到達するとコールバック関数を実行します。ここでは、「ウェイポイントに到達しました:」とウェイポイントのインデックスを出力します。
7. アニメーション ループ コールバック:
transform.DOMove(targetPosition, duration)
.SetLoops(-1, LoopType.Restart)
.OnStepComplete(() =>
{
Debug.Log("循环结束");
});8 フレームごとのアニメーション: SetOptions
transform.DOLocalPath(path, duration, PathType.CatmullRom).SetOptions(true);このコードはフレームごとのアニメーションを作成し、オブジェクトは指定されたパス配列 `path` に従ってフレームごとにスムーズに移動します。パス上の連続するポイントは、Catmull-Rom 補間アルゴリズムを使用して計算されます。
9. アニメーション遅延: SetDelay
transform.DOMove(targetPosition, duration).SetDelay(delay);このコードは、遅延アニメーションを作成します。これにより、オブジェクトは `delay` 秒の遅延後にターゲット位置 `targetPosition` にスムーズに移動します。アニメーションの継続時間は `duration` 秒です。
10. アニメーションの一時停止と再開: 一時停止/再生
tween.Pause();
tween.Play();このコードは、アニメーションを一時停止および再開する方法を示しています。アニメーションの再生は `Pause()` メソッドを呼び出すことで一時停止でき、アニメーションの再生は `Play()` メソッドを呼び出すことで再開できます。
11. カスタム アニメーション カーブ: SetEase( Curve )
transform.DOMove(targetPosition, duration).SetEase(curve);このコードは、カスタム アニメーション カーブ `curve` に従ってオブジェクトをターゲット位置 `targetPosition` にスムーズに移動させる移動アニメーションを作成します。
12.アニメーショントランジションエフェクト：SetEase
transform.DOMove(targetPosition, duration).SetEase(Ease.InOutQuad);このコードは、素早く開始してゆっくり終了する InOutQuad トランジション エフェクトを使用して、オブジェクトを現在の位置からターゲット位置 `targetPosition` まで滑らかに移動する移動アニメーションを作成します。
13.アニメーション速度調整：SetSpeed
transform.DOMove(targetPosition, duration).SetSpeedBased().SetSpeed(speed);このコードは移動アニメーションを作成し、オブジェクトが現在位置からターゲット位置 `targetPosition` までスムーズに移動し、アニメーションの長さに応じて再生速度を自動的に調整し、再生速度を `speed` 倍に設定します。
14. アニメーション パス: DoPath
transform.DOPath(path, duration, PathType.CatmullRom);このコードは移動アニメーションを作成し、Catmull-Rom 補間アルゴリズムを使用してパス上の連続点を計算し、指定されたパス配列「path」に従ってオブジェクトを滑らかに動かします。
15. ベジェ パスのアニメーション化: DoPath
transform.DOPath(path, duration, PathType.CubicBezier);このコードは、DOTween プラグインを使用して、オブジェクトのベジェ曲線パス アニメーションを実装します。`transform` はオブジェクトの Transform コンポーネントを表します。 `DOPath` メソッドは、指定された時間内でベジェ曲線パスに従ってオブジェクトを移動させるために使用されます。 `path` はパス点の配列またはリストであり、 `duration` はアニメーション時間の継続時間、`PathType.CubicBezier` は、パスのタイプが 3 次ベジェ曲線であることを示します。
16.色の変化をアニメーション化する: DoColor
spriteRenderer.DOColor(targetColor, duration);このコードは、SpriteRenderer オブジェクトの色をターゲット カラー `targetColor` に `duration` 秒間滑らかに遷移させる色変更アニメーションを作成します。
17. アニメーショングラデーション効果: DoColor
graphic.DOColor(targetColor, duration);このコードは、DOTween プラグインを使用してグラデーション効果を実装します。`graphic` は、Graphic から継承された任意の UI 要素にすることができ、`DOColor` メソッドを使用して、指定された時間内で UI 要素の色をターゲット色の `targetColor` に徐々に変更します。
18. アニメーション回転: DoRate
transform.DORotate(targetRotation, duration);このコードは、オブジェクトをターゲット角度 `targetRotation` まで `duration` 秒間滑らかに回転させる回転アニメーションを作成します。
19. カメラの視点変更をアニメーション化する: DoRatate
mainCamera.DORotate(new Vector3(targetAngle, 0f, 0f), duration);このコードは、DOTween プラグインを使用して、カメラの視点の変更効果を実現します。`mainCamera` はカメラオブジェクトで、`DORotate` メソッドは指定された時間内にカメラの回転角度を目標角度に徐々に変更するために使用されます。ここでは X 軸方向の回転角度のみを変更します。 `targetAngle` はターゲットの角度、「duration」はアニメーションの継続時間です。
20. アニメーションのスケーリング: DoScale
transform.DOScale(targetScale, duration);このコードは、オブジェクトをターゲット サイズ `targetScale` に `duration` 秒間滑らかにスケーリングするスケーリング アニメーションを作成します。
21. カメラの視野変更をアニメーション化する: DOFieldIfView
mainCamera.DOFieldOfView(targetFieldOfView, duration);このコードは、メイン カメラの視野をターゲットの視野 `targetFieldOfView` にスムーズに移行するカメラの視野変更アニメーションを作成します。アニメーションの継続時間は `duration` 秒です。
22.アニメーション音量変更：DOFade
audioSource.DOFade(targetVolume, duration);このコードはオーディオ フェード効果を実装します。`audioSource` はオーディオ ソース オブジェクトであり、`DOFade` メソッドを使用して、指定された時間内でオーディオの音量を目標音量 `targetVolume` に徐々に変更します。
23.アニメーションフェードエフェクト：DoFade
canvasGroup.DOFade(targetAlpha, duration);このコードは、CanvasGroup のフェードインおよびフェードアウト効果を実現します。`canvasGroup` は CanvasGroup コンポーネントであり、`DOFade` メソッドを使用して、指定された時間内で CanvasGroup の透明度をターゲット透明度 `targetAlpha` に徐々に変更します。
24. 透明度の変更をアニメーション化する: DoFade
spriteRenderer.DOFade(targetAlpha, duration);このコードは、DOTween プラグインを使用して、透明度のグラデーション効果を実現します。`spriteRenderer` は SpriteRenderer コンポーネントであり、`DOFade` メソッドを使用して、オブジェクトの透明度を指定された時間内でターゲット透明度 `targetAlpha` に徐々に変更します。
25. マテリアル プロパティの変更をアニメーション化する: DoFloat
renderer.material.DOFloat(targetValue, "_PropertyName", duration);このコードは、DOTween プラグインを使用して、マテリアル プロパティのグラデーション効果を実装します。`renderer` はレンダラーコンポーネントであり、`material` プロパティはレンダラーのマテリアルを取得します。`DOFloat` メソッドは、指定された時間内にマテリアルのプロパティ `"_PropertyName"` をターゲット値 `targetValue` にフェードするために使用されます。
26. UI 要素の変更をアニメーション化する: DoSizeDelta
rectTransform.DOSizeDelta(targetSizeDelta, duration);このコードは、DOTween プラグインを使用して、UI 要素のサイズを変更する効果を実現します。`rectTransform` は RectTransform コンポーネントであり、`DOSizeDelta` メソッドは、指定された時間内に UI 要素のサイズをターゲット サイズ `targetSizeDelta` に変更するために使用されます。
27. アニメーション手振れ効果: DoShakePosition
mainCamera.DOShakePosition(duration, strength, vibrato, randomness);このコードは、DOTween プラグインを使用してカメラの揺れ効果を実装します。`mainCamera` はカメラ オブジェクトで、`DOShakePosition` メソッドは指定された時間内にカメラを振るために使用されます。ここで、`duration` は揺れの持続時間を示し、`strength` は揺れの強さを示します。は揺れの周波数を示し、「ランダム性」はジッターのランダム性を示します。
28. アニメーションオブジェクトの振動エフェクト: DoShakePosition
transform.DOShakePosition(duration, strength);このコードは、DOTween プラグインを使用して、オブジェクトの振動効果を実現します。`transform` はオブジェクトの Transform コンポーネントを表し、`DOShakePosition` メソッドは指定された時間内でオブジェクトを振動させるために使用されます。ここで、`duration` は振動の継続時間を表し、`strength` は振動の強度を表します。 。
29. アニメーション シーケンスのネスト:
Sequence sequence = DOTween.Sequence();
sequence.Append(transform.DOMove(targetPosition / 2f, duration));
sequence.Append(transform.DOMove(targetPosition, duration));
sequence.Append(transform.DOMove(Vector3.zero, duration));
sequence.SetLoops(-1);このコードは、DOTween プラグインを使用して、アニメーション シーケンスのネスト効果を実現します。`DOTween.Sequence()` はアニメーション シーケンス オブジェクト `sequence` を作成し、`Append` メソッドはアニメーションを順番に追加するために使用されます。`transform.DOMove` はオブジェクトの動きのアニメーションを表し、`targetPosition` はターゲットの位置です。 duration`はアニメーションの継続時間で、`SetLoops(-1)`はアニメーションシーケンスを無限ループで再生することを意味します。
31. フォントサイズの変更をアニメーション化する: DoFontSize
text.DOFontSize(targetFontSize, duration);このコードは、DOTween プラグインを使用してフォント サイズ変更効果を実現します。`text` は Text コンポーネントであり、`DOFontSize` メソッドを使用して、指定された時間内でテキストのフォント サイズをターゲット フォント サイズ `targetFontSize` に徐々に変更します。
33. アニメーションカメラの視野角スケーリング: DOOrthoSize
mainCamera.DOOrthoSize(targetSize, duration);このコードは、DOTween プラグインを使用して、カメラの視点のズーム効果を実現します。`mainCamera` はカメラ オブジェクトであり、`DOOrthoSize` メソッドは、指定された時間内でカメラの正投影視野角サイズをターゲット サイズ `targetSize` に徐々に変更するために使用されます。
34.ドゥテキスト
1. 基本的な使い方
textField.DOText(targetText, duration);UI テキスト フィールド (テキスト コンポーネントを使用して Unity で表現される) があり、そのテキストを 1 秒以内にターゲット テキストに変更したいとします。まず、スクリプト内で UI テキスト フィールド (この例では textField) への参照を取得する必要があります。
その後、DOText メソッドを使用して、テキストの内容を徐々に変更できます。ターゲット テキストを最初のパラメータとして DOText メソッドに渡し、継続時間を 2 番目のパラメータとして渡します。
2. オプションのパラメータ
テキストの変更方法をカスタマイズするために使用できます。たとえば、テキストのカーブ アニメーションのタイプ (Linear、EaseIn、EaseOut など) を指定し、テキストの変更が完了した後にコールバック関数を使用して他の操作を実行できます。以下に例を示します。
textField.DOText(targetText, duration)
.SetEase(Ease.OutQuad) // 设置曲线动画类型
.OnComplete(() => Debug.Log("文本更改完成")); // 设置完成时的回调函数
3. 文字列のフォーマット
文字列フォーマット機能を使用して、変数の値をテキストに挿入できます。たとえば、スコア変数があると仮定するとint score = 100;、次のようにターゲット テキスト内の特定の位置に変数を挿入できます。
string targetText = $"当前分数：{score}";
textField.DOText(targetText, duration);
これにより、テキストが変更されたときに変数の値がターゲット テキストに動的に挿入されます。
4. チェーンコール
DoTween のメソッドは通常、チェーンをサポートしています。つまり、複数の Tween アニメーションを同じ行にチェーンして、順番に実行できます。たとえば、テキストの変更が完了した後、テキスト フィールドをフェードアウトできます。
textField.DOText(targetText, duration)
.OnComplete(() => textField.DOFade(0f, 1f));