Animating shapes in SFML? - animation

Question

I just wanted to animate a simple shape (rect for instance). This animation is only about changing the color of the shape whenever you press a determinated key.
I couldn't find any tutorial for this simple purpose, these online tutorials are all about sprite movement and all of that.
I managed to do this color change by creating a class named 'Transition' and a function within it named 'Transition::update()', which simply change the color of a shape created in this class. The code it's quite simple (thought it wasn't necessary to put it here).
The problem is that this animated I created it's not a smooth animation, just change the color at the right moment.
The question is obvious:
How could I give that smoothness to my animation?
(Don't need to put large codes here, just a quick advice that's all)

Answer 1

Basically you need to introduce variables which store the transition of the color and you need to control the time per frame. Let me give you a quick and very basic example, so you get the idea. Forgive me the style ...
#include <SFML/Graphics.hpp>
int main(){
sf::RenderWindow renderWindow(sf::VideoMode(800, 600), "Color Animation");
sf::Clock clock;
sf::Event event;
// Change to start the animation
// Red and blue to store the color transition
// Duration to control animation speed
int change = 0;
int red = 255;
int blue = 0;
float duration = float();
// Set a basic red circle as the starting shape
sf::Color color = sf::Color::Red;
sf::CircleShape circle(150);
circle.setFillColor(color);
while (renderWindow.isOpen()){
// How much time since last loop?
sf::Time dt = clock.restart();
duration += dt.asSeconds();
while (renderWindow.pollEvent(event)){
//Handle events here
if (event.type == sf::Event::EventType::Closed)
renderWindow.close();
//Respond to key pressed events
if (event.type == sf::Event::EventType::KeyPressed){
if (event.key.code == sf::Keyboard::C){
// C key pressed, start animation
change = 1;
}
}
}
// Animation started and animation duration per frame (0.01f) reached
// Change color by 1
if (change == 1 && duration > 0.01f){
red -= 1;
blue += 1;
if (red > 0){
// Reset frame time and set new color for circle
duration = 0;
color = sf::Color(red, 0, blue);
circle.setFillColor(color);
} else {
// Stop animation
change = 0;
}
}
// Clear render window and draw circle
renderWindow.clear(sf::Color::Black);
renderWindow.draw(circle);
renderWindow.display();
}
}