“This is the fifth day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

preface

IOS development commonly used animation (zooming popover) application scene:

1. Member details drop-down menu on the right

2. The drop-down menu on the right side of the browser

Video address

I Basic Knowledge (CALayer)

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

1.1 anchorPoint

• The anchorPoint is like a drawing pin on a white paper. Its main function is to serve as a fulcrum for transformation, rotation is a transformation, and similarly, translation and scaling.

• In iOS, anchorPoint is defined in a scale relative to bounds. In the upper left and lower right corner of the white paper, anchorPoint is (0,0), (1, 1), that is, anchorPoint is defined in the unit coordinate space (which is also a left-handed 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).

The use of 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

1.2 the position

The layer’s position in its superlayer’s coordinate space.

Position is the position coordinates of the anchorPoint point in the layer in the superLayer.

Position point is relative to suerLayer, anchorPoint point is relative to layer, and the two are a coincidence point of relatively different coordinate space.

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

If you want to change the anchorPoint but you don't want to move the layer and you don't want to change the frame.origin, you need to change the position accordingly according to the previous formula. Simply deduced, the following formula can be obtained:

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

Modifying the anchorPoint without moving the layer can be done by resetting the frame after modifying the anchorPoint, 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

II Common animations in iOS development (zooming pop-ups)

2.1 Core Code

/** 1, Click the eject button, the shadow alpha will change from 0 to 1, and the popover scale will change from 0 to 1 (CABasicAnimation). Remove shadows and popovers after animation is complete
- (void)expandView{
    // Display the animation from the upper right corner to the lower left foot; When hidden, the animation is retracted 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;// Change to animation, MemberCardMenuView provides an instance method of the animation
    
    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

2.2 Complete Demo source code

Go to # applet: iOS reverse search.

see also

IOS Horizontal Popup View supports pop-up menus for commodity listingsUnder/shelves commodities, print commodity price tags, edit commodity information, synchronize online shopOperations such as popover

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