I need to add a UIDatePicker subview on a button click to my main view.
How can I add the view with animation such that the subview flips in from the top of the main view and on removing ,undergoes the reverse animation ? I know the subview can be added in a frame that is outside the visible area of the view and then moving it to visible area using CABasicAnimation will be abetter choice. So need help regarding the animation block that I should use.
Thanks in advance
Try this bellow code... here if yourView default frame with origin y = -500 then try bellow code on any UIButton click event.. also set frame which you want
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.75];
[UIView setAnimationDelegate:self];
CGRect frame = yourView.frame;
frame.origin.y = frame.origin.y + 500; // give any value for display yourView
yourView.frame = frame;
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:yourView cache:YES];
[UIView commitAnimations];
Use CATransaction for animation.
I have an application where I'm moving my entire UIView up when using the keyboard, in order to not hide some important UITextFields.
My problem is that the UITableView that I have there does not behave the same way as all the other views. Instead of moving the entire UITableView, it moves only its top edge, and that resizes the UITableView which is not the desired effect.
My problem is better described here: http://www.youtube.com/watch?v=AVJVMiBULEQ
This is the code that I'm using for the animation:
-(void)setViewMovedUp:(BOOL)movedUp
{
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.5]; // if you want to slide up the view
[UIView setAnimationBeginsFromCurrentState:YES];
CGRect rect = self.view.frame;
if (movedUp) {
// 1. move the view's origin up so that the text field that will be hidden come above the keyboard
// 2. increase the size of the view so that the area behind the keyboard is covered up.
rect.origin.y -= 140;
rect.size.height += 140;
} else {
// revert back to the normal state.
rect.origin.y += 140;
rect.size.height -= 140;
}
self.view.frame = rect;
[UIView commitAnimations];
}
As solved in comments above, code above works when view is not autoresizing. The simpler approach would be to use CGAffineTransform transformations that calculate view frame instead of you.
-(void)setViewMovedUp:(BOOL)movedUp {
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.5]; // if you want to slide up the view
[UIView setAnimationBeginsFromCurrentState:YES];
if (movedUp) {
self.transform = CGAffineTransformMakeTranslation(0, -150);//move up for 150 px
} else {
self.transform = CGAffineTransformIdentity;//reset to initial frame
}
[UIView commitAnimations];
}
I am trying to animate a label across the screen however I cannot seem to get it work properly. Currently it animates off the view into the other views.
Also I cannot "stop" the animation when needed. I am using it in a music player to scroll the track name across the UIView and when I tap Next or Prev it must stop mid-animation and start again.
- (void)startAnimation {
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:10];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:#selector(animationDidStop:)];
CGRect frame = trackName.frame;
frame.origin.x = -50;
trackName.frame = frame;
[UIView commitAnimations];
}
- (void)animationDidStop:(id)sender {
NSLog(#"animationDidStop");
CGRect frame = trackName.frame;
frame.origin.x = 194;
trackName.frame = frame;
[self startAnimation];
}
I assume what you are trying to do is animate the label so that it moves 50 pixels to the left. If so, you need to change the line:
frame.origin.x = -50
to
frame.origin.x -= 50;
The problem is that you are setting the new origin of the frame to -50, which is 50 pixels off the left side of the view. Instead you need to just subtract 50 pixels from it's current position so that it moves 50 pixels relative to where it was.
I am trying to create an animation effect where an image who's alpha value is 0.5 (approximately) at start changes to 1 gradually, but not like the conventional effect. Here is what I am looking for.
original Image.
after some time
after some more time
and at the end
So basically if the alpha value of part of the image can be reduced than I can show the animation of filling up a glass or something close to it.
I don't know if this can be done at all or if it's possible with core graphics or core animation.
P.S. They are made in photoshop.
Does anyone have any thoughts about what should be done to achieve this kind of animation?
I'd suggest the following:
Create the UIImageView that shows the image in the view.
Create a new UIView with a background color and transparency:
UIView *transpView = [UIView new];
tranpsView.alpha = 0.4;
transpView.frame = self.view.frame;
[self.view addSubview:transpView];
Animate the transparent view to slide upwards:
[UIView animateWithDuration:1.0 animations:^{
transpView.frame = CGRectOffset(transpView.frame, 0, -tranpsView.frame.size.height);
}];
Don't forget to release the tranpsView after you are done. Possibly with the completed block.
To get the "glass filling up" type of animation, just change the frame of of the tranpsView accordingly. The tranpsView can be any UIView subclass (like a texture of liquid or something).
Hope that helps.!
You can add view above and change it's frame. The best way.
If you're using images, then sunclass UIView and implement
-(void) drawRect:(CGRect) rect {
//if you want to clip the image, the frame for the view must be smaller then rect
[image drawInRect: rect];
}
Here's yet another idea.
Set the background of your UIView *view to the image.png you want with alpha = 0.5. Let
w = view.bounds.size.width;
h = view.bounds.size.height;
Create another UIView *glassView also with alpha = 0.5, and add it as a subview:
[view addSubview:glassView];
glassView.frame = CGRectMake(0.0, h, w, 0.0);
Create a UIImageView *glassImageView and set its image to image.png as well, and add it as a subview of glassView:
[glassView addSubview:glassImageView];
glassImageView.frame = CGRectMake(0.0, -h, w, h);
Now set up the animation to increase the height and alpha of glassView while maintaining the size of imageGlassView, something like this:
[UIView beginAnimations:nil context:NULL]; {
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationDuration:1.0];
[UIView setAnimationDelegate:self];
glassView.alpha = 1.0;
glassView.frame = CGRectMake(0.0, 0.0, w, h);
glassImageView.frame = CGRectMake(0.0, 0.0, w, h);
} [UIView commitAnimations];
To be fair, I haven't tested this out, but something along these lines seems like it may work. Then again, maybe not. If you found a perfect solution, please post it back. I'd love to know how to do this!
See if this helps
http://www.iphonedevsdk.com/forum/iphone-sdk-development-advanced-discussion/32481-animating-uiimage-mask-fill.html
Well I know this question is quite old and I am the one who asked it, but today I was experimenting with something similar and found this simple solution to my own question which was asked 10 months ago.
I was working on a project which requires a image to look like its loading from completely white which is 0% progress to completely red image which is 100% progress.
I thought of adding 2 imageViews containing the images on top of each other and set the content mode of the top imageview containing image with red color to bottom so that when you reduce the size of imageview the image appears to be loading and it worked. With some animation blocks the image appears to be loading. Then I thought of this question that I had asked so long and then came up with the solution to my own problem.
So the solution to this question will be that if you add 2 imageViews on top of each other and then reduce the alpha value one that is behind and reduce the height to zero and then gradually increase the height and change the y coordinate of the image view that has alpha value 1 then It will appear to be loading as asked in this question.
I have used these two functions to get the illusion of loading image.
- (void)startAnimation
{
CGRect rect = loadedImageView.frame;
rect.origin.y = unloadedImageView.frame.origin.y;
rect.size.height = unloadedImageView.frame.size.height;
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDelegate:self];
[UIView setAnimationDuration:2.0f];
[UIView setAnimationDidStopSelector:#selector(stopAnimation)];
loadedImageView.frame = rect;
[UIView commitAnimations];
}
- (void)stopAnimation
{
CGRect rect = loadedImageView.frame;
rect.origin.y = unloadedImageView.frame.size.height + unloadedImageView.frame.origin.y;
rect.size.height = 0;
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDelegate:self];
[UIView setAnimationDuration:2.0f];
[UIView setAnimationDidStopSelector:#selector(startAnimation)];
loadedImageView.frame = rect;
[UIView commitAnimations];
}
I'm trying to make a scaling ring, which scales in the center of a UIView.
Setup is the following:
In IB, I have a view and my ImageView attached to it (just a transparent PNG with a ring).
Setup an IBOutlet to the ImageView (theRing) and a button to trigger the action.
ImageView is set to «scaleToFill» in IB.
The code for the action is:
-(IBAction)buttonPressed:(id)sender{
CGRect theFrame = theRing.frame;
theFrame.size.width = 16;
theFrame.size.height = 16;
[theRing setFrame:theFrame]; //Scale down the ring first
theRing.center = [self.view center]; // Center the ring in the center of the view
theFrame.size.width = 300;
theFrame.size.height = 300;
[theRing setAlpha:1.0];
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1.0];
[theRing setFrame: theFrame];
[theRing setAlpha:0.0];
theRing.center = [self.view center];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector: #selector(animEnd:finished:context:)];
[UIView commitAnimations];
}
Now - when I hit the button the first time, the image is scaled with the reference point being the upper left corner of the ImageView (means, it scales, but the ring expands to the lower right of the screen).
BUT: When I hit the button again, the whole thing works as expected (means, the ring stays in the middle of the screen and is scaled).
Any ideas?
try to use ImageView mode Aspect Fill