PagePanel Animations?

just a question regarding PagePanels for Desktops: Has anybody managed to animate the page to page transition? Cross-Platform (at least Mac and Win)?

Poking around in the documentation I’m not seeing this being a very easy task. It looks like instead of having views that are either visible or not visible each control itself has a PanelIndex property.

[ … two minutes later … ]

The more I try to think about it and come up with ideas the more issues I keep running into. My best idea so far is to create everything inside ContainerControls and create your own animatable subclass view that holds all the controls.

Well I am afraid it really is… that’s why I am asking. In Xdev Mag 13.2 Sam Rowland demoed the use of NSBitmapImageRep with animated TabPanels but for OS X only… and to be honest… far too complicated to be used in huge projects with a lot of custom controls. Hoped anybody created an easy-to use Plugin…

you can do it with a canvas subclass
this canvas must be on the window.
When you want change panel you call a method of this subclass (changePanel(panel as PagePane, destPage as integer)
within it you make as snapshot of the contents of the page panel (if you use container controls it’s simple a drawInto)
then hide the page panel, show the canvas (resized as the pagePanel)
start an animation between the two images (embedded timer) and at the end reshow the panel hiding the canvas.

Many little things to check, but it is not difficult

See http://www.tempel.org/RB/CocoaAnimation for Mac. I’m sure that MBS also has something.

Wow Thomas did a great job with his public domain Animator Pack… thank you Beatrix for this link. I will check this on my Mac OS X apps. But this only works on Mac not on Windows.

:slight_smile: I’m a Mac and not a PC.

Luke, come over to the dark side

do you have cookies? Or Ava? :wink:

As usual, Mac provides built in all the cuties. In Windows, you have to make your own. The nice thing is pure Xojo code readily works for the three platforms (even Web to some extent).

What kind of animation are we talking about ? Once you got pictures of all the pages obtained with DrawInto, you can use them to create the transition. Switch to the next page under the picture of the current page and animate.

Move in move out is fairly simple, and can be achieved with a Container Control laid over the PagePanel, and you move the picture inside in and out with a timer.

Fade out, can be obtained by changing colors of the picture with RGBSurface.Pixel, applying more or less Alpha Channel. Then in a timer you apply more and more alpha channel until the picture is over, then you turn the overlaid canvas invisible so people have access to the controls underneath.

Here is an example code to apply more or less Alpha channel to a picture.

I used a slider with maximum 255 to apply more or less alpha to a backdrop picture. It is easy to adapt to Paint, although RGBSurface maybe faster.

App.UseGDIPlus = True dim pic as new picture( Canvas1.Backdrop.width, Canvas1.Backdrop.Height) pic.graphics.DrawPicture(robot,0,0) Dim surf As RGBSurface = pic.RGBSurface for x as Integer = 1 to pic.Width for y as integer = 1 to pic.Height dim lacouleur as color = surf.pixel(x,y) surf.pixel(x,y) = RGB(lacouleur.Red, lacouleur.Green,lacouleur.Blue,Slider1.Value) next next Canvas1.Backdrop = pic

I noticed a strong flicker. It may probably be minimized by applying RGBSurface to Canvas1.Backdrop directly.

or simply draw the picture with trasparency…

Forget about cross platform fade with a container control drawInto: on windows the image contents will be different from the real cc content so it will always flash the animation
<https://xojo.com/issue/39540>