I am using transitionWithView animation block to animate view. This block is called when user swipe the view in left or right direction. It works fine. But I want to create my own custom animation like view gets changed from left to right direction. I don't know how to achieve this. I am using UIViewAnimationOptionTransitionCurlUp for right to left swipe
and UIViewAnimationOptionTransitionCurlDown for left to right swipe in UIViewAnimationOptions.
[UIView transitionWithView:self.view duration:0.6 options:UIViewAnimationOptionTransitionCurlUp animations:^{
setDataInLayout();
} completion:^(BOOL finished) {
[scrollViewContent setContentOffset:CGPointZero animated:YES];
[self.delegate updatePaginationCounter:_currentStoneIndex];
}];
You have to implement this animation by yourself. I would use UIView animation API like:
UIView.animateWithDuration(0.6, animations: {
// apply 2D transformation to the view, or use any other animatable property
self.view.transform = CGAffineTransformMakeRotation(fullRotation)
} completion: {finished in
// you completion block
})
Here is the list of UIView's animatable properties. For more complex animations you can use the keyframe-based animation:
UIView.animateKeyframesWithDuration(duration, delay: delay, options: options, animations: {
// add your keyframe animations here
UIView.addKeyframeWithRelativeStartTime(0, relativeDuration: 1/2, animations: {
self.view.transform = ...
})
UIView.addKeyframeWithRelativeStartTime(1/3, relativeDuration: 1/2, animations: {
self.view.transform = ...
})
}, completion: {finished in
// completion block
})
}
Related
I have a problem with the setting UIViewAnimationOptionAutoReverse.
Here is my code.
CALayer *aniLayer = act.viewToChange.layer;
[UIView animateWithDuration:2.0 delay:1.0 options:(UIViewAnimationCurveLinear | UIViewAnimationOptionAutoreverse) animations:^{
viewToAnimate.frame = GCRectMake(1,1,100,100);
[aniLayer setValue:[NSNumber numberWithFloat:degreesToRadians(34)] forKeyPath:#"transform.rotation"];
} completion:nil ];
The problem is that, after the animation has reversed, the view jumps back to the frame set in the animation block. I want the view to grow and "ungrow" and stop at its original position.
Is there a solution without programming two consecutive animations?
You have three options.
When you use the -[UIView animateWithDuration:…] methods, the changes you make in the animations block are applied immediately to the views in question. However, there is also an implicit CAAnimation applied to the view that animates from the old value to the new value. When a CAAnimation is active on a view, it changes the displayed view, but does not change the actual properties of the view.
For example, if you do this:
NSLog(#"old center: %#", NSStringFromCGPoint(someView.center));
[UIView animateWithDuration:2.0 animations: ^{ someView.center = newPoint; }];
NSLog(#"new center: %#", NSStringFromCGPoint(someView.center));
you will see that 'old center' and 'new center' are different; new center will immediately reflect the values of newPoint. However, the CAAnimation that was implicitly created will cause the view to still be displayed at the old center and smoothly move its way to the new center. When the animation finishes, it is removed from the view and you switch back to just seeing the actual model values.
When you pass UIViewAnimationOptionAutoreverse, it affects the implicitly created CAAnimation, but does NOT affect the actual change you're making to the values. That is, if our example above had the UIViewAnimationOptionAutoreverse defined, then the implicitly created CAAnimation would animate from oldCenter to newCenter and back. The animation would then be removed, and we'd switch back to seeing the values we set… which is still at the new position.
As I said, there are three ways to deal with this. The first is to add a completion block on the animation to reverse it, like so:
First Option
CGPoint oldCenter = someView.center;
[UIView animateWithDuration:2.0
animations: ^{ someView.center = newPoint; }
completion:
^(BOOL finished) {
[UIView animateWithDuration:2.0
animations:^{ someView.center = oldCenter; }];
}];
Second Option
The second option is to autoreverse the animation like you're doing, and set the view back to its original position in a completion block:
CGPoint oldCenter = someView.center;
[UIView animateWithDuration:2.0
delay:0
options: UIViewAnimationOptionAutoreverse
animations: ^{ someView.center = newPoint; }
completion: ^(BOOL finished) { someView.center = oldCenter; }];
However, this may cause flickering between the time that the animation autoreverse completes and when the completion block runs, so it's probably not your best choice.
Third Option
The last option is to simply create a CAAnimation directly. When you don't actually want to change the final value of the property you're changing, this is often simpler.
#import <QuartzCore/QuartzCore.h>
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"position"];
animation.autoreverses = YES;
animation.repeatCount = 1; // Play it just once, and then reverse it
animation.toValue = [NSValue valueWithCGPoint:newPoint];
[someView.layer addAnimation:animation forKey:nil];
Note that the CAAnimation way of doing things never changes the actual values of the view; it just masks the actual values with an animation. The view still thinks it's in the original location. (This means, for example, that if your view responds to touch events, it will still be watching for those touch events to happen at the original location. The animation only changes the way the view draws; nothing else.
The CAAnimation way also requires that you add it to the view's underlying CALayer. If this scares you, feel free to use the -[UIView animateWithDuration:…] methods instead. There's additional functionality available by using CAAnimation, but if it's something you're not familiar with, chaining UIView animations or resetting it in the completion block is perfectly acceptable. In fact, that's one of the main purposes of the completion block.
So, there you go. Three different ways to reverse an animation and keep the original value. Enjoy!
Here's my solution. For 2x repeat, animate 1.5x and do the last 0.5x part by yourself:
[UIView animateWithDuration:.3
delay:.0f
options:(UIViewAnimationOptionRepeat|
UIViewAnimationOptionAutoreverse)
animations:^{
[UIView setAnimationRepeatCount:1.5f];
... animate here ...
} completion:^(BOOL finished) {
[UIView animateWithDuration:.3 animations:^{
... finish the animation here ....
}];
}];
No flashing, works nice.
There is a repeatCount property on CAMediaTiming. I think you have to create an explicit CAAnimation object, and configure it properly. The repeatCount for grow and ungrow would be 2, but you can test this.
Something a long the lines of this. You would need two CAAnimation objects though, one for the frame and one for the rotation.
CABasicAnimation *theAnimation;
theAnimation=[CABasicAnimation animationWithKeyPath:#"transform.rotation"];
theAnimation.duration=3.0;
theAnimation.repeatCount=1;
theAnimation.autoreverses=YES;
theAnimation.fromValue=[NSNumber numberWithFloat:0.0];
theAnimation.toValue=[NSNumber numberWithFloat:degreesToRadians(34)];
[theLayer addAnimation:theAnimation forKey:#"animateRotation"];
AFAIK there is no way to avoid programming two animation objects.
Here is a Swift version of #Rudolf Adamkovič's answer, where you set the animation to run 1.5 times and in the completion block run a 'reverse' animation one final time.
In the below snippet I am translating my view by -10.0 pts on the y-axis 1.5 times. Then in the completion block I animate my view one final time back to its original y-axis position of 0.0.
UIView.animate(withDuration: 0.5, delay: 0.5, options: [.repeat, .autoreverse], animations: {
UIView.setAnimationRepeatCount(1.5)
self.myView.transform = CGAffineTransform(translationX: 0.0, y: -10.0)
}, completion: { finished in
UIView.animate(withDuration: 0.5, delay: 0, options: [], animations: {
self.myView.transform = CGAffineTransform(translationX: 0.0, y: 0.0)
}, completion: nil)
})
I want to animate my UIProgressView progression from 0 to 1 during 10 seconds.
Code:
[UIView animateWithDuration:10.0 animations:^{
[_myProgressView setProgress:1 animated:YES];
} completion:(BOOL finished)^{
if (finished) NSLog(#"animation finished);
}];
Animation is working fine except that completion and NSLog are always called instantly.
I tried animateWithDuration: withDelay: but the delay is not respected and executed immediately.
Has anyone encountered the same problem?
Thanks for you help.
Its an old problem but I am still posting the solution here. The solution turned out to be really simple.
All you need to do is:
[_myProgressView setProgress:1];
[UIView animateWithDuration:10.0 animations:^{
[_myProgressView layoutIfNeeded];
} completion:^(BOOL finished){
if (finished) NSLog(#"animation finished");
}];
Here is a good explanation for why things were working incorrectly for you:
http://blog.spacemanlabs.com/2012/08/premature-completion-an-embarrassing-problem/
So you can not use setProgress:animated: method to animate the progress view and get your desired behaviour of completion block as well. However, just setting progress inside the block will not animate it, since progress is not an animatable property.
Refer to apple documentation which says its necessary for the property to be animatable:
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIView_Class/#//apple_ref/occ/clm/UIView/animateWithDuration:animations:
So you just update the value of progress property outside the animate block and do the layout of the view inside the animate block.
None of these answers really worked for me. I was able to get the progress to animate, but for some reason it had a delay in the beginning (especially for longer durations).
The key for me, was to call layoutIfNeeded inside an animation block and wait on the completion before doing the 2nd animation. This code is called from viewDidLoad. With the following code, I was able to achieve a perfectly smooth timer animation.
// For some reason, the first layoutIfNeeded() needs to be wrapped in an animation block, even though it is supposedly a synchronous call. Otherwise, the progress just jumps right to 100%
UIView.animate(withDuration: 0.0, animations: {
self.progressView.layoutIfNeeded()
}, completion: { finished in
self.progressView.progress = 1.0
UIView.animate(withDuration: self.timerDuration, delay: 0.0, options: [.curveLinear], animations: {
self.progressView.layoutIfNeeded()
}, completion: { finished in
print("animation completed")
})
})
Make it simple instead using NSTimer like,
[progressview setProgress:0 animated:NO];
NSTimer *t=[NSTimer scheduledTimerWithTimeInterval: 1.0f
target: self
selector: #selector(progressupdate)
userInfo: nil
repeats: YES];
Below is the function which updates progress,
-(void)progressupdate{
if(progressview.progress<1){
[progressview setProgress:(progressview.progress+=0.2) animated:YES];
}
else{
[t invalidate];
}
}
Hope it helps....
What i found out is a set of both UIview animations and progress view animatons that work much nicer and animate the progressview smoothly. If you just use the combination of animation and progressview animation it is fired directly without regard to the UIview animation timer.
-(void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated];
timer = [NSTimer scheduledTimerWithTimeInterval: 1.0f
target: self
selector: #selector(updateTimer)
userInfo: nil
repeats: YES];
}
- (void)updateTimer
{
if (progressView.progress >= 1.0) {
[timer invalidate];
}
[UIView animateWithDuration:1 animations:^{
float newProgress = [self.progressView progress] + 0.125;
[self.progressView setProgress:newProgress animated:YES];
}];
}
Feel free to adjust the animation times to even better and smooth transitions
It's an old question, but I had a similar problem and here is my solution (sorry it's in Swift). The completion part is called when the animation finishes. It's inside a custom UIProgressView class.
override func setProgress(progress: Float, animated: Bool) {
self.progress = progress
if animated {
let duration: NSTimeInterval = 10.0
UIView.animateWithDuration(duration, delay: 0.0, options: UIViewAnimationOptions.CurveLinear, animations: {
self.layoutIfNeeded()
}, completion: { (completed) in
self.animationDuration = nil
})
} else {
self.layoutIfNeeded()
}
}
I'm learning to develop for iOS, and as part of education process I have created custom UIView which uses drawRect to draw it's contents (Core Graphics + UIBezierPath based). Everthing works as expected, view is dynamic and renders it's contents depending on it's width/height. Now I want to add dissolve animation which should look like scaling from 100% to 0%. I have written this code to do it:
[UIView animateWithDuration:1 delay:0
options: UIViewAnimationOptionBeginFromCurrentState
animations: ^{
for (CardView *cardView in self.cardsViews) {
cardView.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.01, 0.01);
}} completion:nil];
However, this code DOES NOT scales my view from 100% to 0%. It just makes cards to dissapear (at most). I have tried many ways of doing scaling, but only effect I have reached so far is zooming from 0% to 100%. This my view does perfectly, but not reverse scaling... Also, it DOES NOT scales up/down even if I try to apply non-animated transformation such as:
cardView.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.5, 0.5);
I see that my view look changes A BIT, but not scales to 50%, that's for sure. When I try to apply exactly same animation logic to UILabel, it works perfectly! What have I missed developing custom UIView? Why scaling view may malfunction?
Thanks a lot in advance!
UPDATE #1 This code makes my view exactly twice as big and than scales it back to original size:
[UIView animateWithDuration:5 delay:0
options: UIViewAnimationOptionBeginFromCurrentState
animations: ^{
for (CardView *cardView in self.cardsViews) {
cardView.transform = CGAffineTransformMakeScale(0.5, 0.5);
}
} completion:nil];
It is simple 100% to 0% using CGAffineTransformScale:
cardView.view.transform =CGAffineTransformScale(CGAffineTransformIdentity, 1.1, 1.1);
[UIView animateWithDuration:0.3/1.5 animations:^{
cardView.view.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.1, 0.1);
} completion:^(BOOL finished)
{
NSLog(#" Animation complet Block");
}];
What you can try is setting the contentMode of the view to UIViewContentModeRedraw and adding another animation option - UIViewAnimationOptionAllowAnimatedContent - in animateWithDuration method.
Swift scaling from 120% to 100%:
logoView.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
UIView.animate(withDuration: 0.55, delay: 0.1, options: [.curveEaseOut], animations: {
self.logoView.transform = .identity
self.view.layoutIfNeeded()
}, completion: { _ in
})
I have a UICollectionView containing a number of cells containing views which can drag/dropped out of the collection view into a different view that is outside the collection view. This process works fine. However, when the dragged view is dropped into its new location, I want to animate the drop by scaling the drag view to its full size then back to zero, before removing it from the superview. This works in other areas of the app when I'm dragging other objects around, but this one is the only one involving the collection view.
[UIView animateWithDuration:0.375
animations:^{ dragView.transform = CGAffineTransformMakeScale (1.0f, 1.0f); dragView.transform = CGAffineTransformMakeScale(0.0f, 0.0f); }
completion:^(BOOL finished) { [dragView removeFromSuperview]; } ];
If I don't use the completion block, the animation fails, presumably because the view is removed before the animation finishes. But if I DO use the completion block, when the animation completes, subsequent pan gestures (used for scrolling the collection view) are passed to the pan gesture recognizer used in my view controller for other things, instead of for scrolling the collection view. As a result, the collection view appears "locked up" after the animation. If I remove the completion block, the problem with gesture recognition doesn't occur afterward, but the animation doesn't work, either.
I've tried setting userInteractionEnabled=YES on the collection view after the animation, but it doesn't help.
Any suggestions? TIA
omg, what do you expect of 2 simultaneous animations of the same type? Maybe it is a solution?
first animation call:
[UIView animateWithDuration:0.375
animations:^{ dragView.transform = CGAffineTransformMakeScale (1.0f, 1.0f); }
completion:^(BOOL finished) { /*call the second animation*/ } ];
second animation call:
//second animation
[UIView animateWithDuration:0.375
animations:^{ dragView.transform = CGAffineTransformMakeScale(0.0f, 0.0f); }
completion:^(BOOL finished) { [dragView removeFromSuperview]; } ];
In Swift 5.0, iOS 13+, add .allowUserInteraction to animate options, then animation won't block gesture recognizer.
UIView.animate(
withDuration: 0.375,
delay: 0,
options: [.curveEaseOut, .allowUserInteraction],
animations: {
dragView.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
dragView.transform = CGAffineTransform(scaleX: 0.0, y: 0.0)
},
completion: {_ in dragView.removeFromSuperview()})
I'm running this code...
[UIView animateWithDuration:0.2
delay:0.0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
CGAffineTransform settingsTransform = CGAffineTransformMakeTranslation(self.settingsView.frame.size.width, 0);
CGAffineTransform speedTransform = CGAffineTransformMakeTranslation(-self.speedView.frame.size.width, 0);
self.settingsView.transform = settingsTransform;
self.speedView.transform = speedTransform;
} completion:nil];
But when it runs the views jump half the transform in the opposite direction before sliding to half a position in the correct direction.
I've slowed down the animation duration to 5 seconds but the initial jump is instantaneous and half the transformation in the wrong direction.
When I animate back using this code...
[UIView animateWithDuration:0.2
delay:0.0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
self.settingsView.transform = CGAffineTransformIdentity;
self.speedView.transform = CGAffineTransformIdentity;
} completion:nil];
It does exactly the same thing.
The result is that the final movement is half the desired transform as it jumps half the transform in the wrong direction first.
I really can't work out why this is happening?
Any ideas.
::EDIT::
Clearing up some possible ambiguity.
I'm not trying to have these views "bounce" back to where they are. The views I'm animating are like control panel at the edge of the screen. When the user presses "go" the view then slide out of the way. When the user presses "stop" the panels slide back into the view.
At least they used to. Since enabling auto layout (which I need for other parts of the app) I can't just change the frame of the views so I went the the transform route.
You can see this effect by sticking a view into a view controller and a button to run the animation.
Thanks
I had the exact same problem so here is the solution I came up with.
CGAffineTransform transform = CGAffineTransformMake(1, 0, 0, 1, translation.x, translation.y);
[UIView animateWithDuration:0.25 animations:^{
_assetImageView.transform = transform;
[self.view layoutIfNeeded];
} completion:^(BOOL finished) {
}];
So I call [self.view layoutIfNeeded]; inside of the animate block. Without this the it has the same problem as you and jumps the distance negative translation first then animates to the correct position from there. I am calling this from a view controller so self is a sub class of UIViewController. In your case "self.view" may not exist but I hope you get the idea.
None of the solutions here worked for me... My animation would always skip. (except when it was right at the end of another animation, hint).
Some details:
The view that was doing this had a series of scale and translates already in the stack.
Solution:
Doing a keyframe animation, with a super short first key that would basically re apply the transform that that the last animation should have set.
UIView.animateKeyframesWithDuration(0.4, delay: 0.0, options: [.CalculationModeCubic], animations: { () -> Void in
//reset start point
UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration: 0.01, animations: { () -> Void in
self.element.transform = initialTransform
})
UIView.addKeyframeWithRelativeStartTime(0.01, relativeDuration: 0.99, animations: { () -> Void in
self.element.transform = finalTransform
})
}, completion: nil)
OK, having watched the WWDC videos again they state that one of the first things you have to do when using AutoLayout is to remove any calls for setFrame.
Due to the complexity of the screen I have removed the Auto-Layout completely and I'm now using the frame location to move the view around the screen.
Thanks
I've asked Apple Technical Support about this issue and got this response, so it's a bug.
iOS 8 is currently exhibiting a known bug in UIKit animations where
transform animations get the wrong fromValue (primarily affecting the
position of animated objects, making them appear to “jump”
unexpectedly at the start on an animation).
[...]
The workaround until a potential fix is delivered is to drop down to
Core Animation APIs to code your animations.
Here's improved version of Andreas answer
The key difference is that you can specify just one keyframe and get less code
UIView.animateKeyframes(withDuration: animationDuration, delay: 0.0, options: [], animations: {
UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 1.0, animations: {
animatedView.transform = newTransform
})
}, completion: nil)
Does your settingsView or speedView already have a transformation applied before this animation takes place?
If the transformations for these views is not the identity transformation (aka CGAffineTransformIdentity, aka no transformation), you cannot access their .frame properties.
UIViews' frame properties are invalid when they have a transformation applied to them. Use "bounds" instead.
Since you want your second animation to occurs from the current state of your first animation (whether it is finished or not) I recommend to use the UIViewAnimationOptionLayoutSubviews option when setting your second animation.
[UIView animateWithDuration:0.2
delay:0.0
options:UIViewAnimationOptionCurveEaseOut|UIViewAnimationOptionLayoutSubviews
animations:^{
self.settingsView.transform = CGAffineTransformIdentity;
self.speedView.transform = CGAffineTransformIdentity;
} completion:nil];
Here is a sample of the code i used for testing by using the simple view controller template:
myviewcontroller.m:
- (void)viewDidLoad
{
[super viewDidLoad];
self.animatedView = [[UIView alloc] initWithFrame:CGRectMake(20, 20, 160, 80)];
self.animatedView.backgroundColor = [UIColor yellowColor];
[UIView animateWithDuration:0.2
delay:0.0
options:UIViewAnimationOptionCurveEaseOut|UIViewAnimationOptionLayoutSubviews
animations:^{
CGAffineTransform settingsTransform = CGAffineTransformMakeTranslation(self.animatedView.frame.size.width, 0);
self.animatedView.transform = settingsTransform;
}
completion:nil];
self.buttonToTest = [UIButton buttonWithType:UIButtonTypeRoundedRect];
self.buttonToTest.frame = CGRectMake(90, 20, 80, 40);
[self.buttonToTest setTitle:#"Click Me!" forState:UIControlStateNormal];
[self.buttonToTest addTarget:self action:#selector(buttonClicked) forControlEvents:UIControlEventTouchUpInside];
// set-up view hierarchy
[self.view addSubview:self.buttonToTest];
[self.view addSubview: self.animatedView];
}
- (void) buttonClicked
{
[UIView animateWithDuration:.2
delay:0.0
options:UIViewAnimationOptionCurveEaseOut|UIViewAnimationOptionBeginFromCurrentState|UIViewAnimationOptionLayoutSubviews
animations:^{
self.animatedView.transform = CGAffineTransformIdentity;
}
completion:nil];
}
I had this problem and solved it by:
Hide the original view
Add a temp view that copies the view you want to animate
Carry out animation which will now be as intended
Remove the temp view and unhide the original view with the final state
Hope this helps.
I tried the answers above, about the layoutIfNeeded, but it didn't work.
I added the layoutIfNeeded outside (before) the animation block and it solved my problem.
view.layoutIfNeeded()
UIView.animate(withDuration: duration, delay: 0, options: .beginFromCurrentState, animations: {
// Animation here
})