Hey guys,
I am very curious to know if I can achieve different animation effects for text in cinder. I could learn and grasp the usage of shaders for slide transition with the help of http://transitions.glsl.io/ website.
Using timeline the code becomes to long and the required smoothness in the animation is compromised. Is there a way I can animate the text as in the attached link? https://videohive.net/item/110-text-animations/9358175
Hey Rachanaa.
All of the effects in the video you posted are possible in Cinder but there is no inbuilt “text animations” exactly like this which means you have to do it from scratch with Timeline() and transforms. Its much more rewarding / interesting to do it this way though.
The Cinder Timeline is incredibly versatile and allows you to create pretty much any effects you can imagine, I’m not sure what you mean regarding smoothness but perhaps you should check out the Timeline Easing functions. Animation easing is used across all of the animation effects you posted to create bouncing, accelerating and sliding motion effects. Have a look at the “EaseGallery” example in the samples folder to see the types of motion you can create with the cinder timeline (you can even write your own easing functions).
Cinder is a toolkit that is open enough to create anything you can imagine, which is why it doesnt build in lots of style specific functions like which bloat the library codebase. If you find the timeline code to be too long then Cinder might not be the right tool for your project. How long was the timeline code? To create those sliding text effects should have been no longer than 2-3 lines using an Anim for the text position and an EaseInOutQuart for example:
// This should be a member variable (which is why is has an m at the front)
Anim<vec2> mTextPosition;
// Make the target position
const vec2 newPosition = mTextPosition + vec2( 10.0f, 0.0f );
// Animate in 1sec to target position with easing
timeline().apply( &mTextPosition, newPosition, 1.0f, EaseInOutQuart() );
You would add another Anim<whatever> object for each parameter you wish to animate such as rotation etc.
Other good examples to look at are Robert Hodgin’s “Palette Browser” example and the “Visual Dictionary” example in the _timeline folder in samples.
Hope this helps and good luck!
Hi Felix,
Thank you for your reply. This is indeed helpful.
In fact I tried applying shaders to text and it’s working fine 
Regards
Rachana