# Animating the process of color change

**URL:** <https://forum.xojo.com/t/animating-the-process-of-color-change/18489>\
**Category:** General\
**Created:** [August 10, 2014, 10:51am UTC](https://forum.xojo.com/t/animating-the-process-of-color-change/18489 "2014-08-10T10:51:18Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Radium\_Radiovich](https://forum.xojo.com/letter_avatar_proxy/v4/letter/r/41988e/32.png) [@Radium\_Radiovich](https://forum.xojo.com/u/Radium_Radiovich)\
**Post date:** [August 10, 2014, 10:51am UTC](https://forum.xojo.com/t/animating-the-process-of-color-change/18489/1 "2014-08-10T10:51:18Z")

</div>

I have a window, it has 3 buttons named: red, blue, green  
When each button is clicked, the window.backcolor is changed to the corresponding color.  
I want to animate the process (using a timer?), so each color softly shift to another without any sudden change.  
What’s the best way to do it?

---

<div class="post-metadata">

**Author:** ![Will\_Shank](https://forum.xojo.com/letter_avatar_proxy/v4/letter/w/f475e1/32.png) [@Will\_Shank](https://forum.xojo.com/u/Will_Shank)\
**Post date:** [August 10, 2014, 12:56pm UTC](https://forum.xojo.com/t/animating-the-process-of-color-change/18489/2 "2014-08-10T12:56:01Z")

</div>

I would start with a class to encapsulate the process of stepping from a source color to a destination color.

[code]Class ColorAnimation

Private sourceColor As Color  
Private destinationColor As Color  
Private totalSteps As Integer  
Private currentStep As Integer

Sub reset(srcColor As Color, destColor As Color, animSteps As integer)  
sourceColor = srcColor  
destinationColor = destColor  
totalSteps = animSteps  
currentStep = 0  
End Sub

Function stepColor() As Color  
currentStep = currentStep + 1

```
if currentStep >= totalSteps then return destinationColor

dim td As double = currentStep / totalSteps
dim ts As double = 1 - td

return RGB( _
  sourceColor.Red * ts + destinationColor.Red * td, _
  sourceColor.Green * ts + destinationColor.Green * td, _
  sourceColor.Blue * ts + destinationColor.Blue * td)

```

End Function

Function reachedEnd() As boolean  
return currentStep \>= totalSteps  
End Function

End Class[/code]

Then the buttons and timer can use that to more easily manage the animation. Here the Timer period is set to 50 for about 20fps, and the animation steps are 60 for about a 3 second run.

[code]Window MyWindow

Private anim As ColorAnimation

//Pushbutton Control Set of 3 buttons  
Sub Action(index as Integer)

```
dim dc As Color //choose the destination color
Select Case index
Case 0
  dc = &cFF0000
Case 1
  dc = &c00FF00
Case 2
  dc = &c0000FF
End

if anim = nil then anim = new ColorAnimation

anim.reset(self.backColor, dc, 60) //init animation

Timer1.Mode = Timer.ModeMultiple //start

```

End Sub

//Timer1 (Period 50)  
Sub Action()

```
if anim <> nil then
  self.BackColor = anim.stepColor //update color
end

if anim = nil or anim.reachedEnd then //turn off at end
  me.Mode = Timer.ModeOff
  anim = nil
end

```

End Sub

End Window[/code]

---

<div class="post-metadata">

**Author:** ![Radium\_Radiovich](https://forum.xojo.com/letter_avatar_proxy/v4/letter/r/41988e/32.png) [@Radium\_Radiovich](https://forum.xojo.com/u/Radium_Radiovich)\
**Post date:** [August 10, 2014, 1:33pm UTC](https://forum.xojo.com/t/animating-the-process-of-color-change/18489/3 "2014-08-10T13:33:10Z")

</div>

I inserted a new class to my project, but don’t know where to put your first code?  
I’m not so familiar with all code usage of Xojo yet, please tell me how to use your code in Xojo visually.

---

<div class="post-metadata">

**Author:** ![Roger\_Clary](https://forum.xojo.com/letter_avatar_proxy/v4/letter/r/eada6e/32.png) [@Roger\_Clary](https://forum.xojo.com/u/Roger_Clary)\
**Post date:** [August 10, 2014, 2:37pm UTC](https://forum.xojo.com/t/animating-the-process-of-color-change/18489/4 "2014-08-10T14:37:42Z")

</div>

Radium, just a bit of advice. Based upon your other posting, your best course is to work through the tutorials, grab a good book, and get comfortable with the basics (pun intended) of Xojo before trying more complex code such as the above.

---

<div class="post-metadata">

**Author:** ![Will\_Shank](https://forum.xojo.com/letter_avatar_proxy/v4/letter/w/f475e1/32.png) [@Will\_Shank](https://forum.xojo.com/u/Will_Shank)\
**Post date:** [August 10, 2014, 3:39pm UTC](https://forum.xojo.com/t/animating-the-process-of-color-change/18489/5 "2014-08-10T15:39:44Z")

</div>

Here’s the project so it’s easier to see. [http://home.comcast.net/~trochoid/animC.zip](http://home.comcast.net/~trochoid/animC.zip)  
If you’re not comfortable with classes yet I added MainWindowSansObject which just has all the properties and methods copied over so there’s no class needed.

---

<div class="post-metadata">

**Author:** ![Radium\_Radiovich](https://forum.xojo.com/letter_avatar_proxy/v4/letter/r/41988e/32.png) [@Radium\_Radiovich](https://forum.xojo.com/u/Radium_Radiovich)\
**Post date:** [August 10, 2014, 4:25pm UTC](https://forum.xojo.com/t/animating-the-process-of-color-change/18489/6 "2014-08-10T16:25:38Z")

</div>

Wow that looks FANTASTIC!!

Question: I noticed the shadow around the window changes a bit during color transition. is it really happening? or just an optical illusion?

---

<div class="post-metadata">

**Author:** ![Will\_Shank](https://forum.xojo.com/letter_avatar_proxy/v4/letter/w/f475e1/32.png) [@Will\_Shank](https://forum.xojo.com/u/Will_Shank)\
**Post date:** [August 10, 2014, 5:18pm UTC](https://forum.xojo.com/t/animating-the-process-of-color-change/18489/7 "2014-08-10T17:18:46Z")

</div>

> [@119158:@Radium Radiovich](#):
>
> or just an optical illusion?

Yes, I think so 🙂 I think it comes from this effect where the circles are the same color but the surrounding color changes that  
 ![](http://www.illusionspoint.com/wp-content/uploads/2010/09/Color-Adapting-optical-illusion-9.jpg)

---

<div class="post-metadata">

**Author:** ![Michel\_Bujardet](https://forum.xojo.com/user_avatar/forum.xojo.com/michel_bujardet/32/252_2.png) [@Michel\_Bujardet](https://forum.xojo.com/u/Michel_Bujardet)\
**Post date:** [August 10, 2014, 7:33pm UTC](https://forum.xojo.com/t/animating-the-process-of-color-change/18489/8 "2014-08-10T19:33:44Z")

</div>

[quote=119149:@Will Shank]Here’s the project so it’s easier to see. [http://home.comcast.net/~trochoid/animC.zip](http://home.comcast.net/~trochoid/animC.zip)  
If you’re not comfortable with classes yet I added MainWindowSansObject which just has all the properties and methods copied over so there’s no class needed.[/quote]

That is very nice, Will. Thank you for sharing it.

---

<div class="post-metadata">

**Author:** ![Peter\_Fargo](https://forum.xojo.com/user_avatar/forum.xojo.com/peter_fargo/32/977_2.png) [@Peter\_Fargo](https://forum.xojo.com/u/Peter_Fargo)\
**Post date:** [August 11, 2014, 2:47pm UTC](https://forum.xojo.com/t/animating-the-process-of-color-change/18489/9 "2014-08-11T14:47:59Z")

</div>

> [@119201:@Michel Bujardet](#):
>
> That is very nice, Will. Thank you for sharing it.

+1

---

<div class="post-metadata">

**Author:** ![Brock\_Nash](https://forum.xojo.com/user_avatar/forum.xojo.com/brock_nash/32/1126_2.png) [@Brock\_Nash](https://forum.xojo.com/u/Brock_Nash)\
**Post date:** [August 11, 2014, 3:51pm UTC](https://forum.xojo.com/t/animating-the-process-of-color-change/18489/10 "2014-08-11T15:51:05Z")

</div>

I’ve done a similar color shift but instead I use HSV(Hue, Saturation, Value) to change the color. I would recommend giving it a shot. You might like the effect better.

---

<div class="post-metadata">

**Author:** ![Lennox\_Jacob](https://forum.xojo.com/letter_avatar_proxy/v4/letter/l/c5a1d2/32.png) [@Lennox\_Jacob](https://forum.xojo.com/u/Lennox_Jacob)\
**Post date:** [August 11, 2014, 4:51pm UTC](https://forum.xojo.com/t/animating-the-process-of-color-change/18489/11 "2014-08-11T16:51:14Z")

</div>

Hi Brock,  
Where can I download it?  
Lennox

---

<div class="post-metadata">

**Author:** ![Brock\_Nash](https://forum.xojo.com/user_avatar/forum.xojo.com/brock_nash/32/1126_2.png) [@Brock\_Nash](https://forum.xojo.com/u/Brock_Nash)\
**Post date:** [August 11, 2014, 5:56pm UTC](https://forum.xojo.com/t/animating-the-process-of-color-change/18489/12 "2014-08-11T17:56:48Z")

</div>

Instead of doing the Tween off of the RGB color constructor, simply do it off of the HSV color constructor

[quote]return RGB( \_  
sourceColor.Red \* ts + destinationColor.Red \* td, \_  
sourceColor.Green \* ts + destinationColor.Green \* td, \_  
sourceColor.Blue \* ts + destinationColor.Blue \* td)[/quote]

For example instead do:  
sourceColor.Hue \* ts + destinationColor.Hue \* td

---

<div class="post-metadata">

**Author:** ![system](https://forum.xojo.com/uploads/default/original/1X/455b4dcc0e61630e9f81940004ddffa49c432a46.png) [@system](https://forum.xojo.com/u/system)\
**Post date:** [October 29, 2020, 5:22pm UTC](https://forum.xojo.com/t/animating-the-process-of-color-change/18489/13 "2020-10-29T17:22:04Z")

</div>