iOS Transitions Research Notes

Objective

As a result of the project, we've been researching iOS transitions for some time. For me this is a field that has not been involved before, so it is necessary to record the process of research and some of your own understanding.

Why Custom cut scenes?

If you have a look at the interface design and interaction changes of material design and recent well-known apps such as fast, one-car, etc., you will find a new trend: smooth page transitions. The aim is to make the experience of the app more fluid by allowing users to feel as little as possible about the abrupt transitions between pages. The two commonly used transitions for iOS native: Push/pop and present, and the current trend is obviously not quite in line, so the meaning of custom transitions is reflected.

Introduction to Transition-ios Custom transitions

Because before the blog has made a very detailed introduction to the custom scene, I will not repeat, the specific reference here IOS7 Custom View Controller switching effect (PS: Thanks to the author). The author's demo I also have downloaded to see, he is a separate class for each cut-out animation, and then implement the switch in the Uiviewcontroller of the proxy, in the proxy to return the corresponding animation effect. I am very much in favor of encapsulating separate classes for a cut-off animation, but I do not think it is particularly desirable to implement the proxy for switch transitions in uiviewcontroller, so I made a change to my implementation later. The end result is that you can implement custom transitions by invoking only one interface in Uiviewcontroller.

Analysis of my design

First, I encapsulated a singleton pattern Mbtransition base class, with a singleton pattern for two reasons:

1. In one app, there's only one scene in the same scene.
2. After implementing a singleton, the cut object does not need to rely on a uiviewcontroller.

Then the. m file provides several proxies for this class to implement the cut animation

#pragma mark Uinavigationcontrollerdelegate methods//Push/pop proxy for custom transitions//Parameters://Navigationcontroller: Navigation///Operation: navigation operation: Push/pop/none, which can be used to control which navigation is used with custom transitions//FROMVC: Uiviewcontroller to perform push operations//ToVC: Push Uiviewcontroller- (ID<UIViewControllerAnimatedTransitioning>) Navigationcontroller: (Uinavigationcontroller*) Navigationcontroller animationcontrollerforoperation: (uinavigationcontrolleroperation) O Peration Fromviewcontroller: (Uiviewcontroller*) Fromvc Toviewcontroller: (Uiviewcontroller*) ToVC {return  Self;}//present proxy for custom transitions//Parameters://presented: Uiviewcontroller by present//Presenting: Executing present Uiviewcontroller//Source: Uiviewcontroller that initiates the present (PS: Uiviewcontroller that is performing present and initiating present is different, If source is a uiviewcontroller under a uinavigationcontroller, then presenting is the Uinavigationcontroller, If source is not within a control like Uinavigationcontroller or Uitabbarcontroller, then presenting is the source itself)- (ID<UIViewControllerAnimatedTransitioning>) Animationcontrollerforpresentedcontroller: (Uiviewcontroller*) presented Presentingcontroller: (Uiviewcontroller*) Presenting Sourcecontroller: (Uiviewcontroller*) source{return  Self;}//Dismiss proxy for custom transitions//Parameters://Dismissed: Uiviewcontroller that was dismiss off-(ID<UIViewControllerAnimatedTransitioning>) Animationcontrollerfordismissedcontroller: (Uiviewcontroller*) dismissed{return  Self;}#pragma mark-uiviewcontrollercontexttransitioning//To implement specific custom transitions animation effect of the agent, this agent is to achieve the core of animation effect//Parameters://Transitioncontext: Contextual information during transitions- (void) Animatetransition: (ID<UIViewControllerContextTransitioning>) transitioncontext{}//proxy for the time of the cut animation//Parameters://Transitioncontext: Contextual information during transitions- (Nstimeinterval) Transitionduration: (ID<UIViewControllerContextTransitioning>) transitioncontext{return  Self. Duration;}

Through the above several agents we can know: Push/pop and present when the scene animation proxy is not the same, so I set up a cut type of enumeration, to control the custom transitions in which interaction is available:

