Documentation

Animating with DoTween

Updated on August 21, 2022

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].color,
        value => colorKeys[0].color = value,
        Color.red, 
        m_AnimationDuration)
       .OnUpdate(()=>{
                gradient.SetKeys(colorKeys, alphaKeys);
                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