"iOS Development Daily Small Note (iii)" Using iOS7 UIKit Dynamics Imitation zaker client home page Dynamic effect

This article is a piece of my "iOS development Daily Small Notes" series, which is recorded in the development work today, can be explained with a short article or a small demo demo small tips. The classification of the article, the content of the knowledge points may be very simple, or with a short code snippet can be achieved, but in my opinion they may give the user experience, code efficiency to some improvement, or have not touched before the technology, very happy to learn, put here to be a bit (^_^). In fact, 90% of the role is to help themselves review, memory, review. If crossing feel too easy, too fragmented, then there can be two options: 1, the "iOS Inquiry" classification, the article there treatise, 2, in the comments in this article mercilessly spit groove, and then turn off the page! Thank!

Always loved Zaker. This app, whether it's an ipad version or iphone version, makes reading much more efficient. Zaker the left and right swipe to toggle context, pull down to the top after exiting reading and so on these gesture operations also make one-handed operation very convenient. The cover of the Zaker, drop down from the top after the drop, to the bottom of the screen, there will be a ball like the rebound effect, the impression before there is a copy of the demo, but has not been carefully studied.

After a recent understanding of the new features of iOS 7 UIKit dynamics, a few lines of code will be able to take the original may need complex animation code to achieve the effect of Ah! Give it a try.

Because it is a "note" category, for Uikit dynamics I do not do a comprehensive explanation, I feel for this 2013 "new" things, have not fully mastered proficiency. So if you happen to see this article and want to get to know uikit dynamics this thing, suggest you can look at the following articles:

1, first beginning something new, want 3 minutes to get started: http://onevcat.com/2013/06/uikit-dynamics-started/

2, want a little more detailed introduction: Http://www.raywenderlich.com/zh-hans/52617/uikit-%E5%8A%9B%E5%AD%A6%E6%95%99%E7%A8%8B

3, Foreigner's article: http://www.objc.io/issue-5/collection-views-and-uidynamics.html

Okay, here we go. A zaker iphone client's drop-down cover (see Demo:https://github.com/pigpigdaddy/uikitdynamicfakezakerdemo here)

First, the expression "http://onevcat.com/2013/06/uikit-dynamics-started/" is quoted:
"Uikit Dynamics is actually a set of animation and interaction system of Uikit." We are now doing UI animations basically using coreanimation or UIView animations. The most important feature of Uikit dynamics is the introduction of real-world power-driven animation into Uikit, such as gravity, hinge connection, collision, suspension and other effects. In a word, that is, the physics of the physical engine into the human uikit. It should be noted that the introduction of Uikit dynamics is not to replace the CA or UIView animation, in most cases the CA or UIView animation is still the best solution, only when the need to introduce realistic interaction design, Need to use Uikit dynamics it is a complement to existing interaction design and implementation. ”

UIKit Dynamics is very simple to use, with the following key steps and elements:

1,Uidynamicitem: A mechanical object, that is, the realization of the <UIDynamicItem> entrusted to the object (such as UIView itself to achieve the <uidynamicitem> So the UIView subclass is a uidynamicitem);

2,uidynamicbehavior: Description of the dynamic behavior of "referencing from Onevcat", used to specify how the Uidynamicitem should move, that is, to define the applicable physical rules. In general, we use subclass objects of this class to describe a set of behavior rules that Uidynamicitem should follow ", meaning that Uidynamicbehavior has many subclasses, such as Uigravitybehavior responsible for gravity, Uicollisionbehavior is responsible for collisions and so on, we can use these classes to apply different motion behavior to uidynamicitem;

3,uidynamicanimator; "Reference from Onevcat" "Animation player, dynamic Behavior (uidynamicbehavior) of the container, added to the container of the behavior will play a role", that is, the final "animation" play, It is necessary to speak all the above Uidynamicbehavior and its subclasses, put into this uidynamicanimator container inside, in order to be unified playback;

