Animation effect Seven: Collision animation

The animation effect in this section is a collision animation, which simulates or emulates a realistic object's collision effect. Look first.

Animation effect Analysis:

1. There are two forms of the same view (self and opponent), so we can consider directly encapsulating a view.

2. Note that the picture inside the view and the circle of the frame may turn into an ellipse. So using the block way of view to achieve this effect is a bit unreliable. We can consider using layer animations.

The view hierarchy chart is as follows:

1. Because each view has its own name, the encapsulated view is inherited from UIView instead of Uiimageview.

2. Photolayer is for displaying pictures.

3. Masklayer is designed to achieve rounded corners.

4. Circlelayer is the circle outside the picture.

With the above analysis, we customize an Avatar view (Avatarview) and it should have a picture and a name of two attributes.

@property (nonatomic, strong) UIImage *image; @property (nonatomic, copy) NSString *name;

then in the avaterview.m file, the corresponding initialization is done first.

-(Instancetype) Initwithcoder: (Nscoder *) Adecoder {if (self = [Super Initwithcoder:adecoder]) {[Self initsubs]    ; } return self;}    -(Instancetype) initWithFrame: (CGRect) Frame {if (self = [Super Initwithframe:frame]) {[Self initsubs]; } return self;}    -(void) initsubs {self.photolayer = [calayer layer];    Self.circlelayer = [Cashapelayer layer];    Self.masklayer = [Cashapelayer layer];    Self.label = [[UILabel alloc] init];    Self.label.font = [Uifont fontwithname:@ "Arialroundedmtbold" size:18.0];    Self.label.textAlignment = Nstextalignmentcenter;        Self.label.textColor = [Uicolor blackcolor];    [Self.layer AddSublayer:self.photoLayer];    Self.photoLayer.mask = Self.masklayer;    [Self.layer AddSublayer:self.circleLayer]; [Self AddSubview:self.label];}    -(void) SetImage: (UIImage *) image {_image = image; Self.photoLayer.contents = (__bridge ID) (image. Cgimage);}    -(void) SetName: (NSString *) name {_name = [name copy]; self.label.text = name;} 

the point to note is that the code self.photoLayer.contents = (__bridge ID) (image. Cgimage) to finish drawing the layer picture. is to draw the image directly above the layer, rather than adding it to the Photolayer by Addsubview or Addsublayer.

We then lay out the elements in the Avatarview, with the following code:

-(void) layoutsubviews {    [super layoutsubviews];    Size the avatar image to fit    cgfloat width = self.bounds.size.width;    CGFloat height = self.bounds.size.height;    CGFloat Photolayerx = (width-self.image.size.width + borderWidth) * 0.5;    CGFloat photolayery = (height-self.image.size.height-borderwidth) * 0.5;    Self.photoLayer.frame = CGRectMake (Photolayerx, Photolayery, Self.image.size.width, self.image.size.height);        Draw the circle    self.circleLayer.path = [Uibezierpath bezierPathWithOvalInRect:self.bounds]. Cgpath;    Self.circleLayer.strokeColor = [Uicolor Whitecolor]. Cgcolor;    Self.circleLayer.lineWidth = BorderWidth;    Self.circleLayer.fillColor = [Uicolor Clearcolor]. Cgcolor;        Size the layer    self.maskLayer.path = Self.circleLayer.path;    self.maskLayer.position = Cgpointmake (0, ten);        Size the label    self.label.frame = CGRectMake (0, height + ten, width, 24);}

The Bezierpathwithovalinrect method is to get its inscribed circle or inner-tangent ellipse in the specified rectangular area. And here is the square, so the resulting avatar shows the circle.

The custom Avatarview is then called in the Viewdidload method in Viewcontroller and its initialization is done, with the following code:

-(void) viewdidload {    [super viewdidload];       Self.opponentAvatar.image = [UIImage imagenamed:@ "Empty"];    Self.myAvatar.image = [UIImage imagenamed:@ "avatar-1"];    Self.myAvatar.name = @ "Me";}

at this point, the UI interface works as follows:

Analysis of the collision animation.

