I want to add animation to a view while changing its hidden mode i.e
my_view.hidden=YES;
I have added a button in navigationbar. When we click on it the new view is set to be unhide. It draws at the upper of the navigation table.
Animate the view's opacity from 100% to 0%. Have the animation completion callback set the view to be hidden. You might also want to reset the opacity back to 100% during the callback, so the view will display fully opaque when you unhide it.
yourView.alpha = 0.0 //for zero opacity
yourView.alpha = 1.0 //for 100% opacity
There is no animation for hiding however; you get the same result with the Swift code below:
UIView.animate(withDuration: 0.2, delay: 0, options: [], animations: {
self.yourView.alpha = 0 // Here you can change the alpha property of the view
}, completion: { _ in
self.yourView.isHidden = true // Here you hide it when animation done
})
Unfortunately, hidden is not a property that is animatable through UIView animations. I think your best bet may be to use one of the animations #Erik B suggested, or start dabbling with Core Animations which are much more powerful. Take a glance at the documentation for UIView animations and Core Animations.
I achieved something like what your suggesting by using UIView animations to slide the new view from below another view. This made it appear like a drawer sliding out. If you want to do something like that, you need to intercept the touch up inside event and place the animation code there.
- (IBAction)buttonClicked:(id)sender {
[UIView animateWithDuration:0.5
delay:0.0
options:UIViewAnimationCurveEaseOut
animations:^(void) {
self.myView.frame = /* set the frame here */
}
completion:NULL];
}
I think more appropriate way to do it is:
[UIView transitionWithView:aView
duration:0.3
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^(void){
aView.hidden = NO;
}
completion:nil];
Updated to Swift 3:
UIView.animate(withDuration: 0.2, delay: 0.2, options: .curveEaseOut,
animations: {firstView.alpha = 0},
completion: { _ in firstView.isHidden = true
//Do anything else that depends on this animation ending
})
And if you wish to animate something back after first view is gone, you can replicate the code inside the completion block with alpha = 1 and hidden = false.
Here's a category I wrote to introduce a new "hidden" property on UIView which correctly supports animation:
#implementation UIView (AnimateHidden)
-(void)setHiddenAnimated:(BOOL)hide
{
[UIView animateWithDuration:0.5
delay:0.0
options: UIViewAnimationCurveEaseOut
animations:^
{
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
if (hide)
self.alpha=0;
else
{
self.hidden= NO;
self.alpha=1;
}
}
completion:^(BOOL b)
{
if (hide)
self.hidden= YES;
}
];
}
#end
This is corrected N.J. version:
#implementation UIView (AnimateHidden)
-(void)setHiddenAnimated:(BOOL)hide duration:(NSTimeInterval)duration {
if(self.hidden == hide)
return;
if(hide)
self.alpha = 1;
else {
self.alpha = 0;
self.hidden = NO;
}
[UIView animateWithDuration:duration animations:^{
if (hide)
self.alpha = 0;
else
self.alpha = 1;
} completion:^(BOOL finished) {
if(finished)
self.hidden = hide;
}];
}
#end
Here is swift version for this :
Swift 2
UIView.animateWithDuration(0.5, delay: 0.2, options: UIViewAnimationOptions.CurveEaseOut, animations: {
objView.alpha = 0
}, completion: { finished in
objView.hidden = true
})
Swift 3, 4, 5
UIView.animate(withDuration: 0.5, delay: 0.2, options: UIView.AnimationOptions.curveEaseOut, animations: {
objView.alpha = 0
}, completion: { finished in
objView.isHidden = true
})
This performs animation with duration of 5 seconds and after delay of 2 seconds.
Available AnimationOptions are :
CurveEaseInOut, CurveEaseIn, CurveEaseOut, CurveLinear
Since a few of these answers are a bit cluttered I figured I could post my minimalistic design of this API. I also added the delay and duration - because why not.
In the implementation we have.
#import "UIView+AnimateHidden.h"
#implementation UIView (AnimateHidden)
- (void)setHiddenAnimated:(BOOL)hide
delay:(NSTimeInterval)delay
duration:(NSTimeInterval)duration {
[UIView animateWithDuration:duration
delay:delay
options:UIViewAnimationOptionAllowAnimatedContent
animations:^{
if (hide) {
self.alpha = 0;
} else {
self.alpha = 0;
self.hidden = NO; // We need this to see the animation 0 -> 1
self.alpha = 1;
}
} completion:^(BOOL finished) {
self.hidden = hide;
}];
}
#end
In the header file we have.
#import <UIKit/UIKit.h>
#interface UIView (AnimateHidden)
- (void)setHiddenAnimated:(BOOL)hide
delay:(NSTimeInterval)delay
duration:(NSTimeInterval)duration;
#end
NJ's and Stanislav's answers here helped me make a new category for this, which I think improves on their answers, so thought I'd post what I came up with in case it helps anyone else.
Note it will only work in iOS4 or later as it's using blocks.
UIView+AnimateHidden.m
#import "UIView+AnimateHidden.h"
#implementation UIView (AnimateHidden)
- (void)setHidden:(BOOL)hidden animated:(BOOL)animated
{
// If the hidden value is already set, do nothing
if (hidden == self.hidden) {
return;
}
// If no animation requested, do the normal setHidden method
else if (animated == NO) {
[self setHidden:hidden];
return;
}
else {
// Store the view's current alpha value
CGFloat origAlpha = self.alpha;
// If we're unhiding the view, make it invisible initially
if (hidden == NO) {
self.alpha = 0;
}
// Unhide the view so we can see the animation
self.hidden = NO;
// Do the animation
[UIView animateWithDuration:0.5
delay:0.0
options: UIViewAnimationOptionCurveEaseOut
animations:^{
// Start animation block
if (hidden == YES) {
self.alpha = 0;
}
else {
self.alpha = origAlpha;
}
// End animation block
}
completion:^(BOOL b){
// Start completion block
// Finish up by hiding the view if necessary...
self.hidden = hidden;
// ... and putting back the correct alpha value
self.alpha = origAlpha;
// End completion block
}];
}
}
#end
Another version if you wish to use more complex animation types or animations not supported by the UIView
- (void)setHidden:(BOOL)hidden withAnimationDuration:(NSTimeInterval)duration
{
CATransition* transition = ({
CATransition* its = [CATransition animation];
its.duration = duration;
its.timingFunction =
[CAMediaTimingFunction
functionWithName: kCAMediaTimingFunctionEaseInEaseOut];
its.type = kCATransitionPush;
its.subtype = (hidden ? #"fromBottom" : #"fromTop");
its
});
UIView* containerView = self.superview;
[containerView.layer removeAllAnimations];
[containerView.layer addAnimation: transition forKey: kCATransition];
self.hidden = hidden;
if (!hidden) {
[self.superview bringSubviewToFront: self];
}
}
Here is the code I used to model a view "growing" and "shrinking" on a "show more..." and "show less ..." button click. Modeled off the answer from Palyancodr
This approach allows me to create both views in the storyboard so that the constraints work as expected on the different iOS devices and I don't need to custom code all the constraints.
#IBAction func showMoreOrLessAction(_ sender: Any) {
// if small view showing
if showMoreLargeView.isHidden {
showMoreSmallView.isHidden = true
//showMoreLargeView.isHidden = false
UIView.animate(withDuration: 0.2, delay: 0, options: [], animations: {
self.showMoreLargeView.alpha = 1 // Here you will get the animation you want
}, completion: { _ in
self.showMoreLargeView.isHidden = false // Here you hide it when animation done
})
}
else { // large view showing
//showMoreSmallView.isHidden = false
UIView.animate(withDuration: 0.2, delay: 0, options: [], animations: {
self.showMoreSmallView.alpha = 1 // Here you will get the animation you want
}, completion: { _ in
self.showMoreSmallView.isHidden = false // Here you hide it when animation done
})
showMoreLargeView.isHidden = true
}
}
Related
is it possible to rotate UILabel around Its axis horizontally ? Something like flip clock ?
Yes. Try this:
label.transform = CGAffineTransform(rotationAngle: -CGFloat.pi / 2)
You might add a UILabel subclass, amd implement the flipping animation, like such:
#implementation FlippingLabel
- (void)flipToAlphabet:(NSString *)alphabet {
[UIView transitionWithView:self
duration:0.3
options:UIViewAnimationOptionTransitionFlipFromTop
animations: ^{
self.text = [self.text nextCharacterInSequence];
}
completion: ^(BOOL finished) {
if (![self.text isEqualToString:alphabet]) {
if (![[self.text nextCharacterInSequence] isEqualToString:#"-"]) {
[self flipToAlphabet:alphabet];
}
}
}];
}
I did something similar in one of my previous projects.
https://github.com/mehul90/Flipper
I am trying to have my uiimageview move in a straight line horizontally out of bounds and loop again starting from the other side... this is the code I have in swift..
and was wondering if anyone knows how I can implement it in objective c?
let carSpeed = 20.0 / Double(view.frame.size.width)
let duration: NSTimeInterval = Double(view.frame.size.width - car.frame.origin.x) * carSpeed
UIView.animateWithDuration(duration, delay: 0.0, options: .CurveLinear, animations:
{
car.frame.origin.x = self.view.bounds.size.width
}, completion: {_ in
//reset cloud
car.frame.origin.x = -self.carImageView.frame.size.width
self.animateCars(car)
also if anyone knows any tutorials on objective C animations! thanks!
your can set the frame of image view first
UIImageView * imageView=[[UIImageView alloc]initWithFrame(x,y,width,height)];
Then set the frames in the following method
int moveValue=10 // add your desired value
[UIView animateWithDuration:0.25 animations:^{
imageView.frame=CGRectMake(x+moveValue,y,width,height);
} completion:nil];
This is your exact code converted to Objective-C:
double carSpeed = 20.0 / self.view.frame.size.width;
NSTimeInterval duration = (self.view.frame.size.width - car.frame.origin.x) * carSpeed;
[UIView animateWithDuration:duration
delay:0.0
options:UIViewAnimationOptionCurveLinear
animations:^{
car.frame = CGRectMake(self.view.bounds.size.width,
car.frame.origin.y,
car.frame.size.width,
car.frame.size.height);
}
completion:^(BOOL finished) {
if (finished) {
car.frame = CGRectMake(-self.carImageView.frame.size.width,
car.frame.origin.y,
car.frame.size.width,
car.frame.size.height);
[self animateCars:car];
}
}];
I have a problem rotating my UIView on iOS. When I start the animation to rotate, my view always jumps to a new position and starts rotating there.
my transformations:
originalState = myRotatingView.transform;
startAnimation = CGAffineTransformRotate(originalState, degreesToRadians(-50));
forwardAnimation = CGAffineTransformRotate(originalState, degreesToRadians(50));
backwardAnimation = CGAffineTransformInvert(forwardAnimation);
my methods:
- (void) stopAnimation {
[UIView animateWithDuration:0.5 delay:0.0 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
myRotatingView.transform = originalState;
} completion:nil];
rotatingViewState = STOPPED;
}
- (void) startAnimation {
CGAffineTransform transform;
if (rotatingViewState == STOPPED) {
rotatingViewState = FORWARD;
transform = startAnimation;
} else {
if (rotatingViewState == BACKWARDS) {
rotatingViewState = FORWARD;
transform = backwardAnimation;
} else {
rotatingViewState = BACKWARDS;
transform = forwardAnimation;
}
}
[UIView animateWithDuration:1.0 delay:0.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
myRotatingView.transform = transform;
} completion:^(BOOL finished){
if(finished) {
[self startAnimation];
}
}];
}
This is what it looks like: http://www.youtube.com/watch?v=UR_vYAjhprE
Try:
originalState = myRotatingView.transform;
startAnimation = CGAffineTransformRotate(originalState, degreesToRadians(-50));
forwardAnimation = CGAffineTransformRotate(startAnimation, degreesToRadians(50));
backwardAnimation = CGAffineTransformRotate(forwardAnimation, degreesToRadians(-50));
and pass UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionBeginFromCurrentState as options argument to the animateWithDuration:delay:options:animations:completion method.
I found the problem. I had to deactivate "Use Autolayout" in the File Inspector of my storyboard.
btw: This could be related to iOS 7 and XCode 5.
i am animating a frame, through this code, which is easily understandable in code, now i am trying to stop this sequence after 20 time means in completion parentheses i need to call that function for 20 times only: how can i do that?
-(void)conveyComplete:(UIView*)v
{
[self convey:v delay:0];
}
-(void)convey:(UIView*)v delay:(int)nDelay
{
[UIView animateWithDuration:.5
delay:nDelay
options:(UIViewAnimationOptionCurveLinear | UIViewAnimationOptionAllowUserInteraction)
animations: ^
{
CGRect rPos = v.frame;
NSLog(#"x:%f y:%f vFrame:%f vFrame:%f" , rPos.origin.x,rPos.origin.y,v.frame.origin.x,v.frame.origin.y);
rPos.origin.x -= 5;
rPos.origin.y -=100;
v.frame = rPos;
}
completion: ^(BOOL finished)
{
[self conveyComplete:v];
NSLog(#"I:%i, F:%i",i,f);
}];
}
As your function does only animation, one possible solution is not to call function 20 times, but instead set repeat count of animation with setAnimationRepeatCount: method.
It'll looks something similar to this:
[UIView UIView animateWithDuration:.5
delay:nDelay
options:(UIViewAnimationOptionRepeat | ...)
animations: ^{
// Do your animation stuff
[UIView setAnimationRepeatCount:20];
}
completion:NULL];
But one other aspect that is worth regarding is whether you need to repeat animation 20 times at all. All you do is just stepwise shifting of you view frame. Why not to animate this at once by setting appropriate offsets and animation duration?
i have made a global integer:
int i=1;
-(void)conveyComplete:(UIView*)v{
[self convey:v delay:0];
}
-(void)convey:(UIView*)v delay:(int)nDelay{
[UIView animateWithDuration:.5
delay:nDelay
options:(UIViewAnimationOptionCurveLinear | UIViewAnimationOptionAllowUserInteraction)
animations: ^
{
CGRect rPos = v.frame;
i+=1;// then increase +1 every time it runs
NSLog(#"x:%f y:%f vFrame:%f vFrame:%f" , rPos.origin.x,rPos.origin.y,v.frame.origin.x,v.frame.origin.y);
rPos.origin.x -= 5;
rPos.origin.y -=100;
v.frame = rPos;
}
completion: ^(BOOL finished)
{
if(i<20){
[self conveyComplete:v];
}
NSLog(#"I:%i, F:%i",i,f);
}];
}
Consider this basic view animation. It will scale a view down to nothing over the course of 1 second:
[UIView animateWithDuration: 1.0
delay: 0.0
options: UIViewAnimationCurveEaseIn
animations:^{
vw.transform = CGAffineTransformMakeScale(0.0, 0.0);
}
completion:^(BOOL finished) {
if (finished) {
vw.transform = CGAffineTransformIdentity;
}
}
];
What I'd like to do is use this same animation on many different views at different times throughout my app. To do this, I can easily put it in a method, pass in the view I want to zoom. No problem.
The challenge is that I may need to do different things at the completion of the animation depending on the situation. For example, I may want to remove the view from the SuperView in one case, and I may want to move the view to a new location (for zooming in later) in another case.
In a nutshell: How can I notify the caller of my method when the animation completes?
completion:^(BOOL finished) {
if (finished) {
vw.transform = CGAffineTransformIdentity;
// Do something unique here
}
}
You can just pass in the completion block itself as well:
- (void)animateView:(UIView *)v completion:(void ^(BOOL))ch
{
[UIView animateWithDuration: 1.0
delay: 0.0
options: UIViewAnimationCurveEaseIn
animations:^{
v.transform = CGAffineTransformMakeScale(0.0, 0.0);
}
completion:ch
];
}
Then call it like
[self animateView:someView completion:^(BOOL flag) {
// do stuff here
}];