 |
| Pendulum like animation in IOS SDK |
Pendulum animation did not look easy at first step. But in IOS, we can create a pendulum like animation using the in built animation method CGAffinetransformMakeRotation.
First, we will rotate our view to the right side and then rotate it to the left side and then to right side again. This process will be repeated all the way until user remains on the same view. You will achieve, animation as shown in the picture on the left side of the screen.
I am not creating the whole interface as shown in the image, and simply sharing the animation code. We are using UIView as our board objects. One thing to be noted here that this approach is centric and the view will be rotated along the center. To overcome this issue, please double your view height and set its background color to clear color. Then add other views from its view’s center position along y axis so that it appears that view is swinging like a pendulum. Here is a small example for creating the UIView i.e. board object.
Sample Code to create the board object:
UIView *dragonView = [[UIView alloc]initWithFrame:CGRectMake(18, 18–91, 82, 91+91)];
[dragonView setBackgroundColor:[UIColor clearColor]];
[self.view addSubview:dragonView];
UIView *mainView = [[UIView alloc]initWithFrame:CGRectMake(0, 91, 82, 91)];
mainView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@”bgboxPreView.png”]];
[dragonView addSubview:mainView];
Here, dragon view our view to which we assign animation, and as i mentioned earlier that animation is centered to view therefore we set our dragonView height to double of main view height. Then we add our main view from mid of dragonView so that it appears that main view is swinging like pendulum.
Animation code for Right Rotation
-(void)rotataleRight:(UIView *)view
{
[UIView animateWithDuration:0.5
delay:0.0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
view.transform = CGAffineTransformMakeRotation(–.15);
}
completion:^(BOOL finished) {
[self performSelector:@selector(rotataleLeft🙂 withObject:view afterDelay:0.3];
}];
}
Animation code for Left Rotation
-(void)rotataleLeft:(UIView *)view
{
[UIView animateWithDuration:0.5
delay:0.0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
view.transform = CGAffineTransformMakeRotation(.15);
}
completion:^(BOOL finished) {
[self performSelector:@selector(rotataleRight🙂 withObject:view afterDelay:0.3];
}];
}
How to Use:
To use these animations just pass your board view to rotateRight method, as shown below
[self rotataleRight:dragonView];
Here we pass our dragonview to rotateRight method and start pendulum animation.
