I have a view with an image shows some text in it.
I need to perform animation which reveals the character by character in the end the complete text has to be displayed.
I have a logo view in my interface, over that I have animate view. for animate view the Leading, trailing, top and bottom constraints are set based on the superView (logo view).
I have tried following code but the duration which I have specified is not working properly.
- (void) animateLogo {
[UIView animateWithDuration:10.0 animations:^{
NSLog(#"animation started");
if (self.animateViewLeadingConstraint.constant < 94) { //94 is the total width of the logo view
self.animateViewLeadingConstraint.constant = self.animateViewLeadingConstraint.constant + 1;
} else {
self.animateViewLeadingConstraint.constant = 0;
}
} completion:^(BOOL finished) {
NSLog(#"animation ended");
[self.animateView layoutIfNeeded];
[self animateLogo];
}];
}
I have attached the log for time duration
2016-08-01 17:55:27.317 sample[20361:481531] animation started
2016-08-01 17:55:27.318 sample[20361:481531] animation ended
2016-08-01 17:55:27.318 sample[20361:481531] animation started
2016-08-01 17:55:27.318 sample[20361:481531] animation ended
2016-08-01 17:55:27.318 sample[20361:481531] animation started
2016-08-01 17:55:27.319 sample[20361:481531] animation ended
2016-08-01 17:55:27.319 sample[20361:481531] animation started
2016-08-01 17:55:27.319 sample[20361:481531] animation ended
I am not sure what mistake I have made in above code or am I misunderstood the UIView Animation concept
Any help or hint would greatly appreciated.
See this answer: How do I animate constraint changes?
You should be calling layoutIfNeeded on the animated view's superview before your animation block, and in the animations: block itself. The first call makes sure any layout changes are applied. Assuming logoView is the superview of animateView:
- (void) animateLogo {
self.animateViewLeadingConstraint.constant = 0.0;
[self.logoView layoutIfNeeded];
[UIView animateWithDuration:10.0 animations:^{
NSLog(#"animation started");
self.animateViewLeadingConstraint.constant = 94.0;
[self.logoView layoutIfNeeded];
} completion:^(BOOL finished) {
NSLog(#"animation ended");
}];
}
Finally, I have got the solution based on #stevekohls comments
- (void) animateLogo {
self.animateViewLeadingConstraint.constant = 0;
[UIView animateWithDuration:5.0f animations:^{
self.animateViewLeadingConstraint.constant = 94.0;
[self.view layoutIfNeeded];
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.5f animations:^{
self.animateView.alpha = 0;
} completion:^(BOOL finished) {
self.animateViewLeadingConstraint.constant = 0;
[self.view layoutIfNeeded];
self.animateView.alpha = 1.0f;
[self animateLogo];
}];
}];
}
Related
How to pause uiview animation and just leave it there?
//#define ANIMATION_WORM_OPTIONS (UIViewAnimationOptionCurveLinear|
// UIViewAnimationOptionBeginFromCurrentState)
- (IBAction)pressUp:(id)sender {
[self.game wormUp];
[self.gameScene.wormView.layer removeAllAnimations];
[UIView animateWithDuration:5 delay:0 options:ANIMATION_WORM_OPTIONS
animations:^{
[self.gameScene.wormView moveUp];
} completion:^(BOOL finished) {
}];
}
- (IBAction)pressRight:(id)sender {
[self.game wormRight];
[UIView animateWithDuration:5 delay:0 options:ANIMATION_WORM_OPTIONS
animations:^{
[self.gameScene.wormView moveRight];
} completion:^(BOOL finished) {
}];
}
For example here is what I am trying to do:
When I first tap "Right" a worm goes right.
Then when I tap "Up" during the worm goes right, the worm should stop and go up.
The problem in my code is the removeAllAnimations will first put the worm to the end of first animation end, then begin goes up.
You need to change the view's frame to the halting position frame. Just add the following before you do the removeAllAnimation on view.layer.
self.theView.frame = [self.theView.layer.presentationLayer frame];
CFTimeInterval pausedTime = [self.gameScene.wormView.layer convertTime:CACurrentMediaTime() fromLayer:nil];
self.gameScene.wormView.layer.speed = 0.0;
self.gameScene.wormView.layer.timeOffset = pausedTime;
I am using the UIView animateWithDuration:delay:options:animations:completion: method but the completion method is never getting called. Here is my code:
[UIView animateWithDuration:1 delay:0 options:UIViewAnimationOptionAllowUserInteraction animations:^
{
//random lines of code
}completion:^(BOOL finished){
if (finished)
{
NSLog(#"FINISHED");
}
}];
EDIT: When I comment out the lines in my animations: it gets called???!!!
These are the lines:
CGFloat objectY = object.frame.origin.y;
objectY += speed;
object.frame = CGRectMake(object.frame.origin.x, objectY, 75, 75);
I am taking a guess - you want to animate the movement of a continuous gesture?
If yes, the animation never ends due the user interaction.
Just update the frame, no UIView Animation. Should work just fine.
Tyring to animate a UIView by changing its height and position. The first animation jumps? I have the size of the UIView (theView) set in Storyboards to be height of 216. So the app loads and the theView is shown. I click theView and it quickly jumps in height to 200+ pixels then animates as it should?
- (void)singleTapAction:(UIGestureRecognizer *)singleTap {
UIView *view = singleTap.view;
[UIView animateWithDuration:1.2 delay:0 options:UIViewAnimationCurveLinear | UIViewAnimationOptionAllowUserInteraction animations:^{
CGRect theFrame = self.theView.frame;
theFrame.size.height += 100.f; <!-- when it hits here the view jumps then animates
self.theView.frame = theFrame;
}
completion:^(BOOL finished) {
if(finished){
[UIView animateWithDuration:1.2 delay:0 options:UIViewAnimationCurveLinear | UIViewAnimationOptionAllowUserInteraction animations:^{
CGRect theFrame = self.theView.frame;
theFrame.origin.y -= 100.f;
self.theView.frame = theFrame;
}
completion:^(BOOL finished) {
NSLog(#"animations complete");
}];
}
}];
}
Try moving lines
CGRect theFrame = self.theView.frame;
theFrame.size.height += 100.f; <!-- when it hits here the view jumps then animates
outside the block. Put it before the animation method is called.
It's easy enough to animate the view:
[UIView animateWithDuration:1.0
animations:^{theView.center = newCenter; theView.alpha = 0;}
completion:^(BOOL finished){
[theView removeFromSuperview];
}];
The problem is that when I add it as a subview, I want it to fade in and already look like it is moving. Right now it appears immediately, then moves and fades out.
So, I need to set it's initial alpha to zero, fade it quickly while it is moving, then fade it out. Is this possible with UIView animations? I can't have two competing animation blocks working on the same object right?
All you need to do is apply 2 animations back-to-back. Something like this ::
theView.alpha = 0;
[UIView animateWithDuration:1.0
animations:^{
theView.center = midCenter;
theView.alpha = 1;
}
completion:^(BOOL finished){
[UIView animateWithDuration:1.0
animations:^{
theView.center = endCenter;
theView.alpha = 0;
}
completion:^(BOOL finished){
[theView removeFromSuperview];
}];
}];
So in the 1st second it will appear while moving and then in the next second it will fade out
Hope this helps
Put the initial alpha=0 outside animation block.
theView.alpha = 0;
[UIView animateWithDuration:1.0
animations:^{
theView.center = newCenter;
theView.alpha = 1;
}
completion:^(BOOL finished){
// Do other things
}];
Im Trying to make a red square move from top of view to a random position at the bottom of the view and the return to the top again at random position.
The app starts with the following code into [super viewLoad]:
[redSquare setCenter:CGPointMake(25,25)];
(with the red square view set 50 x 50, this starts the app with the redsquare in the top left corner).
The first part of the animation works well - the red square animates to a random position to the bottom of the page. But, it then jumps to a random position to the top without animation.
Please help what I'm doing wrong or any other solutions to help with this simple animation.
-(void)moving{
[UIView animateWithDuration:1.0 delay:0.0 options:UIViewAnimationCurveEaseIn animations:^{
int randomx = arc4random() % 295;
[redSquare setCenter:CGPointMake(randomx,435)];
} completion:^(BOOL finished) {
[redSquare setCenter:CGPointMake(redSquare.frame.origin.x,25)];
}];
}
Your completion block simply sets the new position. You aren't animating it back to the top:
Try this, instead
-(void)moving {
[UIView animateWithDuration:1.0 delay:0.0 options:UIViewAnimationCurveEaseIn animations:^{
int randomx = arc4random() % 295;
[redSquare setCenter:CGPointMake(randomx,435)];
} completion:^(BOOL finished) {
[UIViewAnimateWithDuration:1.0 delay:0.0 options:UIViewAnimationCurveEaseIn animations:^{
[redSquare setCenter:CGPointMake(redSquare.frame.origin.x,25)];
} completion: NULL
}];
}
Edited to add
It's true that sublevels can get confusing, but you can make life simple and less indented if you define the blocks separately from the method.
For example, you could rewrite the above as:
-(void)moving {
workBlk_t animationBlock = ^ {
int randomx = arc4random() % 295;
[redSquare setCenter:CGPointMake(randomx,435)];
};
void (^completionBlock)(BOOL finished) = ^{
[UIViewAnimateWithDuration:1.0 delay:0.0 options:UIViewAnimationCurveEaseIn animations:^{
[redSquare setCenter:CGPointMake(redSquare.frame.origin.x,25)];
} completion : NULL
};
[UIView animateWithDuration:1.0
delay:0.0
options:UIViewAnimationCurveEaseIn
animations:animationBlock
completion:completionBlock
}];
}
you should start new animation in completion block for example:
completion:^(BOOL finished) {
[UIView animateWithDuration:1.0 delay:0.0 options:UIViewAnimationCurveEaseIn animations:^{
int randomx = arc4random() % 295;
[redSquare setCenter:CGPointMake(randomx,25)];
} completion:^(BOOL finished) {
}];
}];
This part does exactly what you are describing:
completion:^(BOOL finished) {
[redSquare setCenter:CGPointMake(redSquare.frame.origin.x,25)];
}
I.e. returns the object to the top of the screen after the animiation is completed. This will not be animated, it will happen after the animation is completed, and thus it will be instant.
You need to trigger a new animation after the animation is completed.
To create several nested animation blocks can however become a bit messy, the most clean way is to create another method for animating back and call it when the first animation is completed, like this:
-(void) moveDown{
[UIView animateWithDuration:1.0 delay:0.0 options:UIViewAnimationCurveEaseIn animations:^{
int randomx = arc4random() % 295;
[redSquare setCenter:CGPointMake(randomx,435)];
} completion:^(BOOL finished) {
// First animation completed
[self moveBack];
}];
}
-(void) moveBack{
[UIView animateWithDuration:1.0 delay:0.0 options:UIViewAnimationCurveEaseIn animations:^{
[redSquare setCenter:CGPointMake(redSquare.frame.origin.x,25)];
} completion:^(BOOL finished) {
// Second animation completed
}];
}