4,Referenceview: "Quoted from Onevcat" "equivalent to the mechanical reference system, if your junior high school physics is not taught by Chinese teachers, I think you know what this is. The power UI only works when you want to add mechanics to a uiview that is Referenceview's child view.

5, In addition, it should be noted that Uidynamicbehavior's subclasses usually have many parameters to set, such as friction, elasticity coefficient, gravity direction, collision range, and so on, there are many protocal that trigger certain States can be recalled. These can be used together to achieve a lot of animation effects of miscellaneous.

OK, clear the above, we can design our demo, I created the Viewcontroller in the empty project, for the window Rootviewcontroller, as follows:

1#import"ViewController.h"2 3@interface Viewcontroller () <UICollisionBehaviorDelegate>4 5@property (nonatomic, strong) Uidynamicanimator *animator;6 7 @end8 9 @implementation ViewcontrollerTen  One-(ID) Initwithnibname: (NSString *) Nibnameornil Bundle: (NSBundle *) Nibbundleornil A { -Self =[Super Initwithnibname:nibnameornil Bundle:nibbundleornil]; -     if(self) { the         //Custom Initialization -     } -     returnSelf ; - } +  -- (void) Viewdidload + { A [Super Viewdidload]; at     //Do any additional setup after loading the view. -      - [self initfakezakerview]; - } -  -- (void) Initfakezakerview in { -UIView *zakerfaceview = [[UIView alloc] Initwithframe:cgrectmake (0, -self.view.bounds.size.height, Self.view.bounds.size.width, Self.view.bounds.size.height)]; toZakerfaceview.backgroundcolor =[Uicolor Darkgraycolor]; + [Self.view Addsubview:zakerfaceview]; //******* 1 *******  -      theSelf.animator =[[Uidynamicanimator alloc] initWithReferenceView:self.view]; //******* 2 *******  *uigravitybehavior* Gravitybeahvior =[[Uigravitybehavior alloc] initwithitems:@[zakerfaceview]; $Gravitybeahvior.magnitude =6.0;Panax Notoginseng [Self.animator Addbehavior:gravitybeahvior]; //******* 3 *******  -      theuicollisionbehavior* Collisionbehavior =[[Uicollisionbehavior alloc] initwithitems:@[zakerfaceview]; +[Collisionbehavior Addboundarywithidentifier:@"collisionboundary"Frompoint:cgpointmake (0, self.view.bounds.size.height+1) Topoint:cgpointmake (Self.view.bounds.size.width, self.view.bounds.size.height+1)]; ACollisionbehavior.collisiondelegate =Self ; the [Self.animator Addbehavior:collisionbehavior]; //******* 4 *******  +      -uidynamicitembehavior* Itembehaviour =[[Uidynamicitembehavior alloc] initwithitems:@[zakerfaceview]; $Itembehaviour.elasticity =0.4; $ [Self.animator Addbehavior:itembehaviour]; //******* 5 *******  - } -  the@end

Explain the above 5 steps:

1, I created a current Controller.view size sub-view, set to dark gray, and add it to the top of the screen, for a moment to fall from the top;

