La mayor parte del contenido de este artículo se obtiene de los documentos oficiales de DOTween.
Los GIF no se pueden mostrar aquí (demasiado vago para grabar GIF), descargue los escenarios de casos oficiales para aprender usted mismo
Directorio de artículos
Escena 1 Interpolación básica
El caso 1 muestra algunos de los usos más básicos:
IEnumerator Start()
{
// Start after one second delay (to ignore Unity hiccups when activating Play mode in Editor)
yield return new WaitForSeconds(1);
// Let's move the red cube TO 0,4,0 in 2 seconds
redCube.DOMove(new Vector3(0,4,0), 2);
// Let's move the green cube FROM 0,4,0 in 2 seconds
greenCube.DOMove(new Vector3(0,4,0), 2).From();
// Let's move the blue cube BY 0,4,0 in 2 seconds
blueCube.DOMove(new Vector3(0,4,0), 2).SetRelative();
// Let's move the purple cube BY 6,0,0 in 2 seconds
// and also change its color to yellow.
// To change its color, we'll have to use its material as a target (instead than its transform).
purpleCube.DOMove(new Vector3(6,0,0), 2).SetRelative();
// Also, let's set the color tween to loop infinitely forward and backwards
purpleCube.GetComponent<Renderer>().material.DOColor(Color.yellow, 2).SetLoops(-1, LoopType.Yoyo);
}
Interpretando el código, el movimiento de redCube es moverse a las coordenadas especificadas en dos segundos 0,4,0, mientras que el movimiento de greenCube tiene Fromun método, que es 0,4,0pasar de las coordenadas a las coordenadas originales. Si se especifica blueCube SetRelative, utilizará sus propias coordenadas como origen y se moverá a 0,4,0las coordenadas relativas a su propio eje de coordenadas.
Además de aplicar la transformación de coordenadas de Move, purpleCube también modificó el color del material de sus componentes de púrpura a amarillo y estableció el SetLoopsmodo de bucle en -1，LoopType.Yoyo. El primer parámetro representa el número de bucles y -1 representa un bucle infinito. El segundo El parámetro representa el modo de curva circular.
Escena 2 Interpolación dinámica
El escenario 2 implementa el seguimiento en tiempo real de los seguidos por parte del seguidor
public class Follow : MonoBehaviour
{
public Transform target; // Target to follow
Vector3 targetLastPos;
Tweener tween;
void Start()
{
// First create the "move to target" tween and store it as a Tweener.
// In this case I'm also setting autoKill to FALSE so the tween can go on forever
// (otherwise it will stop executing if it reaches the target)
tween = transform.DOMove(target.position, 2).SetAutoKill(false);
// Store the target's last position, so it can be used to know if it changes
// (to prevent changing the tween if nothing actually changes)
targetLastPos = target.position;
}
void Update()
{
// Use an Update routine to change the tween's endValue each frame
// so that it updates to the target's position if that changed
if (targetLastPos == target.position) return;
// Add a Restart in the end, so that if the tween was completed it will play again
tween.ChangeEndValue(target.position, true).Restart();
targetLastPos = target.position;
}
}
Tres líneas simples de código, fáciles de implementar, el efecto es más suave que Dove, úselo para SetAutoKill(false)garantizar que Tweenno se recicle automáticamente, úselo targetLastPospara actualizar las coordenadas del objetivo de seguimiento (en movimiento) en cada cuadro, úselo ChangeEndValue(target.position, true)para cambiar Tweenla posición final, el primero El parámetro especifica el valor final de la posición. El segundo parámetro especifica si se debe eliminar del valor establecido inicialmente (también hay una función sobrecargada public abstract Tweener ChangeEndValue(object newEndValue, float newDuration = -1, bool snapStartValue = false, el segundo valor flotante determina si se debe establecer una nueva duración).
Finalmente, utilícelo Restart()para volver a habilitar la animación de interpolación.
Escena 3 Modificación del sombreador
public class Materials : MonoBehaviour
{
public GameObject target;
public Color toColor;
Tween colorTween, emissionTween, offsetTween;
void Start()
{
// NOTE: all tweens will be created in a paused state, so they can be toggled via the UI
// Store the material, since we will tween that
Material mat = target.GetComponent<Renderer>().material;
// COLOR
colorTween = mat.DOColor(toColor, 1).SetLoops(-1, LoopType.Yoyo).Pause();
// EMISSION
// Note that the float value you see in Unity's inspector, next to the emission's color,
// doesn't really exist in the shader (it's generated by Unity's inspector and applied to the material's color),
// se we have to tween the full _EmissionColor.
emissionTween = mat.DOColor(new Color(0, 0, 0, 0), "_EmissionColor", 1).SetLoops(-1, LoopType.Yoyo).Pause();
// OFFSET
// In this case we set the loop to Incremental and the ease to Linear, because it's cooler
offsetTween = mat.DOOffset(new Vector2(1, 1), 1).SetEase(Ease.Linear).SetLoops(-1, LoopType.Incremental).Pause();
}
// Toggle methods (called by UI events)
public void ToggleColor()
{
colorTween.TogglePause();
}
public void ToggleEmission()
{
emissionTween.TogglePause();
}
public void ToggleOffset()
{
offsetTween.TogglePause();
}
}
El caso 3 introduce cambios de interpolación en varios valores del material en el sombreador y define colorTween，emissionTween，ToggleOffsettres Tweeninterpolaciones. DOLos métodos son similares, cabe señalar que emissionTweendado que Shaderel valor en se cambia directamente, la cadena se usa para leer el Shadervalor en _EmissionColor. SetEase(Ease.Linear)El tipo de crecimiento está configurado y configurado en lineal.
Todo se Tweenconfigura durante la inicialización Pause(). Cuando hacemos clic en el botón, TogglePause()se activa el método. Si se está reproduciendo, se pausará. Si está en pausa, se reproducirá.
Escenario 4 Movimiento de ajuste de trayectoria
El escenario 4 nos permite personalizar la ruta y las coordenadas, permitiendo que el objeto se mueva a lo largo de la ruta ajustada por los puntos de coordenadas.
public class Paths : MonoBehaviour
{
public Transform target;
public PathType pathType = PathType.CatmullRom;
public Vector3[] waypoints = new[] {
new Vector3(4, 2, 6),
new Vector3(8, 6, 14),
new Vector3(4, 6, 14),
new Vector3(0, 6, 6),
new Vector3(-3, 0, 0)
};
void Start()
{
// Create a path tween using the given pathType, Linear or CatmullRom (curved).
// Use SetOptions to close the path
// and SetLookAt to make the target orient to the path itself
Tween t = target.DOPath(waypoints, 4, pathType)
.SetOptions(true)
.SetLookAt(0.001f);
// Then set the ease to Linear and use infinite loops
t.SetEase(Ease.Linear).SetLoops(-1);
}
}
Para ajustar una ruta, solo necesita establecer la matriz de puntos de coordenadas Vector3[], luego establecer el tiempo de interpolación y finalmente establecer el tipo de curva de la ruta de ajuste pathType. El valor predeterminado es lineal. Úselo SetOptionspara establecer si la ruta está cerrada (tenga en cuenta que SetOptionses un método muy especial. Los diferentes DOmétodos SetOptionstienen diferentes parámetros. Aún necesita consultar la documentación oficial para obtener más detalles). DOPathTambién hay métodos sobrecargados ¡Es importante aprender a consultar referencias y consultar documentación oficial!
Escena 5 Reproducción de secuencia
public class Sequences : MonoBehaviour
{
public Transform cube;
public float duration = 4;
IEnumerator Start()
{
// Start after one second delay (to ignore Unity hiccups when activating Play mode in Editor)
yield return new WaitForSeconds(1);
// Create a new Sequence.
// We will set it so that the whole duration is 6
Sequence s = DOTween.Sequence();
// Add an horizontal relative move tween that will last the whole Sequence's duration
s.Append(cube.DOMoveX(6, duration).SetRelative().SetEase(Ease.InOutQuad));
// Insert a rotation tween which will last half the duration
// and will loop forward and backward twice
s.Insert(0, cube.DORotate(new Vector3(0, 45, 0), duration / 2).SetEase(Ease.InQuad).SetLoops(2, LoopType.Yoyo));
// Add a color tween that will start at half the duration and last until the end
s.Insert(duration / 2, cube.GetComponent<Renderer>().material.DOColor(Color.yellow, duration / 2));
// Set the whole Sequence to loop infinitely forward and backwards
s.SetLoops(-1, LoopType.Yoyo);
}
}
Se pueden ejecutar múltiples secuencias Tween. Normalmente Append, se ejecutan una por una como un delegado. (Si está interesado, puede probar el código a continuación). En este caso, la ejecución de toda la animación es ejecutar las animaciones Appenden secuencia Tween. es decir, moverse primero, luego rotar y luego cambiar de color. Una vez completada la ejecución, debido a la configuración del bucle, toda la animación de la secuencia se reproducirá hacia atrás nuevamente hasta que vuelva al estado original y comience a reproducirse nuevamente.
En cuanto al método de uso , podemos establecer el momento en el que Insertse puede reproducir directamente Tweenla animación de interpolación y el primer parámetro puede especificar el tiempo de reproducción. De esta forma, puede girar y cambiar de color mientras se mueve. Y Sequenceen conjunto solo se reproducirán todas las animaciones al revés en bucle, en lugar de que cada una Tweencalcule el bucle de reproducción de forma independiente, cada una Tweenestá relacionada.
public class Sequences : MonoBehaviour
{
public Transform cube;
public float duration = 4;
IEnumerator Start()
{
// Start after one second delay (to ignore Unity hiccups when activating Play mode in Editor)
yield return new WaitForSeconds(1);
// Create a new Sequence.
// We will set it so that the whole duration is 6
Sequence s = DOTween.Sequence();
// Add an horizontal relative move tween that will last the whole Sequence's duration
s.Append(cube.DOMoveX(6, duration).SetRelative().SetEase(Ease.InOutQuad));
// Insert a rotation tween which will last half the duration
// and will loop forward and backward twice
s.Append( cube.DORotate(new Vector3(0, 45, 0), duration / 2).SetEase(Ease.InQuad).SetLoops(2, LoopType.Yoyo));
// Add a color tween that will start at half the duration and last until the end
s.Append(cube.GetComponent<Renderer>().material.DOColor(Color.yellow, duration / 2));
// Set the whole Sequence to loop infinitely forward and backwards
s.SetLoops(-1, LoopType.Yoyo);
}
}
Escena 6 UGUI
Esta escena muestra algunos DOTweenefectos de animación comunes implementados al usarlo, incluida la aparición y desaparición gradual de la imagen, barras de carga en bucle, barras en bucle, cambios de fuente, etc.
public class UGUI : MonoBehaviour
{
public Image dotweenLogo, circleOutline;
public Text text, relativeText, scrambledText;
public Slider slider;
void Start()
{
// All tweens are created in a paused state (by chaining to them a final Pause()),
// so that the UI Play button can activate them when pressed.
// Also, the ones that don't loop infinitely have the AutoKill property set to FALSE,
// so they won't be destroyed when complete and can be resued by the RESTART button
// Animate the fade out of DOTween's logo
dotweenLogo.DOFade(0, 1.5f).SetAutoKill(false).Pause();
// Animate the circle outline's color and fillAmount
circleOutline.DOColor(RandomColor(), 1.5f).SetEase(Ease.Linear).Pause();
circleOutline.DOFillAmount(0, 1.5f).SetEase(Ease.Linear).SetLoops(-1, LoopType.Yoyo)
.OnStepComplete(()=> {
circleOutline.fillClockwise = !circleOutline.fillClockwise;
circleOutline.DOColor(RandomColor(), 1.5f).SetEase(Ease.Linear);
})
.Pause();
// Animate the first text...
text.DOText("This text will replace the existing one", 2).SetEase(Ease.Linear).SetAutoKill(false).Pause();
// Animate the second (relative) text...
relativeText.DOText(" - This text will be added to the existing one", 2).SetRelative().SetEase(Ease.Linear).SetAutoKill(false).Pause();
// Animate the third (scrambled) text...
scrambledText.DOText("This text will appear from scrambled chars", 2, true, ScrambleMode.All).SetEase(Ease.Linear).SetAutoKill(false).Pause();
// Animate the slider
slider.DOValue(1, 1.5f).SetEase(Ease.InOutQuad).SetLoops(-1, LoopType.Yoyo).Pause();
}
// Called by PLAY button OnClick event. Starts all tweens
public void StartTweens()
{
DOTween.PlayAll();
}
// Called by RESTART button OnClick event. Restarts all tweens
public void RestartTweens()
{
DOTween.RestartAll();
}
// Returns a random color
Color RandomColor()
{
return new Color(Random.Range(0f, 1f), Random.Range(0f, 1f), Random.Range(0f, 1f), 1);
}
}
Úselo DOFadepara lograr el efecto de desvanecimiento, el primer parámetro es el valor alfa y el segundo parámetro es el tiempo de interpolación.
El código para cambiar la barra de progreso del anillo es muy inteligente. Primero, utiliza DOFillAmountel porcentaje de relleno del componente de imagen. Esto se basa en el modo de relleno del componente mismo. En esta escena, el modo de relleno del componente es en el sentido de las agujas del reloj, pero la interpolación se colocará SetLoops()boca abajo. Animada, es decir, cuando comienza a reproducirse por primera vez, la barra de progreso circular disminuye en el sentido de las agujas del reloj y luego, si se reproduce al revés, aumentará en el sentido contrario a las agujas del reloj. Sin embargo, aumentar en el sentido de las agujas del reloj se verá mucho mejor que aumentar en el sentido contrario a las agujas del reloj, por lo que se usa aquí para determinar OnStepCompletecuándo Cuando se reproduce la animación interpolada, agregue un delegado para invertir la dirección del puntero. La dirección en el sentido de las agujas del reloj se convierte en la dirección contraria a las agujas del reloj y el puntero en el sentido contrario a las agujas del reloj corresponde a la dirección en el sentido de las agujas del reloj cuando se reproduce hacia atrás, lo que reduce la barra de progreso en el sentido de las agujas del reloj. y en el sentido de las agujas del reloj cuando se reproduce hacia atrás. Agregar barra de progreso. La razón para redefinir DOColorla animación de interpolación es que el color siempre puede cambiar aleatoriamente en lugar de retroceder.
DOTextMuestra tres modos de cambio de texto, correspondientes a los efectos de visualización de tres fuentes: cambio palabra por palabra, escritura en blanco y caracteres confusos. Simplemente siga la configuración del código anterior.
Finalmente, existen PlayAlly RestartAll, estos dos métodos controlan todos Tweenlos comportamientos.
Al usarlo DOTween, puedes lograr fácilmente poderosos efectos visuales, lo cual es realmente asombroso.