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...
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 UIImageView that should animate from size (0,0) --> (93,75)
I have the following
[UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionTransitionNone
animations:^{
imgButton.layer.anchorPoint = CGPointMake(imgButton.bounds.size.width/2, imgButton.bounds.size.height/2);
CGRect btnFrame = imgButton.frame;
btnFrame.size.width = 105;
btnFrame.size.height = 85;
imgButton.frame = btnFrame;
}
completion:^(BOOL finished) {
[self animageButton2:imgButton];
}];
This is working but the only problem I have is that it is not animating from the center of the UIImageView but from the top left corner.
Anybody got a clue?
I've solved it with the help of Borrden. This is what my solution was.
First create an imageview
UIImageView *imgLineup = [[UIImageView alloc]initWithFrame:CGRectMake(10, y, 93, 75)];
imgLineup.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.0, 0.0);
And then to the following.
[UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionCurveEaseInOut
animations:^{
imgButton.layer.anchorPoint = CGPointMake(0.5, 0.5);
imgButton.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1.0, 1.0);
}
completion:^(BOOL finished) {
NSLog(#"done");
}];
just try with this. import #import <QuartzCore/QuartzCore.h> then put below code while adding the uimageView into subView of self.view
CABasicAnimation *zoomAnimation = [CABasicAnimation animationWithKeyPath:#"transform.scale"];
[zoomAnimation setDuration:0.8];
[zoomAnimation setRepeatCount:1];
[zoomAnimation setFromValue:[NSNumber numberWithFloat:0.1]];
[zoomAnimation setToValue:[NSNumber numberWithFloat:1.0]];
[zoomAnimation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
[[imageView layer] addAnimation:zoomAnimation forKey:#"zoom"];
What i suggest may be kind of hack but it will be an easier way to achieve what you want:
You set the initial frame of imageView as:
CGRectMake(center, center, 0, 0);
So in your case it will be something closer to :
CGRectMake(46, 37, 0, 0);
Then animate it with new rect of something like this:
CGRectMake(0, 0,93,75);
You can use simple UIViewAnimation for this;
[UIView beginAnimations:#"zoom" context:NULL];
[UIView setAnimationDuration:0.3];
imageView.frame = CGRectMake(0, 0, 93, 75); ;
[UIView commitAnimations];
Hope It works
What you are trying to achieve is a scale transform i.e. animating UIView size from size(0,0) to size(w,h). Same effect can be achieved by CGAffineTransformMakeScale.
Initially when you create the view apply CGAffineTransformMakeScale(0.0,0.0) then animate size scale up to CGAffineTransformMakeScale(1.0,1.0).
Code:
// Create the view and apply correct frame
UIView *tagView = [[UIView alloc] initWithFrame:CGRectMake(50, 100, 100, 100)];
tagView.tag = kTag;
//Apply scale transform, to make size(0,0)
tagView.transform = CGAffineTransformMakeScale(0,0);
[self.view addSubview:tagView];
/// ............
UIView *tagView = [self.view viewWithTag:kTag];
//Now animate the view size scale up
[UIView animateWithDuration:0.5
delay:0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
tagView.transform = CGAffineTransformMakeScale(1.0,1.0);
}
completion:NULL
];
This animation will happen about the center point of the view as you want, thus avoiding the need to play with anchorPoint and frame, which can be tricky. Read more about the relation between frame and anchorPoint from this answer.
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];
}
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];
I want it to be animated so I'm using [UIView beginAnimations]
I've tried animating using button.imageView.frame (with image set as imageView) but it only animates the position, the image doesn't get scaled down at all.
using hateButton.frame (when image is set as backgroundImage), the backgroundImage gets scaled down but it's not animated.
How do I animate-scale a UIButton image?
You can call layoutIfNeeded between [UIView beginAnimations] and [UIView commintAnimations] or with [UIView animateWithDuration].
[UIView animateWithDuration:0.3f animations:^{
self.myButton.frame = aFrame;
[self.myButton layoutIfNeeded];
}];
I could achieve this using Quartz 2D:
// move anchor point without moving frame
CGRect oldFrame = hateButton.frame;
hateButton.layer.anchorPoint = CGPointMake(0, 1); // bottom left
hateButton.frame = oldFrame;
[UIView beginAnimations:nil context:NULL];
CGAffineTransform newTransform;
newTransform = CGAffineTransformMakeScale(0.8, 0.8);
hateButton.transform = CGAffineTransformTranslate(newTransform, 0, -160);
[UIView commitAnimations];
Make sure you import Quartz2D too:
#import <QuartzCore/QuartzCore.h>