Chinese New Year , All kinds of parties are indispensable , Nowadays, most parties are group buying , And then there are all kinds of APP... When using duniang glutinous rice ( It's not advertising , It's not advertising , It's not advertising !), Accidentally noticed an interesting effect in its home page , Those are those. “ Button ” Zoom animation when clicking , There is a kind of “ press down ” To catch up with , Just happened to make a recording button a while ago “ Inching ” effect , I can't help encapsulating this button effect :GitHub

Dynamic zoom button ,“ press down ” The effect of
demo The background image of the button in is taken from the home page of douniang glutinous rice , For reference only !

The home page of glutinous rice should be collectionView Layout ? Maybe , It's just a pure implementation effect , The buttons that encapsulate the system .

About this effect , First of all, I have to mention a concept —— Inching .

1. About “ Inching ” Button

The concept of inching , I moved from the hardware side .
When I used to be a single chip microcomputer , Button is a very important peripheral device , Hardware keys in the preparation of code to achieve the function , There are generally two effects : Button with lock , Button without lock .
The so-called button with lock , Just click the button and let go , Then we can realize the corresponding function , For example, we used to use the key, the number keys of mobile phones are like this .
The so-called button without lock , That's what we're talking about here “ Inching ”, seeing the name of a thing one thinks of its function , Just click and move , Let go and stop . MCU is often used in the scene of motor control , On our software side , A more common application scenario is “ Record button ”( Wechat voice god horse ).
The record button records when you click it , Once you let go , The recording will stop .
For the sake of illustration , Write the following effect for demonstration ,button Of showsTouchWhenHighlighted Property opens to indicate that the button is being clicked .

Click the button effect

2. Realization “ Inching ” Button

The implementation of the button “ Inching ” It's very simple :

 // When pressed 
[myButton addTarget:self
// When you let go
[myButton addTarget:self
forControlEvents:UIControlEventTouchUpInside | UIControlEventTouchUpOutside];

Next, in the button click response implementation :

- (void)pressedEvent:(id)sender

It's a response to a button press , For example, the recording starts and continues .

- (void)unpressedEvent:(id)sender

Release the button ( Stop clicking ) Time response , At this point, the execution ends the recording .

The two responses combine , Also realized the hardware button “ Inching ” effect ( The hardware button is determined according to the high and low level , So the code implementation is very simple , Interested in SCM friends can refer to the relevant information , But the level when the hardware button is pressed “ shake ” It's a big headache ).

Here's a little more , Namely ControlEvents, What's written here is UIControlEventTouchUpInside | UIControlEventTouchUpOutside, It means inside or outside the button area ( After pressing , Fingers moving, dragging ) Let go ( Stop clicking ), It will be carried out “ Let go and respond ”, In some cases, we should pay attention to distinguish , For example, what to do next “ Zoom button ”. If we just write UIControlEventTouchUpInside, that , We let go outside the button area , That is, after clicking , Finger dragging , Move to the button frame Outside ,unpressedEvent The response is not executed , We have thus achieved a “ Cancel ” effect , Of course, this is not used in the recording button .

3. Animation zoom button

There's a lot of talk ahead , Now let's get to the point , Actually , There's nothing to say about the main topic , To achieve this effect of glutinous rice , It's just the top “ Action splitting ” thought , We just press the button to zoom the animation , And the real response after the animation is executed , Just write them in two response functions .

 // Button press events The button zooms out 
- (void)pressedEvent:(JXTPushInButton *)btn
// The scale must be greater than 0, And less than or equal to 1
CGFloat scale = (_buttonScale && _buttonScale <=1.0) ? _buttonScale : defaultScale;//defaultScale The default is 0.9 [UIView animateWithDuration:animateDelay animations:^{
btn.transform = CGAffineTransformMakeScale(scale, scale);
// Button release event Button reset Execute response
- (void)unpressedEvent:(JXTPushInButton *)btn
[UIView animateWithDuration:animateDelay animations:^{
btn.transform = CGAffineTransformMakeScale(1.0, 1.0);
} completion:^(BOOL finished) {
// Execute action response
if (self.clickBlock) {
 Press the button to actually perform the response , It's encapsulated in block in ,button I'll send it to github The code in , It's easy to call , In a word :
 JXTPushInButton * btn = [JXTPushInButton touchUpOutsideCancelButtonWithType:UIButtonTypeCustom frame:CGRectMake(, , ScreenWidth - , ) title:@" Button -1" titleColor:[UIColor blackColor] backgroundColor:[UIColor redColor] backgroundImage:nil andBlock:^{
NSLog(@"frame Let go of the inside , Line button -1");
[self.view addSubview:btn];

iOS (UIButton encapsulation ) Imitation of glutinous rice “ Button ” More articles about the effect of the

  1. Imitation Taobao paging button effect is simple and beautiful, easy to use JS Paging controls

    Paging button idea :  1. Less than 9 page , All show   2. Greater than 9 page ,1.2 Page display , The middle page is centered on the current page , Leave two pages before and after   Attached is a complete example of the compressed package download . Updated to the latest version   Look at the renderings first :  01 Input box focus effect   ...

  2. iOS Animation queue — Imitation Yingke Brush Gift effect Recently, I am studying the related knowledge of live broadcast , I saw many excellent open source projects on the Internet , But I didn't see the effect of Yingke brushing gifts , So the hands itch ...

  3. iOS Alipay home page refresh layout effect

    The code address is as follows : XYAlipayRefreshDemo Running effect Animation effect analysis 1.UI It needs to change , When sliding up , Top part ...

  4. Android Control Gridview To achieve the imitation of Alipay home page ,Fragment The bottom button toggles and logs in the round avatar

    This case is mainly about Android Control Gridview( squared paper for practicing calligraphy ) Perfect implementation of imitation Alipay home page , Includes add and remove functions :Fragment The effect of the bottom button switching , There are four modules , Login page, round head, etc , The initial layout of a small project . effect ...

  5. iOS Imitation Alipay home effect

    The code address is as follows : First look at the effect The red status bar is due to the use of mobile phone screen recording . 1. Problem analysis 1. The navigation bar A There are two sets of controls , With tabl ...

  6. iOS:UIButton Button details

    UIButton Detailed introduction : One . The properties that buttons have : @property(nonatomic,readonly) UIButtonType buttonType;  // Button shape type @property ...

  7. iOS UIButton The space between text and picture can be adjusted at will

    The code address is as follows : Preface In development , We often come across a situation like this , It's just a button with pictures and words on it , But often design is not what we want ...

  8. IOS UIButton Usage details

    This code dynamically creates a UIButton, And the related common attributes are listed . I hope you found that useful .   // Here you create a button with a rounded rectangle UIButton *button1 = [UIButton buttonWi ...

  9. iOS UIButton Vertical layout of picture and text Solution

    Achieve the effect as shown in the figure : This is a UIButton, Need to change image and title The relative position . The solution is as follows : // Set text offset : Offset the image height down + Offset picture width to the left ( The offset is based on [ picture ] It's the size , This is the key )b ...

Random recommendation

  1. CSS hack technology

    First of all, we need to understand a concept CSS hack Different browsers , such as IE6.IE7.IE8,Mozilla Firefox etc. , Yes CSS The results of support and parsing are different , Therefore, it will lead to different page effects generated by the same page . At this time we ...

  2. [salesforce] URLFOR function finally

    While developing your Visualforce pages you may need to be able to obtain the URL of certain actions ...

  3. interrupt —— Definition and initialization of interrupt descriptor table ( One ) ( be based on 3.16-rc4)

    1. Definition of interrupt descriptor table (arch/x86/kernel/traps.c) gate_desc debug_idt_table[NR_VECTORS] __page_aligned_bss; A description of the definition ...

  4. Linux/Unix Next, set the timing task

    Unix The system provides cron and at command , So that the system and users can run certain programs regularly , Instead of starting it manually . Use cron Used to execute a command periodically , To use it , Must edit crontab file . The system defaults to /etc/cront ...

  5. SDK Step on the pit record

    No1: Unity2017.1 Version exported android The project is to Android Studio It's very difficult to run on the road ,Unity2017.3 or 4 Version export is OK . And it turns out that gradle There are differences in the files , It is hereby noted that 1 ...

  6. Echarts Customize tootips

    Due to business requirements , Now to customize tootips; The design draft is as follows : The code is as follows : app.title = ' Axis scales align with labels '; var str1 = "top:-20px;border:0px s ...

  7. 100837D

    For a week .. Today I watched vj On  sysuteam7  Three and a half years ago .. Deeply aware of their own IQ problems . First, find out the offset of each point from the center . It's really out of order , But we can sort by polar angle , It must be a cyclic shift ...

  8. [TJOI2015] linear algebra ( Minimum cut )

    Title Description Give a N*N Matrix B And a 1*N Matrix C. Find out one 1*N Of 01 matrix A. bring D=(A*B-C)*A^T Maximum . among A^T by A The transpose . Output D Answer key Look at the formula above and find that , When one bij When there is contribution, when ...

  9. MySQL Lossless reproduction ( turn )

    MySQL5.7 New characteristics :lossless replication Lossless reproduction ...

  10. 05_ssm Basics ( 3、 ... and ) And Spring Basics

    11.spring Getting started 12.spring_HelloWord Program Implementation steps : 0. find spring Compressed package , And extract the 1. Copy jar package 2. Add main profile ( The official document is about 28 page ) 3. Use... In tests 13 ...