how to make an animation that changes color in a clockwise rotation

Questions & Answers
1

not sure exactly how to word that one. basically i have a custom cursor thats in the shape of a circle thats one color.
when the cursor is hovering over a button i want it to to animate for 2 seconds before that button is actually selected. i want to do this by changing its color to white in like a clockwise rotation.
(i dont want the color of the entire image to fade to white gradually, picture having a blue circle, and in a clockwise rotation that circle will change into a white circle, like if there was a layer mask on it).
I know how to code, im not looking for how to press buttons or detect hovering etc., But i dont have much experience with animations, in fact none at all with unity.

so is there some kind of way to animate the cursor this way? like to have a layer mask of the button thats one color that will gradually turn into the same picture just a different color? I hope i worded that clearly.

2

Are you talking about a texture mapped to a plane, a sprite, or something else?

3

Well, there are two approaches to it, though the results you’re looking for in particular may depend on how you want it presented.

If you’re looking for an absolute mouse cursor to go on top of everything, you’ll want to make use of the GUI, which means NOT being able to make good use of shaders.

If you go the GUI route, you’ll probably just need to create multiple images to simulate the cursor changing color, but your options would be much more limited for color.

The basic way of displaying the cursor in this way would be something like:

using UnityEngine;

public class MouseCursor
{
	public Texture2D txCursor;
	
	void Start()
	{
		Cursor.visible = false;
	}
	
	void OnGUI()
	{
		GUI.depth = 1;

		if(txCursor != null)
		{
			GUI.DrawTexture(new Rect(Input.mousePosition.x, Screen.height - Input.mousePosition.y, txCursor.width, txCursor.height), txCursor);
		}
	}
}

If you’re looking to maximize versatility on the cursor’s potential appearance, here’s a very basic shader to apply to a plane to get you started on the effect:

Shader "Custom/CircleCursor"
{
	Properties
	{
		_Color ("Color One", Color) = (0,0,1,1)
		_ColorChange ("Color Two", Color) = (1,0,0,1)
		_MainTex ("Albedo (RGB)", 2D) = "white" {}
		_BlendTex ("Color Change Gradient", 2D) = "white" {}
	}
	SubShader
	{
		Tags { "Queue"="Transparent" "RenderType"="Transparent" }
		LOD 200
		
		CGPROGRAM
		// Physically based Standard lighting model, and enable shadows on all light types
		#pragma surface surf Standard fullforwardshadows alpha

		// Use shader model 3.0 target, to get nicer looking lighting
		#pragma target 3.0

		sampler2D _MainTex;
		sampler2D _BlendTex;

		struct Input
		{
			float2 uv_MainTex;
			float2 uv_BlendTex;
		};

		fixed4 _Color;
		fixed4 _ColorChange;

		void surf (Input IN, inout SurfaceOutputStandard o)
		{
			// Albedo comes from a texture tinted by color
			fixed4 t = tex2D(_MainTex, IN.uv_MainTex);
			fixed4 m = tex2D(_BlendTex, IN.uv_BlendTex);
			fixed4 color = lerp(_Color, _ColorChange, saturate(floor(frac(_Time.x * 5.0) + m)));
			o.Emission = t.rgb * color.rgb;
			
			
			o.Alpha = t.a;
		}
		ENDCG
	} 
	FallBack "Diffuse"
}

It’s by no means perfect, but it should serve as a basic framework for applying gradual, circular color changes to the texture.

Textures utilized in testing:

49070-ex1.png

49071-ex2.png