Sway Animation in iOS

Question

I was wondering if it's possible to do some sort of sway animation in iOS. For example, a sway animation would be like a store sign blowing in the wind. think westerns. I would like to do this kind of animation when a button is pressed. I'm going for a western kind of feel and that would really put it over the top. Thanks in advance if you know how to do something like this.

Answer 1

In order to do this you have to do a couple of things beforehand such as setting the layer anchor point to (0.5,0.0). like the following:

swaybtn.layer.anchorPoint = CGPointMake(0.5, 0.0);

And then make a function that gets called when the button is tapped which starts the backwards sway animation, another which sways forward, and a last one that moves back to the original position. The degrees you specify is how far the sway will go and the second number in the rotationAndPerspectiveTransform is the direction the sway will go. The functions are as follow:

-(void)sway:(id)sender{

CGFloat degrees = 50.0;

CALayer *layer;
layer = swaybtn.layer;

CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;

[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.25];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:@selector(moveForward)];

rotationAndPerspectiveTransform.m34 = 1.0 / -400;
rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, degrees * M_PI / 180.0f, -1.0f, 0.0f, 0.0f);
layer.transform = rotationAndPerspectiveTransform;

[UIView commitAnimations];

}

-(void)moveForward{

CALayer *layer;
layer = swaybtn.layer;

CGFloat degrees = 50.0;

CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;

[UIView beginAnimations:@"swayforward" context:NULL];
[UIView setAnimationDuration:0.5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:@selector(moveBack)];

rotationAndPerspectiveTransform.m34 = 1.0 / -400;
rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, degrees * M_PI / 180.0f, 1.0f, 0.0f, 0.0f);
layer.transform = rotationAndPerspectiveTransform;

[UIView commitAnimations];

}

-(void)moveBack{

CALayer *layer;
layer = swaybtn.layer;

CGFloat degrees = 50.0;

CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;

[UIView beginAnimations:@"moveback" context:NULL];
[UIView setAnimationDuration:0.25];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];

rotationAndPerspectiveTransform.m34 = 1.0 / -400;
rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, degrees * M_PI / 180.0f, 0.0f, 0.0f, 0.0f);
layer.transform = rotationAndPerspectiveTransform;

[UIView commitAnimations];

}

And there you go. You should have an animation that sways an object back and forth just like a hanging sign.