Animating the process of color change

General
1

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?

2

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]

3

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.

4

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.

5

Here’s the project so it’s easier to see. 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.

6

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?

7

Yes, I think so :slight_smile: I think it comes from this effect where the circles are the same color but the surrounding color changes that

8

[quote=119149:@Will Shank]Here’s the project so it’s easier to see. 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.

9

+1

10

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.

11

Hi Brock,
Where can I download it?
Lennox

12

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