How to make this complex animation repeat and autoreverse? Is there any way to add options UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat to this animation sequence?
[UIView animateWithDuration:1.0f animations:^{
someView.frame = someFrame1;
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.5f animations:^{
someView.frame = someFrame2;
} completion:nil];
}];
To animation from point 1 to 2 to 3 to 2 to 1 and repeat, you can do use animateKeyframesWithDuration
in iOS 7 and later:
someView.frame = frame1;
[UIView animateKeyframesWithDuration:2.0 delay:0.0 options:UIViewKeyframeAnimationOptionAutoreverse | UIViewKeyframeAnimationOptionRepeat animations:^{
[UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.5 animations:^{
someView.frame = frame2;
}];
[UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.5 animations:^{
someView.frame = frame3;
}];
} completion:nil];
If using auto-layout, you can animate the changing of the constraint constants:
[UIView animateKeyframesWithDuration:2.0 delay:0.0 options:UIViewKeyframeAnimationOptionAutoreverse | UIViewKeyframeAnimationOptionRepeat animations:^{
[UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.5 animations:^{
topConstraint.constant = 200;
leftConstraint.constant = 200;
[self.view layoutIfNeeded];
}];
[UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.5 animations:^{
topConstraint.constant = 100;
leftConstraint.constant = 300;
[self.view layoutIfNeeded];
}];
} completion:nil];
Or, the approach with auto layout is to deactivate the constraints, and then you can animate using frame
values or what have you.
In earlier versions of iOS, you can use CAKeyframeAnimation
, for example to animate along a path:
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(100.0, 100.0)];
[path addLineToPoint:CGPointMake(200.0, 200.0)];
[path addLineToPoint:CGPointMake(100.0, 300.0)];
CAKeyframeAnimation *animatePosition = [CAKeyframeAnimation animationWithKeyPath:@"position"];
animatePosition.path = [path CGPath];
animatePosition.duration = 1.0;
animatePosition.autoreverses = YES;
animatePosition.repeatCount = HUGE_VALF;
[self.someView.layer addAnimation:animatePosition forKey:@"position"];
You can do this with however many points you want. This also useful technique if you want to animate along a curved path (e.g. a circle or bezier curve).
To just animate between two points, you can use animateWithDuration:delay:options:animations:completion:
, such as:
[UIView animateWithDuration:0.5
delay:0.0
options:UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat | UIViewAnimationOptionCurveEaseInOut
animations:^{
// do whatever animation you want, e.g.,
someView.frame = someFrame1;
}
completion:NULL];
This animates the movement of someView
from the starting frame to someFrame1
and back.
By the way, using UIViewAnimationOptionCurveEaseInOut
in conjunction with UIViewAnimationOptionAutoreverse
and UIViewAnimationOptionRepeat
will give you a smoother effect as the animation reverses and repeats.