Canvas Animation question

Hi all, long shot this one, but as my mother taught me, don’t ask, don’t get!

Does anyone know of a way to make a canvas pulse (maybe via a timer)? I want to have an interface element that visually pulses (preferably with easing in and out) to draw the users eye to it… I guess I’d do this inside the canvas paint event but don’t have the necessary math knowledge to work out how to do it - any help would be greatly appreciated. Regards, Dave.

I wrote a four-part series on animation for the Xojo blog a while back, and that eventually became GraffitiAnimator. The blog posts and included example should get you through, but there’s a lot of extra bells and whistles in GraffitiAnimator.

Part 1: Guest Post: Animating Xojo, Part 1 – Xojo Programming Blog
Part 2: Guest Post: Animating Xojo, Part 2 – Xojo Programming Blog
Part 3: Guest Post: Animating Xojo, Part 3 – Xojo Programming Blog
Part 4: Guest Post: Animating Xojo, Part 4 – Xojo Programming Blog

Yes I did take a quick look at this - looks great - but maybe a bit too much for what I need in this instance. Cheers though.

The main critical thing to figure out is how you are going to make your object pulse. Once you know how it is going to work and perhaps test it with say a slider, then you can worry about animating it.

Hello David,
take a timer and count the size
draw your shape in canvas paint


Hi Rudolf - thanks for this, but it’s not the actual animation I’m struggling with, it’s the ease-in-ease-out math to give the appearance of pulsing that I’m struggling with. I’ve found some references online which I’m working through, thanks though.

I’ve provided some easing functions in Xojo code in Part 4 of my series linked above. And others in the example project.

Easing is handled by a cubic bezier function. The horizontal axis the amount of time passed, and the vertical axis is the percent finished the animation will appear.

My AnimationKit has a Curve class with methods such as Curve.CreateEaseOut that will handle this for you. Then you use the Evaluate method and you can get the Y value for a given X.

If you wanted to dive deeper into AnimationKit, the ValueTask is how I’d handle this. You basically setup a task for changing a value from 0 to 1 (the percent your animation would be finished) and let it tell your canvas when to change. I did exactly the kind of pulse animation you’re looking for in my Beacon app. You’re welcome to take a look, but there is a LOT going on Beacon/ShelfItem.xojo_code at master · thommcgrath/Beacon · GitHub.