The effect is as shown below.

Animation implementation core:

The core of the animation is the use ofin ios uiview transform attribute, and then pan and zoom the four pictures according to the size coordinates.The specific layer structure is shown in the figure:

be careful:

1.Only two points of arms are shown in the picture,No need to crop,Some of them can block the pink view, so you can put them and the head image in a view.

2. And the method of the arm in the animation only exposes the part above the pink text box,It is to add two arm pictures to another view, and then set the properties of this view to automatically crop the part that exceeds the uiview.

Core code:

//translation relative to the initial position
 self.greenview.transform=cgaffinetransformmaketranslation (100, 0);
 //Panning relative to the last position
 self.greenview.transform=cgaffinetransformtranslate (self.greenview.transform, 100, 0);
 //scaling relative to the initial size,2 is a multiple
 self.greenview.transform=cgaffinetransformmakescale (2, 2);
 //Scale 0.5 times relative to the last size
 self.greenview.transform=cgaffinetransformscale (self.greenview.transform, 0.5, 0.5);

step 1:

The main view is created in storyborad

1.Put two small dot arm pictures and head pictures into one view.

2.Put those two long arms into a view, and then stack this view on the view in 1, the position should correspond,Your hand just covers your eyes,This view's properties should be set to automatically crop beyond.The color of the view is transparent.

3.The final view effect is like this.

Step 2:

Considering the encapsulation of the code,We can associate this entire view with auiview class.

1. Drag the 4 pictures in the picture to the newly created class,Build 4uiimageview Properties. Drag the entire view

//arm is a long arm
@property (weak, nonatomic) iboutlet uiimageview * leftarm;
@property (weak, nonatomic) iboutlet uiimageview * rightarm;
//hand are those two dots
@property (weak, nonatomic) iboutlet uiimageview * lefthand;
@property (weak, nonatomic) iboutlet uiimageview * righthand;
//The entire view containing 5 pictures
@property (weak, nonatomic) iboutlet uiview * viewframe;

2. Initialize the control in the awakefromnib method

Get the position of the arm image relative to a whole view, and the width and height of the whole view

 //Position of the current left hand
  cgfloat leftarmx=self.leftarm.frame.origin.x;
  cgfloat leftarmy=self.leftarm.frame.origin.y;
  //Current right hand position
  cgfloat rightarmx=self.rightarm.frame.origin.x;
  cgfloat rightarmy=self.rightarm.frame.origin.y;
  //viewframe width and height
  cgfloat viewframeh=self.viewframe.frame.size.height;
  cgfloat viewframew=self.viewframe.frame.size.width;

Calculated based on the above data,The position of the arm in the initial state (note:the arm is blindfolded when setting the picture,In the initial state, the arm is invisible.(Only two small dots)

 //In order to facilitate future calculations,Set the initial positions of the left and right hands as attributes
  //15 is a size that is appropriately adjusted according to the position of the picture display
  self.rightarmx=viewframew-rightarmx-self.rightarm.frame.size.width +15;
  //According to the calculated initial positions of the left and right hands,Set the left and right hand offset of the initial position
  self.rightarm.transform=cgaffinetransformmaketranslation (self.rightarmx, self.rightarmy);
  self.leftarm.transform=cgaffinetransformmaketranslation (self.leftarmx, self.leftarmy);

Add four attributes

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

3.There are two states of owls,Blindfolded and blindfolded

//Easy to call,Style:[self.loginanim startanim:yes];
-(void) startanim:(bool) iscoverd
  if (iscoverd) {
    //Animation duration is 0.25 seconds
    [uiview animatewithduration:0.25 animations:^ {
      //cover eyes
  } else
    [uiview animatewithduration:0.25 animations:^ {
      //No blindfold, which is the initial state

Blindfolded state

     //The arm is offset to the position where it is blindfolded
      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 position of the eye,30 is the size 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);
      //The small dots gradually decrease during the movement
      self.righthand.transform=cgaffinetransformscale (righthand, 0.01, 0.01);
      self.lefthand.transform=cgaffinetransformscale (lefthand, 0.01, 0.01);

2. not blindfolded

     //The two arms return to the initial state
      self.rightarm.transform=cgaffinetransformmaketranslation (self.rightarmx, self.rightarmy);
      self.leftarm.transform=cgaffinetransformmaketranslation (self.leftarmx, self.leftarmy);
      //Two small dots return to default settings

This completes the cute owl login animation introduced in this article.Isn't it interesting?Interested friends quickly implement it.

  • Previous AngularJS basic ng-list instructions and sample code
  • Next Python regular expression learning guide