How to create an animation like this one? - ios

I have a textfield on the view controller. I want to populate the form after user taps the textfield. here is the animation which I want to implement
I want to know first did this app using two controllers. or it just using one controller in which it hides the form and open the next form after hiding first one. lets say if its using two controllers how can I open the second controller with animation like this image and also go back to 1st controller with animation.. at the moment I am simply opening a 2nd controller with default animation
func textFieldShouldBeginEditing(textField: UITextField) -> Bool {
self.navigationController!.pushViewController(self.storyboard!.instantiateViewControllerWithIdentifier("LoginViewController") as UIViewController, animated: true)
return false
}

The way they use it is very rather complex in terms of graphics but this more or less it:
1-They use two different view controllers, as should any good, organized programmer.
2-They then define a custom segue that performs the transition from to the other. The custom segue also takes care of animating the transition. Now I speak from experience when I say this: the whole modal segue animation framework is a pain, but it the only way to get those custom segue transitions working right. The way it happens is, you will overlay your second view controller on top of the first one, and then tell a custom animator what to do with individual elements and their frames, using that animator for your segue -- in this case squishing those buttons and expanding those two text fields.
As a full fledged beginner guide I may recommend: http://netsplit.com/custom-ios-segues-transitions-and-animations-the-right-way
I may also advise that the little tutorials out there that simply create a custom segue and animate the views before calling presentViewController: are very tempting but you will spend a good amount of time dealing with bugs, time wasted in the end because it will never be perfect.

Related

Is it possible to animate a view form one ViewController into the next?

So I am trying to set up a UIPageViewController, and I have several UIViewControllers, but I want to set it up so I can animate(translate) a subview of my first view controller into the second view controller as it is transitioning. I have the UIPageViewController transition set to scroll. So that is what makes me believe this should be possible correct me if I am wrong. My google searches came up empty, but perhaps I am searching for the wrong thing.
Please point me in the right direction here in the form of a tut or how to conceptually think about this. My current thought is that I could have two identical views in different controllers, and as the user swipes the first view travels from left to right and then when I know it is at the edge I could have the other view take over perhaps using the prepareForSegue method.
Have a look at the Hero library (https://github.com/lkzhao/Hero) for custom animations between UIViewControllers.
Since a PageViewController doesn't really allow custom animation have a look at the AppleHomePageExample to see a example.

Load second app interface in a segue

Basically what I want to do is depicted in the image below:
However this only loads the middle and third interface, the first is hidden both from swiping onto and in the circle indicators at the bottom.
I'd like to be able to load the second interface and swipe left for the first and swipe right for the third. Is there a way to achieve this?
Building my first Apple Watch app over here :)
Looks like there is a concept of UINavigationController-ish behaviour built into the WKInterfacesController.
Take a look at: pushControllerWithName(_:context:)
And from some docs I found here:
Hierarchical. This style is suited for apps with more complex data models or apps whose data is more hierarchical. A hierarchical interface always starts with a single root interface controller. In that interface controller, you provide controls that, when tapped, push new interface controllers onto the screen.
EDIT:
Looking into this some more. WatchKit is currently very limited by the looks.
The best solutions I could come up with was to add the three InterfaceController, with segues is between. Left -> Main -> Right.
Then assign a custom SKInterfaceController for Main:
class InterfaceController: WKInterfaceController {
override init() {
super.init()
becomeCurrentPage()
}
}
This creates an annoying animation in the beginning where you will see "Left" on start and how "Main" is animated pushed in. I don't see any better way to do this at this early stage of WatchKit.
The placement of the ViewControllers have no real "physical" meaning.
A segue (the arrows) simply defines a way to navigate from "this" ViewController to another one.
http://www.raywenderlich.com/81880/storyboards-tutorial-swift-part-2
It is possible to create as many segues from one ViewController to other ViewControllers as needed. You can name these segues, and trigger the one you want from storyboard send events or code for specific events (like swipe gestures).
To get the animation of actually sliding the view to the left would require a custom transition:
http://mathewsanders.com/animated-transitions-in-swift/

Multiple States in Xcode 6 Storyboard. Animating/Moving items in run time

