Documentation

Animating with DoTween

Updated on November 29, 2021

Animating Shape Properties using DoTween.To #

MPImage image = GetComponent<MPImage>();
Rectangle rectangle = image.Rectangle;

DoTween.To(
		() => rectangle.CornerRadius,
		value => rectangle.CornerRadius = value,
		new Vector4(25, 25, 25, 25), 
		m_AnimationDuration)
	.OnUpdate(() => image.Rectangle = rectangle)
	.SetEase(Ease.Linear);

Animating Color Properties using DoTween.To #

MPImage image = GetComponent<MPImage>();

DoTween.To(
		() => image.OutlineColor,
		value => image.OutlineColor = value,
		Color.red, 
		m_AnimationDuration)
	.SetEase(Ease.Linear);

Animating GradientColor Properties using DoTween.To #

MPImage image = GetComponent<MPImage>();
GradientEffect gradientEffect = image.GradientEffect;

// For Corner Gradient
Dotween.To(   //Animating just the first corner color of the gradient
		()=>gradientEffect.CornerGradientColors[0],
		value => gradientEffect.CornerGradientColors[0] = value,
		Color.red,
		m_AnimationDuration)
    .OnUpdate(()=>image.GradientEffect = gradientEffect)
    .SetEase(Ease.InSine);

// For Linear/Radial Gradient
Gradient gradient = gradientEffect.Gradient;
GradientColorKey[] colorKeys = gradient.colorKeys;
GradientAlphaKey[] alphaKeys = gradient.alphaKeys;
DoTween.To(   // Animating Just the first color key of the gradient
		() => colorKeys[0],
		value => colorKeys[0] = value,
		Color.red, 
		m_AnimationDuration)
    .OnUpdate(()=>{
        gradient.SetKeys(colorKey, alphaKey);
        gradientEffect.Gradient = gradient;
        image.GradientEffect = gradientEffect;
    })
	.SetEase(Ease.Linear);

Animating Shape Properties using DoVirtual.Float #

MPImage image = GetComponent<MPImage>();
Rectangle rectangle = image.Rectangle;

DoVirtual.Float(0f, 25f, m_AnimationDuration, (float v)=>{
    rectangle.CornerRadius = new Vector4(v, v, v, v);
    image.Rectangle = rectangle;
}).SetEase(Ease.Linear);

What are your feelings