@[toc]

preface

IOS development commonly used animation (fixed point zoom pop-ups) application scenarios:

1. The right drop-down menu of membership details

2. The right drop-down menu of the browser

The demo download address: https://download.csdn.net/download/u011018979/16092830

I. Basic Knowledge (CALayer)

Each UIView is associated with a CALayer by default. UIView has three properties, frame, bounds, and Center. CALayer has similar properties, namely frame, bounds, Position, and anchorPoint

1.1 anchorPoint

• The anchorPoint is the equivalent of a pushpin on white paper. Its main function is to serve as a fulcrum for transformation. Rotation is a transformation, as well as translation and scaling.

• In iOS, the value of the anchorPoint is determined by a relative bounds scale value. In the upper left and lower right corners of the white paper, the anchorPoint is divided into (0,0), (1, 1), that is to say, the anchorPoint is defined in the unit coordinate space (also the left hand coordinate system). Similarly, it can be concluded that the anchorPoint at the center point, lower left corner and upper right corner of the white paper is (0.5,0.5), (0,1), (1,0).

1.2 Position: The layer’s position in its superlayer’s coordinate space.

Position is the position coordinate of the anchorPoint in the layer in the superLayer.

Position is relative to suerLayer, and anchorPoint is relative to layer. The two points are a coincidence point in relatively different coordinate Spaces.

• The anchorPoint defaults to (0.5,0.5), which means that the anchorPoint defaults to the center point of the layer.
• Frame. Origin is determined by position and anchorPoint.

If you change the anchorPoint, but you don't want to move the layer which means you don't want to change frame.Origin, then you need to change the position according to the previous formula. A simple derivation yields the following formula:

positionNew.x = positionOld.x + (anchorPointNew.x - anchorPointOld.x)  * bounds.size.width  
positionNew.y = positionOld.y + (anchorPointNew.y - anchorPointOld.y)  * bounds.size.height
Copy the code

If you change the anchorPoint without moving the layer, you can change the anchorPoint and reset the frame again, and the position will automatically change accordingly.

+ (void) setAnchorPoint:(CGPoint)anchorpoint forView:(UIView *)view{
    CGRect oldFrame = view.frame;
    view.layer.anchorPoint = anchorpoint;
    view.frame = oldFrame;
}
Copy the code

The use of 1.3 CGAffineTransformMakeScale & setAnchorPoint example

    /* (0, 0) is the upper left corner, (0, 1) is the lower left corner, (1, 0) is the upper right corner, (1, 1) is the lower right corner */
    CGRect oldFrame = self.frame ;
    [self.layer setAnchorPoint: CGPointMake(1.0f, 0.0f) ];
    self.frame = oldFrame;

    
    [UIView animateWithDuration:0.3 animations:^{
// self.alpha = 0.f;
/ / the self. The tableView. Transform = CGAffineTransformMakeScale (0.001 f to 0.001 f);
        
        self.transform = CGAffineTransformMakeScale(0.001f, 0.001f);
        
// self.tableView.alpha = 0.f;
        self.cover.hidden = YES;
        
    } completion:^(BOOL finished) {
        self.hidden = YES;
        self.transform = CGAffineTransformIdentity;

        
        
    }];
Copy the code

II. Commonly used animations in iOS Development (fixed point zoom pop-ups)

/** 1, click the popup button, let the shadow alpha change from 0 to 1, and the scale of the popover change from 0 to 1 (again using CABasicAnimation) Remove the shadow and popover */ when the animation is complete
- (void)expandView{
    // When shown, the animation extends from the upper right to the lower left; When hidden, the animation redraws from the lower left foot to the upper right corner
    [MemberCardMenuView setAnchorPoint:CGPointMake(0.9f, 0.0f) forView:self];

    self.transform = CGAffineTransformMakeScale(0.001f, 0.001f);

    
    self.hidden = NO;// modify to animation, MemberCardMenuView provides an animation instance method
    
    self.cover.hidden = NO;
    
    self.cover.alpha = 0;
    
    [UIView animateWithDuration:0.3 animations:^{
        self.transform = CGAffineTransformMakeScale(1.f, 1.f);
        self.cover.alpha = 1;
        
    } completion:^(BOOL finished) {
        self.transform = CGAffineTransformIdentity;
        
        


    }];

    
}

- (void)foldView{
    
    /* (0, 0) is the upper left corner, (0, 1) is the lower left corner, (1, 0) is the upper right corner, (1, 1) is the lower right corner */
    
    [UIView animateWithDuration:0.3 animations:^{
        
        self.transform = CGAffineTransformMakeScale(0.001f, 0.001f);


        self.cover.alpha = 0;
        
    } completion:^(BOOL finished) {
        self.hidden = YES;
        self.cover.hidden = YES;
        self.transform = CGAffineTransformIdentity;        
    }];

}

Copy the code

III, complete demo source code

IOS development commonly used animation (fixed point zoom pop-ups) application scenarios:

1. The right drop-down menu of membership details

2. The right drop-down menu of the browser

3, demo download address: https://download.csdn.net/download/u011018979/16092830

see also

• IOS Horizontal Popup View can be performed horizontally for a list of itemsBelow/on the shelf, print the price tag, edit the product information, synchronize the online storeOperations such as popover

Kunnan.blog.csdn.net/article/det…