Canvas Animation question

David_Yeaman · June 30, 2021, 10:18am

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.

Anthony_G_Cyphers · June 30, 2021, 10:21am

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

David_Yeaman · June 30, 2021, 4:56pm

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.

Sam_Rowlands · July 1, 2021, 2:48am

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.

RudolfJ · July 1, 2021, 7:27am

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

example

https://www.dropbox.com/s/2pmhhqfjp7bx0mc/canvasflash.xojo_binary_project?dl=1

David_Yeaman · July 1, 2021, 7:51am

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.

Anthony_G_Cyphers · July 1, 2021, 7:54am

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

Thom_McGrath · July 2, 2021, 7:27am

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.

github.com

thommcgrath/AnimationKit/blob/master/Project/AnimationKit/Curve.xojo_code

#tag Class
Protected Class Curve
	#tag CompatibilityFlags = ( not TargetHasGUI and not TargetWeb and not TargetIOS ) or ( TargetWeb ) or ( TargetHasGUI ) or ( TargetIOS )
	#tag Method, Flags = &h1
		Protected Function B0(Time As Double) As Double
		  Return Time * Time * Time
		End Function
	#tag EndMethod

	#tag Method, Flags = &h1
		Protected Function B1(Time As Double) As Double
		  Return 3 * Time * Time * (1 - Time)
		End Function
	#tag EndMethod

	#tag Method, Flags = &h1
		Protected Function B2(Time As Double) As Double
		  Return 3 * Time * (1 - Time) * (1 - Time)
		End Function
	#tag EndMethod

This file has been truncated. show original

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.