enumTransitionType{    // Push/Pop过场    // Present过场}TransitionType;

Then - (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext we return in the proxy self.duration , so we need to add a variable to the. h file to save the duration of the cut animation:

@property (nonatomicassignNSTimeInterval duration;

Next we analyze (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext some of the things we do in the agent:

2. Get two uiviewcontroller

    Transitioncontext  for transitions to the scene Hljs AutoHotkey ">//here Fromvc and ToVC represent that the transitions were switched from FROMVC to ToVC. For example, from a  interface push to the B interface, where FROMVC is a  interface, TOVC is the B interface, And when the B interface is pop to a  interface, where the FROMVC is the B interface, TOVC is a  interface Span class= "Hljs-label" >uiviewcontroller *fromvc = [Transitioncontext viewcontrollerforkey:  Uitransitioncontextfromviewcontrollerkey] uiviewcontroller *TOVC = [Transitioncontext viewcontrollerforkey:  Uitransitioncontexttoviewcontrollerkey]  

4. by transitionContext obtaining the UIView to perform the switchover

   // 所有的切换动画都是基于container来实现的UIView *container = [transitionContext containerView];

6. By transitionContext getting to the duration of the cut

   NSTimeInterval duration = [self transitionDuration:transitionContext];

7. Finally transitionContext , comparing the FROMVC and ToVC saved when switching between Fromvc and ToVC and push/present at the time of the cut, it is possible to know whether push/present or Pop/dismiss is being performed, thus push/ Present and Pop/dismiss customize different animation effects.

   - (BOOL)isReversed:(UIViewController *)fromVC ToVC:(UIViewController *)toVC{    return !([self.fromVC class] == [fromVC class] && [self.toVC class] == [toVC class]);}

   So we need to add two member variables in the. h file to save Fromvc and ToVC when push/present:

   @property (nonatomicweakUIViewController *fromVC;@property (nonatomicweakUIViewController *toVC;

9. Next is the specific part of the scene animation, in fact, the combination of Fromvc view, TOVC View and container do some animation effect, because there is no difference with the normal animation, so this Part I do not specifically described.

The last is the interface provided to the external call, which reads as follows:

-(void) Settransitionwithfromviewcontroller: (Uiviewcontroller*) Fromvc Toviewcontroller: (Uiviewcontroller*) ToVC Transitiontype: (Transitiontype)type Duration:(Nstimeinterval)Duration{ Self.Fromvc=FROMVC; Self.ToVC=ToVC; Self.Duration = Duration;if(type ==Transitiontypepush) { Self.Fromvc.Navigationcontroller.Delegate=  Self; }Else if(type ==Transitiontypepresent) { Self.Fromvc.Transitioningdelegate=  Self; Self.ToVC.Transitioningdelegate=  Self; }}

What the above code snippet does is save some parameters and then set the appropriate proxy according to Transitiontype.

Characteristics

1. If you want to implement other custom transitions, simply inherit the mbtransition and rewrite the (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext proxy.
2. The user simply invokes an interface to implement a custom cut and reduces code coupling.

Interactive Toggle Animations

Interactive animation mainly refers to the user can control the entire animation through gestures, this part of the I have not yet studied ...

Hit some pits

1. When Uiviewcontroller is a childviewcontroller of Uitabbarcontroller or Uinavigationcontroller, the [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey] [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey] Get the Uiviewcontroller is actually uitabbarcontroller or uinavigationcontroller, so when calling the interface, pay attention to the incoming FROMVC and ToVC In fact, this uiviewcontroller uitabbarcontroller or Uinavigationcontroller.

2. If Push/pop is used, when Fromvc belongs to a childviewcontroller of Uitabbarcontroller and ToVC Uitabbarcontroller is not displayed on Uitabbar, Uitabbarcontroller's Uitabbar can cause a lot of trouble:

   • If you use set hidesbottombarwhenpushed to True, then Uitabbar animations cannot be customized, only the default right-to-left and left-to-right.
   • If you use a custom way to show and hide Uitabbar, because of the reason of AutoLayout, later problems will be more ...

   So in this case, it is recommended to use the present way to switch to the new interface, of course, if you have a good solution also want to share to me, thank you!

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

iOS Transitions Research Notes