I am trying to flip a UIView around one edge of the view, as if the view were a page of a calendar with a rigid page moving over like so : Calendar.
I am trying to do it like so :
[UIView transitionWithView:self.upperCard
duration:0.5
options:UIViewAnimationOptionTransitionFlipFromBottom
animations:^{
topView.frame = [self bottomHalfRectFromBounds];
bottomView.frame = [self topHalfRectFromBounds];
topView.flippedOver = YES;
bottomView.flippedOver = NO;
}
completion:NULL];
[self setNeedsDisplay];
The only problem with this method is that because the animation of the view's frame is Linear and so is the flipping animation the animation's are out of time with each other (This is due to the fact that flipping at a constant velocity the area which is visible of the view is proportional to Cos(t), learn some maths if you didn't know that ;P).
So basically I'm either looking for a way to make the frame animation have an easing function... or a completely alternative method... I don't want this to look like a page curl as it is going to be used for a scoreboard app, so please don't just tell me to use the UIViewAnimationOptionCurlDown option :P
Thanks for your time!
In general, animating your view’s frame is not a good way to approach this: it causes the view to have to redraw itself at every step of the animation, and, as you’ve noticed, doesn’t look like a flip so much as a linear scale.
Check out this answer—specifically the second part of it, discussing how to do it in CA—for a better approach.
Related
Anybody have any idea how this is done?
http://youtu.be/r_cII4_aq_A
In general, the idea is awesome, but I would like to know how to do each specific thing. In the video, the pages are being swiped too fast so you can't see, but as you transition from one page to the next, each pixel smoothly transitions to it's new color. Also, it's really cool how the icon gets smaller to a minimum size as you transition away from a screen.
Maybe there's some 3rd party library that provides a protocol and it's relatively easy to implement, but I can't find it. If there's not, I'm thinking it's just one view controller with many views side by side and as you drag your finger, it calculates where each view needs to be..and what color every pixel needs to be.
I imagine you already have it by now. But in case you still have any doubts, I made gist that does the animation: https://gist.github.com/mnmaraes/9536364
Anyways, have fun.
It's a fade animation, so:
[UIView animateWithDuration:0.5
delay:0.0
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
_backgroundImageView.image = nextImage;
} completion:nil];
should do the trick for the background part.
For the foreground/icon part you can animate the transform to scale and translate the views as they slide in and out.
I'm using the concept of the ui page control.
For example, I have multiple similar views. Let say 10 news articles. I put them in a a page control and am able to swipe between them.
However, I want to mimic the animation that the UINavController does. Is this possible? ie: not have the pages scroll end to end but instead a slight overlap and effect where one panel slides out at twice the speed of the one below it sliding in.
Any Ideas?
If i am not getting wrong understanding of your question..
As this is not possible to do with existing page controls you need your own logic
This is how it should be handled, you will need to adjustments as per your requirement..
Rough logic
[self.view addSubview:nextArticleView];
nextArticleView.frame = // set offscreen frame, in the direction you want it to appear from
//Set more time as newArticle should overlap to existing articles view
[UIView animateWithDuration:10.0
animations:^{
nextArticleView.frame = // desired end location (current articles initial frame)
}];
//set less time as current article should slide fast
[UIView animateWithDuration:5.0
animations:^{
self.view.frame = // desired end location (off screen)
}];
I have a particular scenario that I'm trying to emulate and, being fairly new to Cocoa Touch, I'm not sure of the best way to accomplish it. Pardon my lacking tactical knowledge; hopefully some clear exposition will help.
What I'd Like To Emulate:
The app I'm looking at (in particular) is Beat. Below is an example of one of their UIViews - in particular, notice the gear icon for Settings at the bottom.
When that gear is touched or swiped up, two primary UIView changes occur:
The original UIView is slid up the screen about 90% of the way (the key point being that it does not slide all the way up).
A new UIView is slid up to fill that newly vacated 90% space.
This is the basic functionality that I would like to accomplish.
Implementation Idea #1: Single UIViewController w/ Multiple UIViews
At first, I considered having a single UIViewController manage both the "main" and the "settings" views. In that case, it would be a fairly simple thing to transition these views in the appropriate manner.
That said, this seems a bit cluttered to me. Depending on how robust my two sets of functionality are, that's a recipe to overload a single UIViewController. You might tell me that that's okay, but off the bat, it seems too much.
Implementation Idea #2: Multiple UIViewControllers Within Custom Container ViewController
This is the route I'm currently going down. It separates the two discrete sets of functionality into separate UIViewControllers (contained within a Container ViewController) and transitions between the two via:
- (void)flipFromViewController:(UIViewController *)fromController
toViewController:(UIViewController *)toController
{
CGFloat width = self.view.frame.size.width;
CGFloat height = self.view.frame.size.height;
fromController.view.frame = CGRectMake(0.0f, 0.0f, width, height);
toController.view.frame = CGRectMake(0.0f, height, width, height);
[self addChildViewController:toController];
[fromController willMoveToParentViewController:nil];
[self transitionFromViewController:fromController
toViewController:toController
duration:0.5f
options:UIViewAnimationOptionTransitionNone
animations:^(void) {
fromController.view.frame = CGRectMake(0.0f, -(height - 100.0f), width, height);
toController.view.frame = CGRectMake(0.0f, 100.0f, width, height);
}
completion:^(BOOL finished) {
[fromController removeFromParentViewController];
[toController didMoveToParentViewController:self];
}];
}
The problem with this is the transition: it doesn't seem to stop "90% of the way". It looks more like it's intended to completely transition out an "old" controller and in a "new" controller, even though my frame adjustments on the two UIViews are not supposed to be "complete" moves.
Where I'd Like Guidance
I'm not asking for a complete solution - your expertise would be too expensive. :) That said, being fairly new to this, I would love your insight on what the right approach would be. Please let me know if I can provide further information.
Thanks!
I do think your 2nd method is on the right track, and your intuition about using transitionFromViewController:ToViewController is also right -- I wouldn't use that method if you want both view controllers to be present and active. So, I would have the controller with the gear view be a child view controller of a custom container controller, then add the second child off screen to the bottom like you have. Then animate both views up using animateWithDuration:... At the end of that, animation, you should have what you want, and you container controller will have two children.
Is there any way to lock scrollview programatically at specific place with having native
apple bounce back effect?
I have infinite scrollview and would like to lock at some specific place. I found out that
I can use scrollViewWillEndDragging:withVelocity:targetContentOffset to figure out that the locking point
is going to be crossed and intervene like this:
[self setContentOffset:CGPointMake(LockPositionX, LockPositionY) animated:YES];
However this doesn't have native bounce back and rubber banding effect. I try to workaround it with
modifying scrollview.decelerationRate but it looks like it cannot have values other than
UIScrollViewDecelerationRateNormal or UIScrollViewDecelerationRateFast.
Maybe I'm missing something and there is some hidden way to achieve that?
add below code in scrollViewWillEndDragging:withVelocity:targetContentOffset
if(lockingpointreached)
{
[UIView animateWithDuration:0.3f delay:0.0f options:UIViewAnimationOptionCurveEaseIn animations:^ {
[self setContentOffset:CGPointMake(LockPositionX-20, LockPositionY-20)];
} completion:NULL];
}
Hope this will help you.
I found out that the easiest way is to actually use native bounce back implementation.
Event though our scrollView contentSize have e.g. vertical bounds from 0 to 1000 if we put some all the previous with negative origin (out of screen) its going to be visible (rendered) when we bounce back.
If then for some reason we want to move the locking point the previous elements we just have to shift all the elements down so that only elements above the locking points have negative origin
I am developing an application which needs to decrease the width of imageview to 0 from 320 in a 1hour time. for this i am using following code
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:3600];
newRect.size.width = 0;
imgView.frame = newRect;
[UIView commitAnimations];
it is works fine if we stay in same view controller,after animation starts if the user navigate to some other viewcontoller, How to handle the animation.
Along with this i have one more issue- during the animation the image in imageview is looks like shrink as throughout the animation i am using same image ,So i want to change the image in imageView during the animation How can i achieve this.
Is there any other way to do this apart form the animation.
Any Help is Appreciated.
The life cycle of the controllers and views will not allow you to do this so simply. The objects you are using can and will be deallocated by the system if they are not currently needed anymore, so the animation you started is essentially discarded with it.
You will have to store the progress of your animation somewhere, e. g. in a file or a CoreData database to have it persistent across the instantiations of that view. Depending on the exact situation, it might be sufficient to store the start time of the animation once it begins. Then, in viewWillAppear you could load it and calculate how much progress into that one hour has been made and start a new animation from that point. To the user it would appear as if the animation had proceeded in the background.