Implement the animation effect of adding buttons on the home page of xianyu

Implement the animation effect of adding buttons on the home page of xianyu

Let's take a look at it first:After clicking the Add button in the first figure, two buttons are displayed on the top with a spring-like effect (short time difference)

 

The specific implementation is relatively simple, mainly called by the UIView animation method:

1. During interface initialization, add the pop-up control and add button to the parent View (you can set coordinates and sizes) and set the transparency of the control to 0, in this way, only the Add button is displayed;

2. Add and click a button. The method is as follows:

[UIView animateWithDuration: 1.0 // animation duration (set the time from the pop-up button to the specified position)

Delay: 0.0 // animation delay (set the time to control the order in which the pop-up button pops up)

UsingSpringWithDamping: 0.3 // similar to the spring vibration effect 0 ~ 1 (the value range is from 0 ~ 1. You can give it a try)

InitialSpringVelocity: 0.0 // initial speed

Options: UIViewAnimationOptionCurveEaseInOut // animated transition effect

Animations: ^ {

// Enter the animation to be executed.

// In this case, set (1) the coordinates of the three controls to be popped up; (2) set the transparency of the control to 1; otherwise, the control is not displayed.

} Completion: ^ (BOOL finished ){

// Execute the animation after it is completed

}];

3. The control pop-up process is the opposite of the cancellation process. You can try it on your own (you can use the background Click Event UITapGestureRecognizer ).

Main Code:

// On the initialization page, add controls (one Add button and two price control buttons are displayed; I added a UIImageView and you can change it by yourself)

UIButton * addBtn = [[UIButton alloc] initWithFrame: CGRectMake (100,200, 50, 50)];

AddBtn. layer. cornerRadius = 25; // set it to a circle. The attribute value is half the width of the control.

[AddBtn setBackgroundImage: [UIImage imageNamed: @ "add"] forState: 0];

[AddBtn addTarget: self action: @ selector (addBtnClick) forControlEvents: UIControlEventTouchUpInside];

[Self. view addSubview: addBtn];

 

UIImageView * img0 = [[UIImageView alloc] initWithFrame: CGRectMake (100,200, 50, 50)];

Img0.alpha = 0;

Img0.layer. cornerRadius = 25;

[Img0 setBackgroundColor: [UIColor orangeColor];

[Self. view addSubview: img0];

 

UIImageView * img1 = [[UIImageView alloc] initWithFrame: CGRectMake (100,200, 50, 50)];

Img1.alpha = 0;

Img1.layer. cornerRadius = 25;

[Img1 setBackgroundColor: [UIColor orangeColor];

[Self. view addSubview: img1];

// Add the NIU Click Event (the animation settings of the second pop-up control img1 are omitted)

[UIView animateWithDuration: 1.0

Delay: 0.0

UsingSpringWithDamping: 0.3

InitialSpringVelocity: 0.0

Options: UIViewAnimationOptionCurveEaseInOut

Animations: ^ {

Img0.alpha = 1;

Img0.frame = CGRectMake (30,270, 50, 50 );

} Completion: ^ (BOOL finished) {}];

4. The visual effect is normal, but the effect is achieved. When I write it myself, three widgets are displayed.