I have an image "image1" which is a UIButton and what I want is that if I touch this button, the width of the image is multiplied by two (with animation)not the height just the width.
sorry for my english I'm french :/
This is fairly easy with block animation. Simply try:
imageView.contentMode = UIViewContentModeScaleAspectFit;
[UIView animateWithDuration:1.0
animations:^{
CGRect newRect = imageView.frame;
int movementToTheLeft = imageView.frame.size.width / 2;
newRect.size.width *= 2;
newRect.origin.x -= movementToTheLeft;
imageView.frame = newRect;
}
completion:^(BOOL finished){
[UIView animateWithDuration:1.0
animations:^{
NSLog(#"Scaled!");// Anything can go in this completion block, it should be used for any logic you need after the animation.
}
completion:^(BOOL finished){
;
}];
This should scale your imageView's width by 2. Hope that helps!
The old fashioned way (not recommended after iOS 4.0, but still works):
[UIView beginAnimations:#"widen" context:nil];
[UIView setAnimationDuration:1.0];
CGRect newRect = imageView.frame;
newRect.width *= 2;
imageView.frame = newRect;
// ... set more parameters if desired
[UIView commitAnimations];
Related
I'm working on UIButton animation where:
The UIButton is set in the bottom center of the screen and scaled to a small size
_menuBtn.transform = CGAffineTransformMakeScale(0.1f, 0.1f);
When the app starts it should be moving to the bottom left side of the screen as it scales or grow to its original size.
- (void)viewDidLoad
{
[super viewDidLoad];
_menuBtn.frame = CGRectMake(160, 513, 30, 30);
_menuBtn.superview.frame = CGRectMake(160, 513, 30, 30);
_menuBtn.transform = CGAffineTransformMakeScale(0.1f, 0.1f);
NSLog(#"_menuBtn: %# ; _menuBtn.superview: %#", _menuBtn, _menuBtn.superview);
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDelegate:self];
[UIView setAnimationDuration:5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
CGAffineTransform scaleTrans = CGAffineTransformMakeScale(1.0f, 1.0f);
CGAffineTransform lefttorightTrans = CGAffineTransformMakeTranslation(-200.0f,0.0f);
_menuBtn.transform = CGAffineTransformConcat(scaleTrans, lefttorightTrans);
[UIView commitAnimations];
}
problem
When the animation starts the button starts moving from the bottom right side of the screen and not in the bottom center where it is and should be. Any help ?
Log Result
NSLog(#"%#", _myBtn);
2013-08-14 09:22:38.913 GJCoolNavi[339:c07] <UIButton: 0x813ea30; frame = (0 0; 0 0); opaque = NO; autoresize = TM+BM; layer = <CALayer: 0x813eaf0>>
thats before doing the animation...and the result after the animation is:
2013-08-14 09:30:25.719 GJCoolNavi[612:c07] <UIButton: 0x71206d0; frame = (160 294; 0 0); opaque = NO; autoresize = TM+BM; animations = { transform=<CABasicAnimation: 0x7536a80>; position=<CABasicAnimation: 0x7537dd0>; }; layer = <CALayer: 0x7120790>>
Why don't you do this...
_menuBtn.transform = CGAffineTransformMakeScale(0.1, 0.1);
[UIView animateWithDuration:5.0
options:UIViewAnimationOptionCurveEaseOut
animations:^(){
_menuBtn.transform = CGAffineTransformMakeScale(1.0, 1.0);
_menuBtn.center = self.view.center;
}
completion:nil];
I'd avoid moving stuff using a transform. Change the frame instead.
EDIT
- (void)viewDidLoad
{
[super viewDidLoad];
}
- (void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated];
// for convenience I'm pulling these values out in to variables.
float buttonWidth = _menuBtn.frame.size.width;
float buttonHeight = _menuBtn.frame.size.height;
float viewWidth = self.view.frame.size.width;
float viewHeight = self.view.frame.size.height;
// set the button frame to be the bottom center
// note you shouldn't have to do this as Interface Builder should already place it there.
// place the button in the horizontal center and 20 points from the bottom of the view.
_menuBtn.frame = CGRectMake((viewWidth - buttonWidth) * 0.5, viewHeight - buttonHeight - 20, buttonWidth, buttonHeight);
// scale the button down before the animation...
_menuBtn.transform = CGAffineTransformMakeScale(0.1, 0.1);
// now animate the view...
[UIView animateWithDuration:5.0
delay:0.0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
_menuBtn.transform = CGAffineTransformIdentity;
_menuBtn.frame = CGRectMake(viewWidth - buttonWidth - 20, viewHeight - buttonHeight - 20, buttonWidth, buttonHeight);
}
completion:nil];
}
Try this and let me know what happens.
This has solved a similar problem.
Apply a (UIButton).imageView Animation.
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDelegate:self];
[UIView setAnimationDuration:5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
CGAffineTransform scaleTrans = CGAffineTransformMakeScale(1.0f, 1.0f);
CGAffineTransform lefttorightTrans = CGAffineTransformMakeTranslation(-200.0f,0.0f);
_menuBtn.imageView.transform = CGAffineTransformConcat(scaleTrans, lefttorightTrans);
[UIView commitAnimations];
This phenomenon indicates that your button's original frame is wrong, probably because of its auto-resizing. Try setting its frame to the bottom center before you start the animation.
- (void)viewWillAppear:(BOOL)animated
{
[super viewWillAppear:animated];
_menuBtn.superview.frame = CGRectMake(0, 513, 320, 30); // This is a quick and dirty solution to make sure your button's superview is in the right place. You probably don't want to do this and are more likely to review your view hierarchy.
_menuBtn.frame = CGRectMake(145, 0, 30, 30); // Set the frame to the bottom center, please ensure that _menuBtn's transform hasn't been changed before this step
_menuBtn.transform = CGAffineTransformMakeScale(0.1f, 0.1f);
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDelegate:self];
[UIView setAnimationDuration:5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
CGAffineTransform scaleTrans = CGAffineTransformMakeScale(1.0f, 1.0f);
CGAffineTransform lefttorightTrans = CGAffineTransformMakeTranslation(-200.0f,0.0f);
_menuBtn.transform = CGAffineTransformConcat(scaleTrans, lefttorightTrans);
[UIView commitAnimations];
}
I have used your code and its moving from bottom center to to bottom left perfectly. Might be your superview isn't in proper rect. Please check.
I have a CGRectMake that used to jump an image to a different position
image.frane=CGRectMake( x,y,w,h);
Then I wanted to translate and scale a Label (on the same ViewController) to another position
CGPoint newCenter = CGPointMake(x,y);
[UIView animateWithDuration: 1.0
delay: 0
options: 0
animations:^{label.center = newCenter ; label.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.2, 0.2);}
completion:^(BOOL finished) {
label.transform = CGAffineTransformMakeScale(1.0, 1.0);
label.alpha = 0;
}
];
The problem I'm having is when I use the animateWithDuration the image doesn't move but the Label does. If I comment out the animation the image moves again. Am I doing something wrong?
try this bellow code...
[UIView animateWithDuration:1.0f animations:^{
imageView.frame = CGRectMake(newCenter.x, newCenter.y, imageView.frame.size.width, imageView.frame.size.height);
}];
Also you can move UIImageView or anything else with this bellow code... i use this code for scroll the UIScrollView when keyboard appear.. i add the code with your requirement..
UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1.0f];
imageView.frame = CGRectMake(newCenter.x, newCenter.y, imageView.frame.size.width, imageView.frame.size.height);
[UIView commitAnimations];
i hope this helpful to you...
I'd like to have an image in my iphone app "pop-in" on screen rather than just appearing. By "pop-in" I mean that it would grow from a small dot to its actual size. For reference, this is exactly the same as the "pop" animation effect in Keynote.
I'm completely new to iOS animations, so if someone could point me in the direction on the animation effects I would need to use, it would be greatly appreciated.
Thanks
Brian
UPDATE
I've added this code from the suggestions below. This works but it scales my image down, rather than up. I know that is because I have 0.01 as the transform scale size, but I would like to know how I can start out with an image of size 0.0 and scale up to 1. Is it just a matter to setting the size of my image to 0?
Thanks
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration: 0.2];
image.transform = CGAffineTransformMakeScale(0.01, 0.01);
[UIView setAnimationDelegate:self];
[UIView commitAnimations];
The effect you’re looking for is something like this:
// instantaneously make the image view small (scaled to 1% of its actual size)
view.transform = CGAffineTransformMakeScale(0.01, 0.01);
[UIView animateWithDuration:0.2 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
// animate it to the identity transform (100% scale)
view.transform = CGAffineTransformIdentity;
} completion:^(BOOL finished){
// if you want to do something once the animation finishes, put it here
}];
if you want something like Facebook does on liking any post then use this
-(void)animateButton:(UIButton *)sender{
UIButton * btn = (UIButton *)sender;
[UIView animateWithDuration:0.3/1.5 animations:^{
btn.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1.4, 1.4); // scales up the view of button
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.3/2 animations:^{
btn.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.7, 0.7);// scales down the view of button
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.3/2 animations:^{
btn.transform = CGAffineTransformIdentity; // at the end sets the original identity of the button
}];
}];
}];}
just call this method when you want to animate the view
if you have text and image on the button and you just want to animate the image of the button then just replace "btn" with "btn.imageView" , this will just produce animation on the image view property of the button.
Hope it helps
All the best.
You have to animate the frame of the view, to shrink it from zero to the final state.
This can be done for example with UIView block animation.
So for example start with your view as an IBOutlet property self.myView with the final size and position, but set the hidden flag.
Then when you want it to appear use the following:
// Save old frame as final stater and set it to zero size for the start of the animation
// But keep the same center position, so it just grows and don't move around
CGRect oldFrame = self.myView.frame;
CGRect oldCenter = self.myView.center;
self.myView.frame = CGRectZero;
self.myView.center = oldCenter;
self.myView.hidden = NO;
NSTimeInterval duration = 0.3;
[UIView animateWithDuration:duration delay:0.0 options:UIViewAnimationOptionAllowUserInteraction animations:^{
// New position and size after the animation should be the same as in Interface Builder
self.myView.frame = oldFrame
}
completion:^(BOOL finished){
// You can do some stuff here after the animation finished
}];
Swift 2.0 version
view.transform = CGAffineTransformMakeScale(0.01, 0.01);
UIView.animateWithDuration(0.2, delay: 0, options: .CurveEaseOut, animations: { () -> Void in
// animate it to the identity transform (100% scale)
self.view.transform = CGAffineTransformIdentity;
}) { (finished) -> Void in
// if you want to do something once the animation finishes, put it here
}
For that you will have to use a simple UIView
Add the UIview to your current view.
- (void) initPopUpView
{
popup.alpha = 0;
popup.frame = CGRectMake (160, 240, 0, 0);
[self.view addSubview:popup];
}
- (void) animatePopUpShow
{
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.3];
[UIView setAnimationDelegate:self];
[UIView setAnimationWillStartSelector:#selector(initPopUpView)];
popup.alpha = 1;
popup.frame = CGRectMake (20, 40, 300, 400);
[UIView commitAnimations];
}
The main UIView contains two subviews - UIView_1 and UIView_2.
In the UIView_2, there is a button to show or hide the UIView_1.
For example, when a user touches the button to show the UIView_1, then UIView_1 will slide down and UIView_2 will push downwards with transition.
I have very little knowledge in animation. Can someone show me some sample code for reference?
Should I use CGAffineTransformMakeTranslation?
Thanks.
You don't need anything so complex. Just change the view's frame size.
NSTimeInterval animationDuration = /* determine length of animation */;
CGRect newFrameSize = /* determine what the frame size should be */;
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:animationDuration];
theViewToChange.frame = newFrameSize;
[UIView commitAnimations];
Simply Hide/show with fadein/out effect
`
/To Show/
sliderView.hidden = NO;
sliderView.alpha = 0.1;
[UIView animateWithDuration:0.25 animations:^{
sliderView.alpha = 1.0f;
} completion:^(BOOL finished) {
// do some
}];
/To hide/
[UIView animateWithDuration:0.25 animations:^{
sliderView.frame = CGRectMake(130, 30, 0, 0);
[sliderView setAlpha:0.1f];
} completion:^(BOOL finished) {
sliderView.hidden = YES;
}];
`
It depends on what you want to do with UIView_2.
Place UIView_1 below UIView_2 in Interface Builder.
Size UIView_2 to take up all the space below the UINavigationBar.
Use the following code to either resize (using uiview2_resized_rect) the frame for UIView_2, or translate/move the frame for UIView_2 (using uiview2_translated_rect ):
CGRect uiview1_original_rect = UIView_1.frame;
CGRect uiview2_original_rect = UIView_2.frame;
CGRect uiview2_translated_rect = CGRectMake(uiview2_original_rect.origin.x,
uiview2_original_rect.origin.y+uiview1_original_rect.size.height,
uiview2_original_rect.size.width,
uiview2_original_rect.size.height);
CGRect uiview2_resized_rect = CGRectMake(uiview2_original_rect.origin.x,
uiview2_original_rect.origin.y+uiview1_original_rect.size.height,
uiview2_original_rect.size.width,
uiview2_original_rect.size.height-uiview1_original_rect.size.height);
[UIView animateWithDuration:0.300 delay:0.0
options:UIViewAnimationOptionCurveEaseInOut|UIViewAnimationOptionBeginFromCurrentState
animations:^{
//uncomment this and comment out the other if you want to move UIView_2 down to show UIView_1
//UIView_2.frame = uiview2_translated_rect;
UIView_2.frame = uiview2_resized_rect;
} completion:^(BOOL finished) {
}];
I'm trying to do a simple animation of moving the frame of two views. Basically hiding the Ad until it is loaded, and then move the frame up from the bottom, along with the view that starts at the bottom, and then will move up also when the Ad pushes it up. The start and end positions are correct, but I don't see it being animated. Is this correct? Thanks.
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:#"frame"];
animation.duration = 1.0;
CGRect adFrame = CGRectMake(self.adBanner.frame.origin.x, self.adBanner.frame.origin.y - self.adBanner.frame.size.height, self.adBanner.frame.size.width, self.adBanner.frame.size.height);
self.adBanner.frame = adFrame;
[self.adBanner.layer addAnimation:animation forKey:#"frame"];
CGRect buttonViewFrame = CGRectMake(self.ButtonView.frame.origin.x, self.adBanner.frame.origin.y - self.adBanner.frame.size.height, self.ButtonView.frame.size.width, self.ButtonView.frame.size.height);
self.ButtonView.frame = buttonViewFrame;
[self.ButtonView.layer addAnimation:animation forKey:#"frame"];
For something as simple as this, you don’t really need to use Core Animation directly—UIView’s built-in animation system should suffice.
[UIView animateWithDuration:1.0 animations:^{
self.adBanner.frame = adFrame;
self.ButtonView.frame = buttonViewFrame;
}];
or, if you’re targeting pre-4.0 iOS,
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1.0];
self.adBanner.frame = adFrame;
self.ButtonView.frame = buttonViewFrame;
[UIView commitAnimations];
[UIView beginAnimations : #"Display notif" context:nil];
[UIView setAnimationDuration:1];
[UIView setAnimationBeginsFromCurrentState:FALSE];
CGRect frame = mainView.frame;
frame.size.height -= 40;
frame.origin.y += 40;
mainView.frame = frame;
[UIView commitAnimations];