I would like to know what is the name of the functionality that is used in the Ipad's Music folder, where when an album folder is clicked, details regarding that album pops up in an animated view.
I tried using presentModelViewController but its functionality is different.
It would be great if someone could help me out.
I just managed to get sth. like this to work using CoreAnimation / QuartzCore Framework...
be sure to
#import <QuartzCore/QuartzCore.h>
when you want to animate, use CATransform3Dand the poorly documented CATransform3D.m34 property. this will do the first half of the animation (assuming 200x200<->450x450 with 180° rotation):
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
[UIView setAnimationDelegate:self];
CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
rotationAndPerspectiveTransform.m34 = 1.0 / -1000; // this turns on perspective!
rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, 90.0f * M_PI / 180.0f, 0.0f, 1.0f, 0.0f);
someView.layer.transform = rotationAndPerspectiveTransform;
someView.bounds = CGRectMake(0, 0, 325, 325);
[UIView commitAnimations];
for the second half of the animation, you have to add/remove your view to the hierarchy. this example shows hiding/showing of a view that already exists as a subview of someView, it also makes use of a BOOL isUp instance variable (the first half of the aniation is independent of the isUp-flag!)
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
if (flag) {
if (isUp) {
someSubView.hidden = YES; // hide subview
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
CATransform3D rotationAndPerspectiveTransform = CATransform3DRotate(someView.layer.transform, -90.0f * M_PI / 180.0f, 0.0f, 1.0f, 0.0f);
someView.layer.transform = rotationAndPerspectiveTransform;
someView.bounds = CGRectMake(0, 0, 200, 200);
[UIView commitAnimations];
isUp = NO;
} else {
someSubView.hidden = NO; // Show subview
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
CATransform3D rotationAndPerspectiveTransform = CATransform3DRotate(someView.layer.transform, 90.0f * M_PI / 180.0f, 0.0f, 1.0f, 0.0f);
someView.layer.transform = rotationAndPerspectiveTransform;
someView.bounds = CGRectMake(0, 0, 450, 450);
[UIView commitAnimations];
isUp = YES;
}
}
}
one last thing: everything in your view will appear mirrored, it might not be the ideal solution, but mirroring back by applying a CGAffineTransform to the subview does the trick:
- (void)viewDidLoad
{
[super viewDidLoad];
someSubView.transform = CGAffineTransformMakeScale(-1, 1);
isUp = NO;
}
i'm alredy a month late with this solution but i hope it helped someone :)
i first tried using the animateWithDuration:animations:completion: block-based API but that turned out to lag heavily (no smooth first/second-half animaiton even without touching subviews).
On the iPad you have several different options with regards to animating a modal view controller, you can find them here: UIModalTransitionStyle.
However, if you are referring to the "zoom and flip" sort of effect on the album I'm pretty sure this is private behaviour so you would need to develop this yourself.... you might be able to accomplish this with Core Graphics/Quartz.
Related
I would like to animate a UIView so its right side becomes smaller and then back again. This animation will trigger when a UIButton in this UIView is tapped. Here is a quick mockup of what I would like - the UIView will go from state 1 > state 2 > state 1:
It looks like it is being pushed on one side.
Here is the code I have for another action - this makes the UIView smaller and larger again as if it is being pushed on the centre, rather than the side.
self.myView.transform = CGAffineTransformMakeScale(0.95,0.95);
self.myView.alpha = 1.f;
[UIView beginAnimations:#"button" context:nil];
[UIView setAnimationDuration:0.5];
self.myView.transform = CGAffineTransformMakeScale(1,1);
self.myView.alpha = 1.0f;
[UIView commitAnimations];
How do I apply this same effect but only to the right side? Any help would be much appreciated, thanks!
According to this question u need t make Perspective Transform for example, i modified a bit from that question i linked
CATransform3D perspectiveTransform = CATransform3DIdentity;
perspectiveTransform.m34 = 1.0 / -500;
perspectiveTransform = CATransform3DRotate(perspectiveTransform, 40.0f * M_PI / 180.0f, 0.0f, 1.0f, 0.0f);
[UIView animateWithDuration:0.4 animations:^{
self.myView.layer.transform = perspectiveTransform;
}];
EDIT 2 Brings back to original
- (void)startAnimation:(id)sender
{
CATransform3D perspectiveTransform = CATransform3DIdentity;
perspectiveTransform.m34 = 1.0 / -500;
perspectiveTransform = CATransform3DRotate(perspectiveTransform, 40.0f * M_PI / 180.0f, 0.0f, 1.0f, 0.0f);
[UIView animateWithDuration:1.4 animations:^{
self.myView.layer.transform = perspectiveTransform;
}completion:^(BOOL finished) {
CATransform3D originalPerspectiveTransform = CATransform3DIdentity;
[UIView animateWithDuration:0.9 animations:^{
self.myView.layer.transform = originalPerspectiveTransform;
}];
}];
}
I'm animating a small view with popup effect to alert you of an error ... The animation works perfectly but still are not very satisfied because I would like the view does not stop at position (x 25) but I wish they came to ( x 40 ) and then return immediately to ( x 25). In other words I would like to recreate the effect they have on the textfield MontainLion when you are wrong to insert the fields User for access to the operating system ...
I really hope to be able to explain to me , but if I did not succeed please comunicarmelo so that I can explain it better to resolve this question. Thanks to all! Rory .
Below I show you the code to display the pop-up I'm using
- (Void)presentazioneViewTransition
{
CGRect endREct ;
endREct = CGRectMake (25, 160, 270, 90);
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.25];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:#selector(endRightAnimation)];
self.frame = endREct;
[UIView commitAnimations];
}
You can use the simple block based UIView animation methods like this
-(void)presentazioneViewTransition{
CGRect transitionRect = CGRectMake(40.0f, 160.0f, 270.0f, 90.0f);
CGRect endREct = CGRectMake (25.0f, 160.0f, 270.0f, 90.0f) ;
[UIView animateWithDuration:0.15f
animations:^{
self.frame = transitionRect;
}
completion:^(BOOL finished) {
[UIView animateWithDuration:0.1f
animations:^{
self.frame = endREct;
}];
}];
}
I have a large bitmap in Xcode, on which a popup (UIView) is placed. Per default, it's hidden and is visible when pressing a button.
When visible, a x/y position is set... and it works.
After positioning, I want the popup appear with a scale-effect. This also works; however, the x/y positioning is ignored and the popup just appears where it's positioned in the Storyboard editor.
// Set position
minPopupFrame.origin.x = (_destinationensKoordinater[0] - minPopupFrame.size.width/2 + offsetX) * zoomfaktor;
minPopupFrame.origin.y = (_destinationensKoordinater[1] - minPopupFrame.size.height + offsetY) * zoomfaktor;
_popup.frame = minPopupFrame;
// Scale it to .1
_popup.transform = CGAffineTransformMakeScale(.1, .1);
_popup.hidden = NO;
// Set size to 100% in .3 seconds
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:.3];
_popup.transform = CGAffineTransformMakeScale(1, 1);
[UIView commitAnimations];
It's quite basic coding - but why doesn't it work? Suggestions, pretty please?
EDIT: I've also tried something like this - but the code is completely ignored:
_popup.hidden = NO;
CGAffineTransform scale = CGAffineTransformMakeScale(1, 1);
CGAffineTransform translate = CGAffineTransformMakeTranslation(200, 200);
CGAffineTransform transform = CGAffineTransformConcat(translate, scale);
_popup.transform = transform;
EDIT II: I also tried this:
_popup.center = CGPointMake((_destinationensKoordinater[0] - minPopupFrame.size.width/2 + offsetX) * zoomfaktor, (_destinationensKoordinater[1] - minPopupFrame.size.height + offsetY) * zoomfaktor);
_popup.transform = CGAffineTransformMakeScale(.1, .1);
_popup.alpha = 0;
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:.3];
_popup.alpha = 1;
_popup.transform = CGAffineTransformMakeScale(1, 1);
[UIView commitAnimations];
The interesting bit is that the alpha animation works, but the popup positioning is ignored, if the first _popup.transform line isn't commented out. It doesn't make sense to me
What I want to do is flip this UIImageView in an instant, no animation, then I need it to float to it's intended position on the screen. Both of the transformations are working, but not the way I want them to.
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.5];
resultsEnemy.transform = CGAffineTransformMakeTranslation(0, 0);
[UIView commitAnimations];
resultsEnemy.transform = CGAffineTransformMakeScale(-1, 1);
This is the code I am using. Despite the fact that the scale code (which I am using to flip the UIImageView) is not part of the animation with the 0.5 duration, it is following those rules. How do I avoid this?
Applying two transforms like that isn't going to produce the result you expect. What you need to do is combine them into a single transform matrix. The following should work as expected.
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.5];
// Create two separate transforms and concatenate them together.
// Use that new transform matrix to accomplish both transforms at once.
CGAffineTransform translate = CGAffineTransformMakeTranslation(0, 0);
CGAffineTransform scale = CGAffineTransformMakeScale(-1, 1);
resultsEnemy.transform = CGAffineTransformConcat(translate, scale);
[UIView commitAnimations];
Edit: Based off of your clarification, you seem to be wanting something like this:
CGAffineTransform scale = CGAffineTransformMakeScale(-1, 1);
CGAffineTransform translate = CGAffineTransformMakeTranslation(0, 0);
[CATransaction begin];
[CATransaction setValue:(id)kCFBooleanTrue forKey:kCATransactionDisableActions];
resultsEnemy.transform = scale;
[CATransaction commit];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.5];
resultsEnemy.transform = CGAffineTransformConcat(translate, scale);
[UIView commitAnimations];
For example, I use the animation in landscape status, duration is 5.0s, from status A to B; in the middle of the 5.0s, I may rotate the iPad from landscape to portrait. I want the animation stopped and make the UI status to C after I rotated.
I'm not sure my question is clear.
How can I do that?
my animation code:
- (void)moveImage:(UIImageView *)image duration:(NSTimeInterval)duration x:(NSNumber*)dx y:(NSNumber*)dy
{
// Setup the animation
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:duration];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationBeginsFromCurrentState:YES];
// The transform matrix
float fx = [dx floatValue];
float fy = [dy floatValue];
CGAffineTransform transform = CGAffineTransformMakeTranslation(fx, fy);
//CGAffineTransform transform = CGAffineTransformMakeRotation(0.4);
//CGAffineTransform transform = CGAffineTransformMakeScale(2.0, 2.0);
image.transform = transform;
// Commit the changes
[UIView commitAnimations];
}
Starting and Stopping Explicit Animations has a section on starting and stopping core animations
willRotateToInterfaceOrientation:duration notifies you when the rotation begins.
So all have to do is 1) from 2)