2, initialize my Uidynamicanimator property variable, ( note here that the variable is a @property strong pointer, to ensure that the scope of this function, the animation will still work, You cannot use the local strong pointer, because the animation is not playable , and then use Self.view as the reference system view.

3, If you want to drop a dark gray view beyond the top of the screen, you will need a gravitational force, so uigravitybehavior out. First set the item, which is my zakerfaceview. Next, set the "descriptive value" of the gravitational acceleration, gravitybeahvior. magnitude = 6.0; Here I created the term "descriptive value" because: Apple defines its own law of gravity, substituting the unit meters per square second of Newton's mechanics in pixels per square second. But, as Http://www.raywenderlich.com/zh-hans/52617/uikit-%E5%8A%9B%E5%AD%A6%E6%95%99%E7%A8%8B said: "Do you really need to know this?" Not necessarily, you just need to know that bigger g means dropping faster, but understanding the math behind it is good for the pros and cons. "So I use the" description value "to express the magnitude parameter, the larger the value, the faster the object drops. Here's a try, gravitybeahvior. magnitude = 6.0; The time effect is closest to the Zaker cover drop effect.

4, collision Monitoring, interface drop, need to detect collision to the bottom edge of the interface, so Uicollisionbehavior the scene. Still the same, first set item to Zakerfaceview. Then set the edge of the object at the edge of the collision, Uicollisionbehavior provides the following:

1, @property (nonatomic, ReadWrite) BOOL translatesreferenceboundsintoboundary; 2,-(void) settranslatesreferenceboundsintoboundarywithinsets: (uiedgeinsets) insets; 3,-(void) Addboundarywithidentifier: (ID <NSCopying>) identifier forpath: (uibezierpath*  ) Bezierpath; 4,-(void) Addboundarywithidentifier: (ID <NSCopying>) identifier frompoint: (Cgpoint) P1 Topoint: (cgpoint) P2;

Explain separately:1, whether the bounds range of the reference view is the bounds of the collision, 2, set the bounds extent of the reference view as the bounds of the collision uiedgeinsets;3, Add a collision boundary, which is a Bezier curve (very handy?). ); 4, add a collision boundary, which is a line from one point to another.

In this example, I'll use the last method to add a collision boundary to

Cgpointmake(0, self. View. Bounds. Size. Height+1) Topoint: Cgpointmake(self. View. Bounds. Size. Width, self. View. Bounds . Size. Height+1)

The point is to set the boundary to a line of "one cgpoint outside the bottom".

Finally set up the proxy for the collision, in this case I did not implement the method in the proxy because it is not used. But you can take a look. There are the following proxy methods for detecting the various events of a collision:

1- (void) Collisionbehavior: (uicollisionbehavior*) behavior Begancontactforitem: (ID <UIDynamicItem>) item1 withitem: ( ID <UIDynamicItem>) item2 atpoint: (cgpoint) p;2- (void) Collisionbehavior: (uicollisionbehavior*) behavior Endedcontactforitem: (ID <UIDynamicItem>) item1 withitem: ( ID <UIDynamicItem>) item2;3 4 //The identifier of a boundary created with translatesreferenceboundsintoboundary or Settranslatesreferenceboundsintoboundarywithinsets is nil5- (void) Collisionbehavior: (uicollisionbehavior*) behavior Begancontactforitem: (ID <UIDynamicItem>) Item Withboundaryidentifier: (ID <NSCopying>) identifier Atpoint: (Cgpoint) p;6- (void) Collisionbehavior: (uicollisionbehavior*) behavior Endedcontactforitem: (ID <UIDynamicItem>) Item Withboundaryidentifier: (id <NSCopying>) identifier;

5, bounce settings

Can fall, can collide, another one: bounce.

The following parameters of item can be set through Uidynamicitembehavior:

1@property (ReadWrite, nonatomic) cgfloat elasticity;//usually between 0 (inelastic) and 1 (Collide elastically)2@property (ReadWrite, nonatomic) cgfloat friction;//0 being no friction between objects slide along each other3@property (ReadWrite, nonatomic) cgfloat density;//1 By default4@property (ReadWrite, nonatomic) cgfloat resistance;//0:no Velocity Damping5@property (ReadWrite, nonatomic) cgfloat angularresistance;//0:no angular Velocity damping6@property (ReadWrite, nonatomic) BOOL allowsrotation;//Force a item to never rotate

What we need now is an elastic elasticity,ok after trying, itembehaviour. elasticity = 0.4; more appropriate.

Don't forget to add the Uidynamicbehavior subclass to self animator every time.

Run, everything works! The effect is like the GIF picture above the reality!