I'm doing an animation where I'm moving and scaling an image at the same time.
I want to move the image onto a toolbar button in the top navigation bar. It scales down to zero as it does this so it looks like the image is being saved to that location....similar to what happens when you download a song in iTunes on the iPhone.
My scaling and the translation are working fine, however the image disappears under the navigation bar. I want it to translate on top of the navigation bar and then disappear.
Does anyone know how I can tell my animation not to go under the navigation bar?
My code is below.
Thanks
Brian
CGAffineTransform translate = CGAffineTransformMakeTranslation(160, -160);
CGAffineTransform scale = CGAffineTransformMakeScale(0.1, 0.1);
CGAffineTransform transform = CGAffineTransformConcat(scale, translate);
//transform = CGAffineTransformRotate(transform, 20);
[UIView beginAnimations:#"MoveAndScaleAnimation" context:nil];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationDuration:1.0];
imageView.transform = transform;
[UIView commitAnimations];
Related
Hi Guys I am trying to rotate a UIImageview from the Black dot on this image.
what is happening now is that the center is not changing
I have tried like this.
Image.Center = CGPointmake(37.3,150);
when I am calling this set the image just moves across the screen.
thanks!
You need to add this code:-
imageView.layer.anchorPoint = CGPointMake(0.5,0.5);
[UIView beginAnimations:#"rotate" context:nil];
imageView.transform = CGAffineTransformMakeRotation(angle);
[UIView commitAnimations];
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 making an iPhone web page and in order to optimise it for the device have decided to hide the menu bar and replace it with one button at the top. When this button is click a menu bar drops down and allows the user to go to another page. I'm having a bit of trouble trying to get the bar to slide down and up. Any help is much appreciated.
You need to use to animate the view. For example if menu is the variable which holds an istance of your bar (320x50px) you can animate up and down from the top with this code:
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:.3];
if (menu.frame.origin.y == 0)
menu.frame = CGRectMake(0, -50, 320, 50);
else
menu.frame = CGRectMake(0, 0, 320, 50);
[UIView setAnimationDelegate:self];
[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
how can I implement the animation we see in the iPhone Music app's coverflow screen? when you click on a small view, it flips and scales up to another view? how can I do this? I can use core animation to flip and scale a view, but how can I do the transition to another view? thanks
You need an UIView as Container for the two UIViews (frontside/backside) and then remove/add these from/to the container as subviews while doing the animations in between:
UIView *flipContainer;
UIView *frontSide;
UIView *backSide;
//...
-(void)turnUp
{
[backSide removeFromSuperview];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:1.0];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:flipContainer cache:YES];
[UIView setAnimationDuration:1.0];
CGAffineTransform transform = CGAffineTransformMakeScale(1.2, 1.2);
flipContainer.transform = transform;
[UIView commitAnimations];
[flipContainer addSubview:frontSide];
}
-(void)turnDown
{
[frontSide removeFromSuperview];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:1.0];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:flipContainer cache:YES];
[UIView setAnimationDuration:1.0];
CGAffineTransform transform = CGAffineTransformMakeScale(1, 1);
flipContainer.transform = transform;
[UIView commitAnimations];
[flipContainer addSubview:backSide];
}
I'm trying the exact code you are doing - I get a zoom effect but no turn over. The only difference is that right before the turnUp code I add the flipContainer (with back showing) so then it can be flipped over.
// construct animation container
self.flipContainer = [[FlipContainer alloc] init];
[self.flipContainer.view setFrame:CGRectMake(clickedSquareX, clickedSquareY, 200, 200)];
[self.flipContainer.view addSubview:self.backside.view];
// add animation container
[self.myParentView.view addSubview:self.flipContainer.view];
// PROCEED to your turnUp code
The reason I'm doing this is I have a bunch of images in a horizontal UIScrollView and so to 'simulate' a 200x200 image flipping over and zooming to show detail I add my flipContainer with the backside showing the exact image over the exact spot of the pressed image. It should work shouldn't it? A bit confusing to me is the first line of your turnUp code you do:
[backSide removeFromSuperview];
..which would remove the view I just added.
I'm not sure if this is the right spot to put this question in - sorry if it isn't!