IOS implementation of the _ios Owl login Interface Animation

The effect is shown below.

Animation to achieve the core:

The core of the animation is the use of the properties in iOS UIView transform , and then based on the size of the coordinates of the four pictures to pan and zoom.
The specific layer structure is shown in the figure:

Note the point:

1. The two-point arm is not required to be cropped, and part of it can block the pink view. So you can put them in a view with the head picture.

2. While the animation arm only exposes the pink text box above part of the method, is to add two arm pictures to a different view, and then set the view of the property is more than UIView part of automatic cropping.

Core code:

 The translational
 self.greenView.transform = cgaffinetransformmaketranslation (0) relative to the initial position;
 The translational
 self.greenView.transform = cgaffinetransformtranslate (self.greenView.transform, 0) relative to the last position;
 2 is a multiple
 self.greenView.transform = Cgaffinetransformmakescale (2, 2) relative to the initial size of the scaling;
 Scales 0.5 times times
 self.greenView.transform = Cgaffinetransformscale (self.greenView.transform, 0.5, 0.5) relative to the last dimension;

Step 1:

Primary view created in Storyborad

1. Put two small point arm pictures and head pictures in a view.

2. Put those two long arms into a view, and then stack the view on the view in 1, where the position corresponds, the hand just can cover the eyes, the view of the property to set to more than part of the automatic cropping. View color is transparent.

3. The final view effect is this.

Step 2:

Given the encapsulation of the code, we can associate this entire view with a UIView class.

1. Drag the 4 pictures in the diagram to the newly created class and Create 4 UIImageView properties. Drag a line across a view

Arm is a long arm
@property (weak, nonatomic) Iboutlet Uiimageview *leftarm;
@property (Weak, nonatomic) Iboutlet Uiimageview *rightarm;
Hand is the two small dots
@property (weak, nonatomic) Iboutlet Uiimageview *lefthand;
@property (Weak, nonatomic) Iboutlet Uiimageview *righthand;
Contains 5 pictures of the entire view
@property (weak, nonatomic) Iboutlet UIView *viewframe;

2. Initialize the control in the Awakefromnib method

Get the position of the arm picture relative to an entire view and the width of the whole view

  The position of the current left hand
  cgfloat leftarmx = self.leftarm.frame.origin.x;
  CGFloat leftarmy = SELF.LEFTARM.FRAME.ORIGIN.Y;
  The current right hand position
  cgfloat rightarmx = self.rightarm.frame.origin.x;
  CGFloat rightarmy = SELF.RIGHTARM.FRAME.ORIGIN.Y;
  Viewframe wide-high
  cgfloat Viewframeh = self.viewFrame.frame.size.height;
  CGFloat Viewframew = self.viewFrame.frame.size.width;

Based on the above data, the position of the arm in the initial state (note: When setting the picture, the arm is blindfolded, the initial state arm is invisible, only two dots (hand))

  In order to facilitate the calculation, the initial position of the right hand is set to the property//15 the size of the
  appropriate adjustment according to the position of the picture
  self.leftarmx =-leftarmx-15;
  Self.leftarmy = Viewframeh-leftarmy;
  SELF.RIGHTARMX = Viewframew-rightarmx-self.rightarm.frame.size.width +15;
  Self.rightarmy = Viewframeh-rightarmy;
  Based on the calculated initial position of the right-hand hand, set the initial position of the right-hand side offset
  self.rightArm.transform = cgaffinetransformmaketranslation (SELF.RIGHTARMX, Self.rightarmy);
  Self.leftArm.transform = Cgaffinetransformmaketranslation (Self.leftarmx, Self.leftarmy);

Add four properties

@property (nonatomic,assign) cgfloat leftarmx;
@property (nonatomic,assign) cgfloat leftarmy;
@property (nonatomic,assign) cgfloat rightarmx;
@property (nonatomic,assign) cgfloat rightarmy;

3. The state of the owl has two kinds, blindfolded and not blindfolded

Easy to call, style: [Self.loginanim startanim:yes];
-(void) Startanim: (BOOL) iscoverd
{
  if (iscoverd) {
    //animation duration 0.25 seconds
    [UIView animatewithduration:0.25 animations:^{
      //Blindfolded 
    }];
  else
  {
    [uiview animatewithduration:0.25 animations:^{
      //not blindfolded, i.e. initial state
    }];
  }

1. Blindfolded state

      The arm is displaced to the blindfolded position
      Self.rightArm.transform = cgaffinetransformtranslate (Self.rightArm.transform,-SELF.RIGHTARMX, -self.rightarmy);
      Self.leftArm.transform = Cgaffinetransformtranslate (Self.leftArm.transform,-SELF.LEFTARMX,-self.leftarmy);
      The small dot moves to the eye position, 30 the size that is manually adjusted according to the picture display position
      cgaffinetransform righthand = cgaffinetransformtranslate ( Self.rightArm.transform,-SELF.RIGHTARMX,-self.rightarmy+30);
      Cgaffinetransform lefthand = cgaffinetransformtranslate (Self.leftArm.transform,-SELF.LEFTARMX,-self.leftarmy+30);
      Small dots gradually decrease
      Self.rightHand.transform = Cgaffinetransformscale (righthand, 0.01, 0.01) during the moving process;
      Self.leftHand.transform = Cgaffinetransformscale (lefthand, 0.01, 0.01);

2. Not blindfolded

      Two arms back to the initialization state
      self.rightArm.transform = cgaffinetransformmaketranslation (Self.rightarmx, self.rightarmy);
      Self.leftArm.transform = Cgaffinetransformmaketranslation (Self.leftarmx, self.leftarmy);
      Two small dots back to the default setting
      Self.rightHand.transform = cgaffinetransformidentity;
      Self.leftHand.transform = cgaffinetransformidentity;

This article describes the Meng version of the owl login animation is completed, is not very interesting? Interested small partners to do it quickly.