I want to create an 'unfold' animation to a UIView that appears on the screen.
An example of the animation can be viewed in this YouTube video that reviews the SuperList app (Another example of the animation can be viewed in the app's App Store page in the screenshots section).
I have quite good understanding of Core Animation and Objective C, so as with Cocoa and Cocoa Touch. The app will support versions 5.x and 4.x of iOS so, if it is possible, I would prefer a solution that suits both cases.
Moreover, I have googled this question about a thousand times and failed to get any answers, so help will be much appreciated. Thanks ahead, iLyrical.
Apparently, the 'UnCurl' effect is built-in with the framework and is your to use!
All you have to do, is use the animateWithDuration: animation: method of the UIView class and include the animation as follows:
[UIView animateWithDuration:1.0
animations:^{
CATransition *transition = [CATransition animation];
[transition setDelegate:self];
[transition setDuration:0.7];
[transition setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
[transition setType:#"pageUnCurl"];
[self.view.layer addAnimation:transition forKey:#"pageUnCurl"];
[self.view addSubview:someView.view];
}];
The note image (white page) in this case has transparent section (all side) and thus when uncurl happens it looks like only the white part is uncurling.
Related
EDIT: Per the provided comments, I have specified my question to a more direct implementation and desired solution.
Hello there,
I want a blue light, a red light, and potentially a neutral colored light, all appearing to be spinning in circles (similar to if a police car was nearby, you would see the lights flashing/rotating colors).
Here's a screenshot of the red and blue image views that I'm currently using to try to make the effect.
The following code currently varies each view layer's opacity:
[UIView animateWithDuration:4.5
delay: 1.0
options: UIViewAnimationOptionAllowUserInteraction | UIViewAnimationOptionCurveLinear
animations:^{
[self startRedAnimation];
[self startBlueAnimation];
}
completion:^(BOOL finished){}];
My animation method looks like the following:
- (void)startRedAnimation
{
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"opacity"];
[animation setFromValue:[NSNumber numberWithFloat:0.75]];
[animation setToValue:[NSNumber numberWithFloat:0.1]];
[animation setDuration:0.5f];
[animation setTimingFunction:[CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionLinear]];
[animation setAutoreverses:YES];
[animation setRepeatCount:16];
[[_redLightView layer] addAnimation:animation forKey:#"opacity"];
}
You can imagine that the blueLightView animation method looks similar.
What I'm looking for is to have the views appear to rotate, IE they are not just flashing their opacity from 0 to 1, but rather altering color and/or rotating around in a circle on the view.
I'd like to use QuartzCore and CoreAnimation frameworks to make this happen, instead of just UIView animations over an array of images.
I'm relatively new to CoreAnimation and have performed similar effects like rotating/pulsing view layers, but I'm just not certain what I could use from the framework that would give me the effect I'm looking for.
Any insight would be greatly appreciated! Thanks Stack Overflow peers!
Try to move the images instead of changing the colors. I could imagine that you could achieve the desired effect by rotating the images around the bottom of the screen back and forth.
I am trying to develop a simple CATransition that shows an UIView appearing from the left.
Here it is the code:
CATransition *transDerecha=[CATransition animation];
[transDerecha setDuration:1];
[transDerecha setStartProgress:0];
[transDerecha setType:kCATransitionMoveIn];
[transDerecha setSubtype:kCATransitionFromLeft];
[transDerecha setDelegate:self];
Ok, but to get the aspect that i am looking for, i have created a UIView (blue one on the video).
I think that in the following video, you can see better what i am trying to say.
http://screencast.com/t/JMQmxe7CGy
The problem comes when i try to make the same thing on the left. If i create another UIView to cover the left UIView, it will cover also the right cover.
So, is there any other CATransition type to make that? Or any solution?
ThankS!!!
I dont think you need to dive down to CA to do this kind of thing. It can be done using UIView animations. Here http://www.raywenderlich.com/2454/how-to-use-uiview-animation-tutorial is a good tutorial on UIView animations.
I'm trying to achieve the camera iris animation from the Apple camera app. It is also found in numerous other apps like RedLaser, Sudoku Grab, so it seems to be fine with Apples rules even thou it's private.
The hidden CATransition animations are dokumented here for example:
http://iphonedevwiki.net/index.php/UIViewAnimationState
However I'm not able to get any of the hidden ones to work, public ones work fine thou. Could this be a change of iOS 4? All information I do find on those hidden animations seems a little dated.
Here is my code:
CATransition *animation = [CATransition animation];
animation.delegate = self;
animation.duration = 2.0;
animation.timingFunction = UIViewAnimationCurveEaseInOut;
animation.type = #"cameraIris";
[self.window.layer addAnimation:animation forKey:nil];
Using "reveal" as 'animation.type' works fine with my code.
Has anybody played around with those on iOS 4 yet? Or is the issue totally different?
RedLaser uses this effect on iOS 4 (it's not an iOS 4 optimised app thou).
The animation is found in these other apps because it is Apple's implementation. Accessing the camera API will cause the shutter opening animation to appear. If you want to use this animation for your app in a non-camera api related way, then you will have to roll your own animation.
So I am just beginning recently developing some simple apps for the iphone. I will say that I am fairly sure I don't have a strong understanding of programming for multiple views yet, but I am trying to learn as I go.
I have a program that started as a plain window based application so i could hand write everything in hopes of learning more about what i am doing. I have a single view controller that acts to load and release views as requested from each of the other view controllers. No elements persist from one view to the other.
I have that working fine currently, but I wanted to add animations to the view changing. A simple push animation was my goal. One view pushes out as the new view pushes in.
Looking into CATransitions and trying that, I have a working version (currently for pushing top/bottom)
[thisView.view removeFromSuperview];
[thisView release];
thisView = [[MenuViewController alloc] initWithNibName:#"MenuView" bundle:nil];
[self.view addSubview:thisView.view];
CATransition *animation = [CATransition animation];
[animation setDuration:6.3];
[animation setType:kCATransitionPush];
[animation setSubtype:kCATransitionFromTop];
[animation setRemovedOnCompletion:YES];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];
[[self.view layer] addAnimation:animation forKey:nil];
as far as I can tell this is pretty standard code for using CATransition and it works to do what I need, one view gets pushed up as the other view comes in. However my problem is that there seems to be a fade that happens to each view as they come in or go out respectively.
As such - in this example; as the menu pushes up from the bottom, it will very slowly fade in from white, and as the previous view leaves the screen it will slowly fade to white.
Note that the duration is set to 6 so that the fading is dramatic.
Is there a way to remove the fading here so that each view remains solid on the way in and the way out? Or have I missed the mark completely in this route that I am taking?
I appreciate any help. Apologies I have been long winded.
I have never been able to find a solution to this problem, but I can offer a reasonable workaround. What's happening is it isn't fading to white, but fading to transparent, and the window background (or whatever view is behind) is white. There are a couple ways to get around this:
Change the window background color. If both views you're fading between have the same solid background color, then this will look pretty good.
Don't render a background in each view ("MenuView," for example), but rather have a shared background view that's under those views at all times.
Note that this will not work in all circumstances -- grouped UITableViews, for example, are always completely opaque.
(As I side note, I assume that you aren't build a navigation-based application, in which case all the animation should be handled automatically.)
You also might want to consider the looking into the UIView method setAnimationTransition:forView:cache: if you haven't already as another way to transition between views (although it cannot do a sliding animation, if you are set on that).
I solved this by enclosing the view to which I have applied the effect into a superview and by setting the superview property "clip subviews". now the fade is "clipped" by the superview.
I was able to get the views to transition without fading at the beginning and end by using UIView animation. NOTE: In the code below, I have a UINavigationController and a UITabBarController inside a main UIView. The main UIVIew (containerView) is what I added as a subView to the Application window. The other two are subviews of the containerView.
UITabBarController *tabBarController = [(AppDelegate_iPhone *)[[UIApplication sharedApplication] delegate] tabBarController];
UIView *containerView = [(AppDelegate_iPhone *)[[UIApplication sharedApplication] delegate] containerView];
UINavigationController *accountsNavigationController = [(AppDelegate_iPhone *)[[UIApplication sharedApplication] delegate] accountsNavigationController];
CGRect accountsNavigationControllerEndFrame = containerView.frame;
CGRect tabBarControllerEndFrame = CGRectMake(containerView.frame.size.width, containerView.frame.origin.y, containerView.frame.size.width, containerView.frame.size.height);
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.4];
tabBarController.view.frame = tabBarControllerEndFrame;
accountsNavigationController.view.frame = accountsNavigationControllerEndFrame;
[UIView commitAnimations];
In the Photos app, there is a nice water drop effect used for transition. I had seen an app a while ago that used this same water effect transition for it's content views.
Unfortunately, this transition type is not listed in the UIViewAnimationTransition documentation. But since this third party app used it (I don't remember it's name), I guess that there is a way of using it.
Does anyone know?
I think it's just a hidden CATransition type:
CATransition *transition = [CATransition animation];
transition.type = #"rippleEffect";
transition.duration = 5.0f;
transition.timingFunction = UIViewAnimationCurveEaseInOut;
[self.layer addAnimation:transition forKey:#"transitionViewAnimation"];
(Note: I haven't tried this for rippleEffect but I have used suckEffect and spewEffect similarly)
It is not part of the published SDK. If you want to sell your app in the app store, you need to implement this yourself.