They look like a collision animation, which essentially allows two view to close to each other, changing the presentation of Photolayer and Circlelayer (elliptical) when it reaches a certain position (that is, the two meet).

We use the center of the screen as the datum, and when they collide, the x values of their center points are: center of the screen x-head width/2, center point x + Avatar width/2. So the code for the two final collisions is as follows:

Cgsize avatarsize = self.myAvatar.frame.size;    Theoretically bouncexoffset value is AVATARSIZE.WIDTH/2, but considering the picture has a border, so adjust    cgfloat bouncexoffset = avatarsize.width/1.9;    Cgsize morphsize = Cgsizemake (Avatarsize.width * 0.85, Avatarsize.height * 1.1);        Cgpoint rightbouncepoint = cgpointmake (self.view.frame.size.width * 0.5 + bouncexoffset, self.myavatar.center.y);    Cgpoint leftbouncepoint = Cgpointmake (Self.view.frame.size.width * 0.5-bouncexoffset, SELF.MYAVATAR.CENTER.Y);

the above variables Bouncexoffset and morphsize are explained:

1. The deviation distance should be the head width/2, but here is divided by 1.9, the purpose is to collide, the appearance of the ellipse is more obvious.

2. Morphsize is the form of the collision between the two, it is obvious that the original picture of the width of compression, height stretching. In this way, the time to take the inside cut graphics, is that you see the ellipse effect.

Define a method in Avatarview that is primarily responsible for the effect of animation collisions.

-(void) Bounceoffpoint: (cgpoint) bouncepoint Morphsie: (cgsize) morphsize;

One, the two close and loop execution.

In the method defined above, we write the following code.

Cgpoint originalcenter = self.center;        The smaller the damping value, the greater the elasticity    [UIView animatewithduration:animationduration delay:0.0 usingspringwithdamping:0.8 initialspringvelocity:0.0 options:uiviewanimationoptioncurvelinear animations:^{        self.center = bouncePoint;    } completion:^ (BOOL finished) {                }];        [UIView animatewithduration:animationduration delay:animationduration usingspringwithdamping:0.7 initialspringvelocity:0.1 options:uiviewanimationoptioncurvelinear animations:^{        self.center = originalCenter;    } completion:^ (BOOL finished) {        dispatch_after (Dispatch_time (Dispatch_time_now, (int64_t) (1.0 * nsec_per_sec)), Dispatch_get_main_queue (), ^{<span style= "White-space:pre" ></span>[self bounceOffPoint:bouncePoint Morphsie:morphsize];}        );    

before performing the animation, save the original center point with the variable originalcenter, then use the spring animation to move the avatar to the collision point. Pause for 1 seconds, and then use a similar spring animation to loop through the animation so that the two are close and loop-executed. as follows:

Second, the collision is the ellipse effect

-(void) Bounceoffpoint: (cgpoint) bouncepoint Morphsie: (cgsize) morphsize;

continue adding the following code at the bottom of the above method

CGRect rightmorphframe = CGRectMake (0, Self.bounds.size.height-morphsize.height, Morphsize.width, morphSize.height);    CGRect leftmorphframe = CGRectMake (Self.bounds.size.width-morphsize.width, Self.bounds.size.height- Morphsize.height, Morphsize.width, morphsize.height);    CGRect morphedframe = (originalcenter.x > Bouncepoint.x)? Rightmorphframe:leftmorphframe;        Cabasicanimation *morphanimation = [cabasicanimation animationwithkeypath:@ "path"];    Morphanimation.duration = animationduration;    Morphanimation.tovalue = (__bridge id) ([uibezierpath bezierpathwithovalinrect:morphedframe]. Cgpath);    Morphanimation.timingfunction = [Camediatimingfunction functionwithname:kcamediatimingfunctioneaseout];        [Self.circlelayer addanimation:morphanimation Forkey:nil];    [Self.masklayer addanimation:morphanimation Forkey:nil];

let the two avatar view perform the path effect of the Cabasicanimation animation. The Tovalue value is the ellipse effect of morphedframe, so the two collisions will produce a visual ellipse effect.

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

Animation effect Seven: Collision animation