IOS----Square block animation button implementation

Suddenly remember the last time the interviewer asked a question: How to create a diamond, and let it corresponding click the event, you can open and close the effect. The first reaction was to use button to fill the picture of the diamond, but the examiner said that the area of the click is not sensitive, after all, the button is rectangular. At that time was indeed questioned by the examiner, and later thought up, found so!

You may have seen this function: SetTransform: Yes, the principle of our implementation is to rotate the square button 45 degrees to become a rectangle. Combining precise coordinate calculation, the UIView animation is adopted to realize the opening and closing effect. Isn't it simple?

If you do not want to use the button with ImageView, join gesture recognition to click the event accordingly. Post code:

    [_myimage settransform:cgaffinetransformmakerotation (M_pi_4)];    [_myimage2 settransform:cgaffinetransformmakerotation (M_pi_4)];    [_myimage3 settransform:cgaffinetransformmakerotation (M_pi_4)];    [_myimage4 settransform:cgaffinetransformmakerotation (M_pi_4)];

The above is the four image that will be declared rotated 45 degrees. Next is the animation:

    [UIView animatewithduration:0.7 animations:^{        //move picture        _myimage.center = Cgpointmake (_myimage.center.x, _ Myimage.center.y-length);        _myimage2.center = Cgpointmake (_myimage2.center.x-length, _myimage2.center.y);        _myimage3.center = Cgpointmake (_myimage3.center.x+length, _myimage3.center.y);        _myimage4.center = Cgpointmake (_myimage4.center.x, _myimage4.center.y+length);        length =-length;    }]

It is convenient to move the center of each picture. Here I have achieved four different animation effects, see the code for details.

The final effect is as follows: