Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rotate animation doesn't work when Node has translation #133

Closed
galexite opened this issue Jul 2, 2017 · 10 comments
Closed

Rotate animation doesn't work when Node has translation #133

galexite opened this issue Jul 2, 2017 · 10 comments
Assignees
Milestone

Comments

@galexite
Copy link

galexite commented Jul 2, 2017

How do I animate an explicit Transform in Macaw? My app involves a compass, which is a Node on a MacawView. I only want to animate rotation, so what I really wanted was to do this:

myNode.placeVar.animate(transform: Transform.rotate(...))

Therefore retaining (but not modifying) my scaling set to myNode.place.

I do understand that there is animate(to: Transform), but I loose my scaling. If I use animate(to: myNode.place.rotate(...)), I get rather weird issues with the node resizing almost seemingly randomly.

Is this possible in Macaw?

Thanks

@ystrot
Copy link
Member

ystrot commented Jul 2, 2017

Hi George,

There is actually a special method for rotate animation:

myNode.placeVar.animate(angle: .pi)

This method can be used to rotate node around its center. You can also specify another point:

myNode.placeVar.animate(angle: .pi, x: x, y: y)

However these methods only available in the master version. You can switch to master by using:

pod 'Macaw', :git => 'https://github.com/exyte/Macaw.git'

@ystrot ystrot self-assigned this Jul 2, 2017
@galexite
Copy link
Author

galexite commented Jul 3, 2017

placeVar.animate(angle: Double) doesn't seem to work as expected; i.e., my Node looks like this with no rotation called:

Dial at 0 degrees

As soon as I use placeVar.animate(angle: Double):

Dial at 30 degrees

The dial moves off-screen.

@vhailor13
Copy link
Contributor

Hello @galexite ,
Can you provide us .svg source of your node? It seems like there is special case for bounds calculation. We will fix it asap.

@galexite
Copy link
Author

galexite commented Jul 3, 2017

I tried it with a brand new SVG of the same size and the same problem occurs (attached). I believe it is a problem with applying a positioning and scaling to the Node, and that this is being undone by animate(angle: Double), however, and not the SVG itself.

test.svg.zip

@galexite
Copy link
Author

galexite commented Jul 3, 2017

Are the bounds changed when a Transform is set, I wonder?

@galexite
Copy link
Author

galexite commented Jul 3, 2017

@vhailor13 The rotation animation works when no scaling or positioning is applied to the Node. Therefore, the problem isn't the SVG, it's the calculation of the origin when the Node has had a Transform set to its place.

@galexite
Copy link
Author

galexite commented Jul 3, 2017

Requires issue #134 to be fixed. I'll try doing it myself.

@vhailor13
Copy link
Contributor

Fixed with f7c4acb. You can try it via pod update for master branch.

@galexite
Copy link
Author

galexite commented Jul 3, 2017

@vhailor13 Wow! Thanks! Testing now.

@galexite
Copy link
Author

galexite commented Jul 3, 2017

Solved. Thank you again @vhailor13!

@galexite galexite closed this as completed Jul 3, 2017
@ystrot ystrot added this to the 0.8.3 milestone Jul 3, 2017
@ystrot ystrot assigned vhailor13 and unassigned ystrot Jul 3, 2017
@ystrot ystrot changed the title [Q] Explicitly animating a Transform on a Node Rotate animation doesn't work when Node has translation Sep 19, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants