I have a UILabel that displays the current date for the current view of my scroll view. When I scroll this view to the left (to the left pages), I'd like this label to change to the day before, with a crossing effect between the 2 dates.
I take as reference the fading effect of the Springboard when you scroll to the Spotlight page. I think this is similar but I have no idea how to implement it !
Where do I put the code, do I have to use 2 different UILabel or maybe CoreAnimation ? When do I change the date ?
Thanks in advance !
In your scrollViewDidScroll: delegate method, check if the scroll view's contentOffset indicates that the user has scrolled to another page.
If so, change the label's text to the new date. It won't animate yet, but do this before you try the animation.
For the animation, add a CATransition to the label's layer and configure it to your liking:
// Create a transition animation and add it to the label's layer:
CATransition *transition = [CATransition animation];
transition.type = kCATransitionFade;
transition.duration = 0.25;
[self.dateLabel.layer addAnimation:transition forKey:#"textTransition"];
// Change the label's text as before:
self.dateLabel.text = newDateString;
This effect is a little different from the fading of the Springboard icons (since those fade continuously as you scroll further to the Spotlight page) but I think my approach is more appropriate for your application. To emulate the Springboard effect, you should indeed use two separate labels (with the same frame) and change their opacity values as the scroll view's contentOffset changes.
Using Core Animation with two labels would work just fine. Changing the property of a Core Animation layer result in a smooth transition by default, so you can use that to your advantage. For example:
- (void)crossfadeDateLabels
{
date1Label.layer.opacity = 0.0f;
date2Label.layer.opacity = 1.0f;
}
Or you can use the explicit animation model if you want more control:
- (void)crossfadeDateLabels
{
CABasicAnimation *date1Anim = [CABasicAnimation animationWithKeyPath:#"opacity"];
date1Anim.duration = 1.0f;
date1Anim.fromValue = [NSNumber numberWithFloat:1.0f];
date1Anim.toValue = [NSNumber numberWithFloat:0.0f]
// Do something similar for date2Anim...
[date1Label.layer addAnimation:date1Anim forKey:nil];
[date2Label.layer addAnimation:date2Anim forkey:nil];
}
Related
I've a screen where following kind of animation has to too be implemented.
The circles unfurl out of the bloom and then spread out to become the individual buttons. Slightly slower the first time it animates (1 sec), slight faster for the second time (.75s), and then faster for all subsequent times (.5s).
But I could not figure out what kind of animation has to be implemented. Any help would be appreciated.
What you describe is a complicated animation. What you should probably do is just break it down into its constituent parts:
Create circular buttons, e.g:
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.backgroundColor = [UIColor ...];
button.frame = CGRectMake(...); // probably define this to be square, just off screen to the bottom
button.layer.cornerRadius = button.frame.size.height / 2.0;
button.layer.borderColor = [UIColor ...].CGColor; // white or black as appropriate
button.layer.borderWidth = 2.0;
[self.view insertSubview:button atIndex:0];
[buttons addObject:button];
Animate their appearance on the screen by animating each of the buttons from off screen to the appropriate vertical position using animateWithDuration. You could move them all together, or you might stagger them so they appear to fall into place, using a rendition that includes delay so you can delay each button a little more. Perhaps something like:
for (NSInteger idx = 0; idx < count; idx++) {
[UIView animateWithDuration:duration * (count - idx) / count
delay:duration * idx / count
options:0
animations:^{
UIButton *button = buttons[idx];
button.center = CGPointMake(button.center.x, idx * 50.0 + 100.0);
}
completion:^(BOOL finished) {
//do next step
}];
}
Unfurl the buttons by animating the frame of the button to be the full width that that row will eventually occupy. Again, you can just use animateWithDuration.
Animate the unrounding of the corners so they're square, like your final buttons. This is the one animation that you cannot easily do with animateWithDuration, but rather you might use CAKeyFrameAnimation:
[buttons enumerateObjectsUsingBlock:^(UIView *button, NSUInteger idx, BOOL *stop) {
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:#"cornerRadius"];
animation.values = #[#(button.layer.cornerRadius), #(0.0)];
animation.duration = duration;
animation.fillMode = kCAFillModeForwards;
animation.removedOnCompletion = NO;
if (idx == 0)
animation.delegate = self;
[button.layer addAnimation:animation forKey:nil];
}];
Your delegate's animationDidStop can initiate the next step of the animation.
Replace the wide button with one that is broken up into the right number of individual buttons for that row. You might want to make these be lined up edge to edge.
Do a final frame adjustment of the buttons so they end up with a little space in between them. Again, you can use animateWithDuration.
Replace the previously blank labels on the buttons with the final text strings. Note, the label on a button is not generally an animatable property, so if you'd like it to fade in nicely, you should use transitionWithView, specifying the common superview for all of those buttons and use an options value of UIViewAnimationOptionTransitionCrossDissolve.
If you look at each one of these steps, you can see that none is terribly complicated. Just break your complicated animation into separate steps, write one method for each animation, and have each trigger the next step of the animation.
UIButtons don't have a rounded rectangle look to them any more in iOS 7. Are you going to create a custom subclass of UIButton?
If so, I would suggest using CAAnimation. You should be able to attach a CALayer to each button and set it's borderColor, backgroundColor, borderWidth, and cornerRadius. When you want to animate the layer, just change the bounds of the layer and it will animate to the larger size.
To change the animation's duration or timing you could enclose your changes in a CATransaction. Something like this:
[CATransaction begin];
[CATransaction setAnimationDuration: 1.0];
CAMediaTimingFunction *linearTiming =
[CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionLinear];
[CATransaction setAnimationTimingFunction: linearTiming]
myButton1Layer.bounds = newButton1ounds;
myButton2Layer.bounds = newButton2ounds;
[CATransaction commit];
I have a scrollview with multiple views on it. All these views have text field on them and once clicked the keyboard pops up. In certain cases the keyboard may hide this subview and I want to determine if this can be calculated in advance. If yes than how can I do it..? Can the scrollRectToVisible of UIScrollView method be used here to any use.. ? you look at the attached image for further clarification. Thanks for any ideas..
EDIT:
These subviews are dynamically drawn so I can't determine and hard code this.
In Landscape mode :
Height of iPad : 768 pixels.
Height of Keyboard : 352 pixels.
Which means keyboard x co-ordinates : 0.0 and y co-ordinates : 416
Whenever your controls y co-ordinates are greater then 416. Understand it'll be hidden when keyboard will pop-up.
Yeah , you need to shift the subview a little up so that it can be visible, you can use this animation to shift it to any point. Just pass the layer and destination point. and once user pressed return on keyboard, shift it again to the previous point :)
-(void)moveLayer:(CALayer*)layer to:(CGPoint)point
{
// Prepare the animation from the current position to the new position
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"position"];
animation.fromValue = [layer valueForKey:#"position"];
animation.duration = 0.2;
animation.toValue = [NSValue valueWithCGPoint:point];
// Update the layer's position so that the layer doesn't snap back when the animation completes.
layer.position = point;
// Add the animation, overriding the implicit animation.
[layer addAnimation:animation forKey:#"position"];
}
Register for the following notification:
[[NSNotificationCenter defaultCenter] addObserver:self
selector:#selector(keyboardDidChangeFrame:)
name:UIKeyboardDidChangeFrameNotification
object:nil];
Make sure you handle this:
- (void)keyboardDidChangeFrame:(NSNotification *)notification
{
CGRect keyboardEndFrame;
[[notification.userInfo objectForKey:UIKeyboardFrameEndUserInfoKey] getValue:&keyboardEndFrame];
CGRect keyboardFrame = [self.view convertRect:keyboardEndFrame fromView:nil];
// Add your code to check if the keyboard is hiding your views.
// CGRectIntersectsRect should help you here.
// For each view you are worried about hiding, run CGRectIntersectsRect to check
// if an intersection occurs. If it does, then you can
// move your view using UIScrollView's setContentOffset: animated: method.
}
I'm currently performing a curl up animation by doing the following:
CATransition *animation = [CATransition animation];
animation.type = #"pageCurl";
animation.subtype = kCATransitionFromTop;
animation.fillMode = kCAFillModeForwards;
animation.duration = 1;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
[[self.view.window layer] addAnimation:animation forKey:nil];
This animation will simply perform a page curl animation but in the end you are left looking at the same view that you started out with. No REAL transition ever occurred.
Now using animation blocks I know you can do something to the effect of:
[UIView transitionFromView:self.view
toView:aNewView // a view to transition to
duration:1
options:UIViewAnimationTransitionCurlUp|UIViewAnimationOptionCurveEaseIn
completion:NULL];
However, using animation blocks you are transitioning to a new view, aNewView, which is different from the CATransition animation above which reuses the same view (no real transition ever occurs). The problem with the animation block is that you have to actually create the new view to transition to which is cumbersome in my case because the view is rather complicated and I'd rather not create a UIView subclass.
Is there a way to perform the above CATransition animation using animation blocks while getting around the difficulties of having to rebuild a view or create a custom subclass?
Ok - so I figured it out for anyone who is interested. It's actually super simple. You can simply use the method: transitionWithView:duration:options:animations:completion:
For example:
[UIView transitionWithView:self.view
duration:1
options:UIViewAnimationOptionTransitionCurlUp|UIViewAnimationCurveEaseIn
animations:^{ // do anything you want here }
completion:NULL];
That's it. This will show a transition animation back to the same view. You can make any changes you want to the new view (maybe display some new text, whatever...) in the animation block.
I hope this helps someone out down the line...
Alright this is a newbie question, so I apologize in advance. I have a UIView which I laid out in Interface Builder off-screen. When the user presses a button, I would like to animate this view on-screen. It works, but I can't interact with any buttons in the UIView. I have read that only the view is moved when you animate and that the actual objects retain their positions, so I have tried setting the position of the UIViews' layers, but it causes my UIView menu to display an extra 81 pixels to the left. When this happens, I can interact with the buttons, but I need it to be flush with the right of the screen. Here is my code in the IBAction on the openMenu button:
CABasicAnimation *moveView = [CABasicAnimation animationWithKeyPath:#"position"];
moveView.delegate = self;
moveView.duration=0.5;
// If the menu is displayed, close it!
CGPoint currentPosView = [[entirePage layer] position];
CGPoint destView;
[moveView setFromValue:[NSValue valueWithCGPoint:currentPosView]];
if (menuDisplayed) {
// Move right to our destination
destView.x = currentPosView.x;
destView.y = currentPosView.y + 81;
[moveView setToValue:[NSValue valueWithCGPoint:destView]];
// Otherwise, open it
} else {
// Move left to our destination
destView.x = currentPosView.x;
destView.y = currentPosView.y - 81;
[moveView setToValue:[NSValue valueWithCGPoint:destView]];
}
// Animate the view
[[entirePage layer] addAnimation:moveView forKey:#"move"];
// Set the final position of our layer
[[entirePage layer] setPosition:destView];
menuDisplayed = !menuDisplayed;
And then in the animationDidStop method:
CGPoint currentPosMenu = [[menuBar layer] position];
if (menuDisplayed) {
currentPosMenu.x -= 81;
} else {
currentPosMenu.x += 81;
}
[[menuBar layer] setPosition:currentPosMenu];
Help???
You shouldn't need to mess with the layers. You could probably achieve the effect you want by laying out the views in Interface Builder at the positions they will be in after they are animated into view. In other words, first lay things out in their final/correct positions. Don't do anything funky in IB.
In your code, after the app is launched or in a -viewDidAppear: method if you're using a UIViewController, you could offset the views by some amount and then restore them to their original position in an animation block:
myView.transform = CGAffineTransformMakeTranslation(0,81);
[UIView beginAnimations:#"slideUp" context:nil];
myView.transform = CGAffineTransformIdentity;
[UIView commitAnimations];
As for the lack of user interaction on your views, that could be a number of things. If all of your views are subviews of something like a UIImageView, UIImageView has userInteractionEnabled set to NO by default (at least if you build one in code - I'm not sure off hand what IB's default settings are for an image view). It could also mean that the superview of your views is actually too small and its frame does not contain the subviews. (If clipping was turned on for the superview, you wouldn't even be able to see subviews that are having this particular problem.)
EDIT:
I read things more carefully and see you want things to move in response to a button press, so in other words the views will need to be hidden from the start. In that case you could still lay everything out in IB in their final position, but just set them as hidden in IB. When you push the button, set the views visible (hidden=NO) before translating them. That should allow them to be laid out in their final/correct place in IB making sure that they are positioned on the proper superviews, etc while still getting the animation effect you want.
Forget about the animations for now; you should move your view by setting its frame property.
E.g.:
CGRect menuFrame = entirePage.frame;
if (menuDisplayed)
{
menuFrame.origin.x += 81;
}
else
{
menuFrame.origin.x -= 81;
}
entirePage.frame = menuFrame;
// Do your animation here, after the view has been moved
Don't worry about the animation until you've verified that your view is being placed in the correct location. Once you've verified that that code is working correctly, then do your animation after you set the frame property.
Note that you probably don't need to use the CoreAnimation API at all, unless you're doing something complex. UIKit can do animation on its own. E.g:
[UIView beginAnimations:#"MyAnimation" context:NULL];
myFirstView.frame = ...;
myOtherView.frame = ...;
[UIView commitAnimations];
I am trying to make a view slide from top to bottom. This is not a big deal, I used CABasicAnimation for this. The problem is when I want to remove the view. I use this animation.
CABasicAnimation *animation;
animation = [CABasicAnimation animationWithKeyPath:#"position"];
[animation setDelegate:self];
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(self.view.layer.position.x, 0 - self.view.bounds.size.height / 2)];
animation.fromValue = [NSValue valueWithCGPoint:self.view.layer.position];
animation.autoreverses = NO;
animation.repeatCount = 0;
animation.duration = 0.25;
animation.timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut];
[self.view.layer addAnimation:animation forKey:#"moveX"];
Which animates the view perfectly. But, after the animation finishes, my view appears again. So I added this line :
[self.view removeFromSuperview];
Which removes the view, but with no animation. So I decided to add the remove code to this delegate:
-(void) animationDidStop:(CAAnimation *) animation finished:(bool) flag
So now, the animation works, the view disappears, but sometimes, I can see the view appear and disappear faster, is like after the animation, the view appears, then the animationDidStop delegate is called, and the view disappears, obviously this is awful. What am I doing wrong?
Might want to set these properties. They cause the presentation to be preserved at the end of the animation.
animation.fillMode = kCAFillModeForwards;
animation.removedOnCompletion = NO;
Then the "animationDidStop:" method can be used to remove the view at the end of the animation:
-(void) animationDidStop:(CAAnimation *) animation finished:(bool) flag {
if (animation == [containerView.layer animationForKey:#"moveX"]) {
// remove view here, add another view and/or start another transition
}
}
Well, according to the Apple sample "MoveMe", this (removedOnCompletion) should work, however, it doesn't seem to.
So, add these lines after your code:
[self.view.layer addAnimation:animation forKey:#"moveX"];
self.view.layer.position = [animation.toValue CGPointValue];
This ensures that after the animation runs, the layer is properly positioned.
I had this issue when performing several animations in an animation group. I had to set a couple properties on the animation group itself, not the individual animations.
CAAnimationGroup *animGroup = [CAAnimationGroup animation];
// MAKE SURE YOU HAVE THESE TWO LINES.
animGroup.removedOnCompletion = NO;
animGroup.fillMode = kCAFillModeForwards;
animGroup.animations = [NSArray arrayWithObjects:moveAnim, scaleAnim, nil];
animGroup.duration = tAnimationDuration;
[tImageView.layer addAnimation:animGroup forKey:nil];
This one bit me too. You want to set the animation's removedOnCompletion flag to NO. It defaults to YES, which means after the animation is complete, it's removed, and the view reverts to its initial state.
Setting the view to hidden as Rob suggests should do it.
For properties of properties I would stick with the ObjC 2.0 style like you already have in your code.
set.view.hidden = YES;
Can you set the view's hidden property to YES?
I think it would be:
self.view.hidden = YES;
But it might be:
[self.view setHidden:YES];
I turns out I am pretty lame at figuring out the proper way to access properties of properties.