How can I make an animated color gradient?

I do not know how to create a shader script, but I can learn. I want to create an effect on the surface of a quad. When this effect is activated, I want 2 white gradient to start in the middle of the cube and expand outwards until it reaches the edges of the quad.

Take a look at the Scripting API:



Get a reference to your sprite:


[SerializeField] Sprite sprite;
[SerializedField] SpriteRenderer rend;

Place that in your class and assign the sprite and sprite renderer in the inspector (click on the circle beside the field to see the options of what sprites/sprite renderers you can choose)


Once you scale up the image, you can start modifying the uvs (Vector2 pixel coordinates) of the sprite with a coroutine like the below for example.


IEnumerator ManipulateUV()
{

Vector2[] originalUV = sprite.uv;
float timer = 0.0f;
float speed = 0.5f;

while(timer < 1.0f)
{
foreach(Vector2 pos in sprite.uv)
{
pos = Vector2.Lerp(pos, sprite.pivot, timer);
}
timer += Time.deltaTime * speed;
yield return new WaitForEndOfFrame();
}
rend.enabled = false;
sprite.uv = originalUV;
}

Now just call the above with StartCoroutine(ManipulateUV()); when you want to fade out after or while you are scaling up. It is untested code, so let me know if there is an issue, but I hope you get the idea. The above will move the sprite’s texture coordinates towards the center of the sprite on the texture over the period of 2 seconds and when its finished, the sprite renderer will disable and the uv coordinates will go back to normal for your next effect. One issue with this approach is that you won’t be able to have 2 effects happening at once, but fading out at different times as this is changing the base texture coordinates and will affect all instances of the sprite