I have made various attempt to go storyboard only and limit my code when it comes to UI. Everytime I was getting stuck and reverting back to code. Since the release of XCode 6 and the new iPhone that have multiple screen sizes it make more sense that ever to go Storyboard only.
This time I am stuck on the following scenario. I want to create a custom search view controller that will have 2 states:
Search State. It will prompt the user for a keyword to search.
Result State. It will display the results to the user.
I am aware that this can be accomplished using the UISearchController, but the customer wants to customise the behaviour. Currently I have two view controllers and a push/show segue between them. I would like to replace that with one view controller and animate the display of the results.
Is there any way that storyboard can accomplish that. I am thinking of creating two view controllers (in storyboard) with different layouts. Both will be linked on the same class. I could create a segue between them, but then I will lose all the variable stored inside them and will not be able to animate between them.
On the transition between the two states some UI elements will be hidden and some others will be moved. I would like that to be animated.
I know how to do that in code without using storyboard, but then I will have to cover all different screen scenarios. I hope there is an alternative way.
You can do this with two view controllers, and set a segue between them. The trick is that the animation bit will have to be done in code, unless you write a custom UIStoryboardSegue to handle the animation.

UIPageViewController with docking/pinning functionality

I've been using UIPageViewController with transitionStyle UIPageViewControllerTransitionStyleScroll in order to be able to easily move between views in my app.
I'm looking for a bit more functionality that I won't get from the UIPageViewController so I'm looking to make my own solution - perhaps still a subclass of UIPageViewController.
To explain the extra functionality I'll provide a scenario & a diagram:
In A the app is currently showing the first view controller. I then drag from right to left which will of course start to show the second viewcontroller as shown in B. If I stop panning before the point where the UIPageViewController decides whether or not to show the second view controller or go back to the first one I'd like it to instead show the second viewcontroller (taking up one third of the screen) instead of hiding it completely.
If I was to keep panning a bit further beyond the halfway point and then released I'd like the second view controller to take up two thirds of the screen, while the first view controller takes up one third.
That's essentially it. I'd appreciate any advice on how to go about doing this. I'm thinking I'll subclass UIPageViewController and override the delegate methods, but I'd really appreciate any advice on a better solution.
Many thanks
Maybe this could give you a hint or and inspiration. >>
http://www.raywenderlich.com/78568/create-slide-out-navigation-panel-swift

What's the proper way to implement complex custom view controllers

Note: I'm not talking about custom view controller transition effects which can be done by using a custom view controllers it's the iOS 5+ API.
I'm talking about transitioning to another view controller, where a view from the presently displayed view controller is animated to the view controller to be presented's view.
EXAMPLE
-you have friendsViewController which displays a list of the current users friends. Each table view cell has a profile picture and name.
-click on a cell, all other cells fade away and the name and picture animate to the top. At this point, UserProfileViewComtroller is displayed.
THEORIES
-I could easily do this by combining the two view controllers, but UserProfileViewComtroller can be launched from other parts of the app.
-if the UserProfileViewControllers view is instantiated, I could convert the coordinates using UIViews methods
I feel like there is a more appropriate/cleaner solution here which is why I'm asking the community for help :)
It seems to me that what you want is exactly about view controllers transition, since you want to do 'something' that would look to the user as if you took a view from old VC and moved it to the new VC.
Then you're in luck, as you're allowed to move a UIView from one view controller to another using [superview addSubview:view] as part of the transition you want to do.
This can be done on any iOS version, although it's easier now as in iOS 7 there's a delegate you write (see <UIViewControllerAnimatedTransitioning> reference) which has access to both VC's view hierarchies and can change them at will (move one view, fade other views) during transition period.
Also, making your new view controller during the transition transparent (or using old controller's snapshot) will help you hide the fact that VC changed.
Not so much an answer but a technique that might inspire a solution. I did an app that had need for a custom transition like this. The original app arranged itself then took a snapshot, so at the last moment the user is looking at an image. The second viewController was created, given coordinates etc, and the image, then shown immediately. It put the image into its view (subview with same bounds).
At this point the second vc has complete control, and can fade in some other content etc. the reverse was more or less as the start - the image is used, swapped, used removed to uncover the real view content.
Note that this took a bit of time to get it working with no glitches etc.
EDIT: if you are concerned in turning the whole original view into an image, then modify the technique. For instance, in the original view, fade all other content to black but the cell, then snapshot the one cell. The second view will start with an all black background, and place the cell image over top it, then go from there.
EDIT2: As mentioned in the comments, you of course push the second view with no animation, so it happens instantaneously. By setting a small image on the second vc, with an agreed upon background, you can quickly "pass the baton" so to speak and let the second controller go to work quickly and seamlessly.

Resources