3D rotation in iOS

Is it possible to rotate an image in 3D space?

What I try to do is drawing a card for a memory game.
You know the game right? I just bend the rules a little to make it a little bit more difficult :smiley:

When the user taps the card, it flips (with a rotation animation over the x- or y-axis).
But how can I do this rotation animation :confused:

I suggest taking a look at Ulrich iOSLib. There are several core animations to be found. Turning images in everyway is certainly possible with the declares provided in the iOSLib.

Especially if those declares invoke SceneKit… which is very easy to use, and produces awesome 3d images

I looked at some online tutorial. It’s awesome. But not exactly what I was looking for, I think.

There is a way using just iOSCanvas pure Xojo code that may do what you want.

Use a timer to shrink one dimension of the picture, and keep it in the center of the canvas, down to one pixel. It will seem the card is going sideways. After which you can do the opposite with the card back. It will look as if the card is flipped.

That is a less elegant solution. But if the transition is fast enough, nobody will notice. I will try it, as well as the iOSLib method Christoph De Vocht mentioned.

I only mentioned it as you said [quote=212159:@Edwin van den Akker]not exactly what I was looking for, I think.[/quote]

Whatever :stuck_out_tongue:

[quote=212190:@Michel Bujardet]I only mentioned it as you said
Whatever :p[/quote]

I actually like your solution. It is small and simple. Didn’t take much time at all.

Small is beautiful :wink:

Except for burgers :wink:

It’s probably not that easy to find, therefore:

gives you the possibility to add a GPU-supported animation to the CGAffineTransform for every Appleview, which means, every visible control. With the AppleViewAnimationOption you can set different parameters, and you can catch the end of this animation via AnimationFinished event.

The CGAffineTransform is a bit hard to understand at first. Therefore there’s different methods in the ControlExtension module like Rotate, Scale … to make its handling easier.

[quote=212219:@Ulrich Bogun]It’s probably not that easy to find, therefore:

gives you the possibility to add a GPU-supported animation to the CGAffineTransform for every Appleview, which means, every visible control. With the AppleViewAnimationOption you can set different parameters, and you can catch the end of this animation via AnimationFinished event.

The CGAffineTransform is a bit hard to understand at first. Therefore there’s different methods in the ControlExtension module like Rotate, Scale … to make its handling easier.[/quote]

Maybe it is just me. But when I first looked at the iOSlib classes, it was all very overwhelming to me.
I also read somewhere that you are in the process of renaming your classes. Is that process done? Is it safe for me to start implementing your wisdom?

Whereever you find something in the Wiki, feel free to use it. Other things you find in the library could be untested yet, but the renaming should be complete – it’s everything Apple… now. Of course some things might change in the future when I find bugs, but in general the renaming is done.

And I know: It’s quite a lot, and there’s no overview by topic. My recommendation would be to examine the demo projects (in “Graphics” you can see some animations at work) or even look for ObjC/Swift tutorials. Where I implemented the appropriate part, you can mostly translate what you find directly to Xojo/iOSLib (keeping in mind that the classes usually start with “Apple” instead of “NS” or “UI”). If that doesn’t help, just send me a notice.

EDIT: For a start, maybe use the controlextension module and test the Transform property like (say you have a Xojo control named myControl):

mycontrol.AppleView.Transform.rotate (0.5) and then examine the resulting CGAffineTransform matrix object.
or use one of the animation functions like above (mycontrol.appleview.Animate(whatever) or myControl.AppleView.Springanimate(Whatever))

By any chance, do you have a small example project by hand. Something that “flips” an image on a canvas?
Of course, I will mention you in the credits, if I am ever able to finish my project :wink:

A real demo project: Sorry, currently no. But if you open the animation demo in iOSLib, there are several transform animations I perform on the images. i have tried to explain a few animation basics in part I and II here: https://github.com/UBogun/Xojo-iosLib/wiki/UIView-Basics.
Admittedly, they don’t cover the transform property very well.
Apple’s documentations are often a bit short on words for my taste, but I found this here explains the transformations rather in depth: https://developer.apple.com/library/ios/documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/dq_affine/dq_affine.html#//apple_ref/doc/uid/TP30001066-CH204-TPXREF101

In short: Every view has its transform property which defines how the optical representation of the view will be scaled, rotated and/or translated. CATransform3D adds another axis for third dimension manipulations. By default, this property is set to Identity, which means the View’s render will look exactly like the view’s contents.

If you want to manipulate the transform, you have always the choice between two similar methods:
Rotation, for example, can be influenced by MakeRotation and by Rotate.
The Make… methods of the TransformExtension create new CGAffineTransforms. If you scaled a view with a Transform that was created via Makescale (or one of the view convenience methods that do that for you) and then set myView.Transform = TransformExtension.CGAffineTransformMakeRotation (angle), the result will be rotated but not scaled anymore.

For that, use the Rotate(angle) method rather which takes a current Transform property as additional input parameter and adds the rotation to it. And so on.

Flipping images can be done by inverting an axis of the Transform’s scale value. In other words:
myView.Transform = Transformextension.MakeScale(-1, 1) flips an image horizontally.
(Or shorter, but doing the same thing: aControl.AppleView.Scale resp. aControl.AppleView.SetScale)

Does that help a bit? If not, or if you have a certain transformation/animation you cannot achieve, please tell me (preferably with a short demo project) and I’ll try to set it up for you.

Addition: Having read the OP’s question again: I think for flipping cards the view transitions are the best way to go. You can find their descriptions and examples here: https://github.com/UBogun/Xojo-iosLib/wiki/UIView-Transitions

@Ulrich Bogun I apologise for bumping an old thread, but this almost answers my question. I have an iOSImage and I want to rotate it 90 degrees using CIFilter. I believe that I need to do a CIAffineTransform but I’m stuck creating the transform. I bet the code makes sense once you “know” – are you able to give me a simple example? :slight_smile:

Hi Jason,

just open the CIFilter demo from AppleLib/iOSLib and scroll the table way down.
The first entry in the “Geometry Adjustment” section is AffineTransform. The code would have to be adjusted a bit:

dim transform as cgAffineTransform transform = TransformExtension.MakeDegreesRotation(90)
And then assign this to an AppleCIFilter like

filter = new AppleCIAffineTransform(originalpic, transform)

where you can then use its outputCIImage property to create an UIImage or a new picture.

You could as well simply rotate the container (ImageWell, canvas) showing the image by addressing its transform property.

Another option would be to create a duplicate of the image using the AppleImage class and change its orientation in that step.

Thanks so much Ulrich. I haven’t upgraded to the newer AppleLib\iOSLib just yet - I’m still on the earlier iOSLib - because I was afraid of naming collisions with iOSKit. You may remember that we had those initially and you did some renaming. Would you happen to know off-hand whether that will be an issue again with the newer version?

I kept mostly everything in namespaces, so it theoretically should be no problem. I have the inkling that the TransformExtension was in the old iOSLib too, but the CIFilters were not, at least not to the extent they are included in AppleLib. But as I said: if it is only about rotation, you could use the transform property of the control’s UIVIew and it should work out ok with the old library.

The new version still lacks a few things that were in the old one and it features some other things that I could transfer because they are the same in both macOS and iOS. If it works for you, you can stay with the old one but it is not maintained anymore and might cause problems sooner or later – CGFloat and external methods save a lot of time, but they are used in AppleLib only.