In this final part in his 4 part series on Animating Xojo, Anthony Cyphers covers easing, which can make the most drab User Interface interactions beautiful.
In Part 1 we covered the basic history of animating in Xojo using pre-calculated chunks to modify the width of our component. In Part 2…
Continuing with what we previously learned in Animating Xojo, Part 1, this version introduces the use of linear interpolation to calculate the current stage of the animation at each step, plus switching to a Dictionary object for variable storage to setup for future parts in this series.
One of the fun things I get to do regularly is build animations into Xojo desktop components. While incredibly rewarding when you get it right, it can be a long road.
This tutorial will show you how easy it is to create animations on components of Xojo web apps, thanks to the use of the Style Editor and the WebAnimator class. Learn how to do a fade effect between two images that you can expand and adapt to your web apps.
In order to recreate this fade effect we’ll mainly use a couple of styles (WebStyle class) to set the initial status for each one of our images (instances from the WebImageView class). These will be overlaped in the web page, sharing the same position. Then we’ll add a button to the web page so it will fire the animation every time it is clicked.
I was reading Twitter recently and came across this Tweet:
— Cliff Pickover (@pickover) November 26, 2017
So of course, I though that would be cool to try in Xojo. After a few minutes of playing around I quickly had it.