# Image folding effect based on IOS

Time：2022-5-4

This example shares the specific code of IOS to realize the image folding effect for your reference. The specific contents are as follows

1、 Analysis and description

1.1 analysis results

When the mouse drags on the picture, there is a folding effect on the picture
This folding effect is actually a rotation of the top half of the picture around the X axis
The rotation of our pictures revolves around the anchor point So if it’s a picture, you can’t just rotate the upper part of the figure above
It’s actually a method of combining two pictures into one picture,
Implementation scheme Get the upper and lower pictures. The upper picture only shows the upper part and the lower picture only shows the lower part

1.2 if only the top half or the bottom half of the picture is shown?

Use an attribute of calayer, contentsrect = cgrectmake (0, 0, 1, 0.5);
Contentsrect is the range to be displayed Its value range is (0 ~ 1);
If you want the upper picture to display only the upper part, contentsrect set cgrectmake (0, 0, 1, 0.5); Let the lower picture show only the lower part. Contentsrect is set to cgrectmake (0, 0.5, 1, 0.5)

1.3 rotate the upper figure around the anchor point, but the default anchor point of the figure is in the middle, so set the anchor point of the upper figure at the bottom

Modify the anchor point of the upper part to anchorpoint = cgpointmake (0.5, 1)
But after fixing the anchor point, there will be a problem, that is, the picture in the upper part will go up There is a gap between the two pictures
The solution is * Put the two pictures together After setting the anchor point of the upper part of the picture The upper part of the picture will go half the way up
Then set the anchor point of the lower picture Set the anchor point value in the lower figure as anchorpoint = cgpointmake (0.5, 0);
In this way, the effect of combining two pictures into one can be achieved

Get a view that is the same as the picture V and add the gesture to the uiview
When adding gestures, rotate the upper part of the picture in the gesture method
It is used to calculate the rotation angle. The rotation angle of the upper part is determined according to the y value of dragging the finger downward Rotate exactly 180 degrees when pointing to the bottom
Suppose the finger moves to the lowest part of 200 The degree of rotation should be angle = transp Y * M_ PI / 200.0;

1.5 when dragging, make it have a three-dimensional production effect

The stereoscopic effect is to have a feeling of being close to the big and far from the small
You want to set the stereo effect To modify an M34 value in its transform,
Set it to make an empty transfrom3d

``````
CATransform3D transform = CATransform3DIdentity;``````

200.0 can be understood as the vertical distance between human eyes and mobile phone screen,

``````
transform.m34 = - 1 / 200.0;
transform = CATransform3DRotate(transform, angle, 1, 0, 0);
``````

Gradient layers also need to be added to a layer before they can be displayed
There is a color attribute in the gradient layer This property is to set the color to gradient It is an array
The array requires us to pass inCgcolorref type, so we need to turn Yan into cgcolor
However, after being converted to cgcolor, the array will recognize that it is an object, and it is necessary to tell the compiler that it is an object by adding an (ID) in front of it
You can set the direction of the gradient:
adoptStartpoint and endpointTwo attributes to set the direction of the gradient Its value range is also (0 ~ 1)
The default up and down gradient is:

``````
``````

``````
``````

You can set the position of the gradient from one color to the next
Set the property to locations = @ [@ 0.3, @ 0.7]
The gradient layer also has an opacity attribute This attribute coordinates the opacity of the gradient layer
Its value range is also 0-1. When it is 0, it represents transparency. When it is 1, the code is opaque
So we can add a gradient layer to the lower part of the picture. The color of the gradient layer is from transparent to black

``````
@[(id)[UIColor clearColor].CGColor,(id)[UIColor blackColor].CGColor];``````

There is no gradient at first, so you can set the gradient layer to transparent state
Then, as you drag your finger down, the transparency of the gradient layer changes
When you drag your finger to the bottom, the transparency of the gradient layer is exactly 1

``````
CGFloat opacity = 1 * transP.y / 200.0;
``````

1.7 there is a rebound animation after the finger is released

After the finger is released, we add a bounce animation.
When the gesture status is end:
1. Change the transparency of the gradient to 0
2. Deformation before condition

``````//Release the finger and reset the picture
if(pan.state == UIGestureRecognizerStateEnded){

//Delay: animation delay execution time
//Damping: elasticity coefficient. If it is set to be too small, the elasticity will be greater
//Velocity: initial velocity of elasticity
//Options: what style of animation is used? The beginning is slow and the end is slow,
[UIView animateWithDuration:1 delay:0 usingSpringWithDamping:0.1 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{
//Upper picture reset
self.topIv.layer.transform = CATransform3DIdentity;
} completion:nil];
}``````

2、 Code

``````//
// ViewController.m
// 03_ UIView74_ Picture folding
//
//Created by Qiwen on 17 / 7 / 19
//

#import "ViewController.h"

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *topIv;
@property (weak, nonatomic) IBOutlet UIImageView *bottomIv;
@property (weak, nonatomic) IBOutlet UIView *dragView;

#define MAX_H self.dragView.bounds.size.height

@end

@implementation ViewController

//Let the upper layer display the upper half
self.topIv.layer.contentsRect = CGRectMake(0, 0, 1, 0.5);
self.topIv.layer.anchorPoint = CGPointMake(0.5, 1);

//Let the lower picture show only the lower half
self.bottomIv.layer.contentsRect = CGRectMake(0, 0.5, 1, 0.5);
self.bottomIv.layer.anchorPoint = CGPointMake(0.5, 0);

UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(pan:)];

}

//Sets the color of the gradient

}

-(void)pan:(UIPanGestureRecognizer*)pan{
//Gets the offset of the current finger
CGPoint tranP = [pan translationInView:self.dragView];

//Maximum rotation 180
//180 when the finger offset is the height of dragview
CGFloat angle = tranP.y * M_PI / MAX_H;

CATransform3D transform = CATransform3DIdentity;

//Set stereo effect (near large far small)
//Set the distance between the eyes and the screen
transform.m34 = -1 /300.0;

//Sets the opacity of the gradient layer

//Rotate the upper picture around the X axis
self.topIv.layer.transform = CATransform3DRotate(transform, -angle, 1, 0, 0);

//Release the finger and reset the picture
if(pan.state == UIGestureRecognizerStateEnded){

//Delay: animation delay execution time
//Damping: elasticity coefficient. If it is set to be too small, the elasticity will be greater
//Velocity: initial velocity of elasticity
//Options: what style of animation is used? The beginning is slow and the end is slow,
[UIView animateWithDuration:1 delay:0 usingSpringWithDamping:0.1 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{
//Upper picture reset
self.topIv.layer.transform = CATransform3DIdentity;
} completion:nil];
}
}

@end``````

3、 Illustration

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support developpaer.

## JMeter – the difference between HTTP request following redirection and automatic redirection

Automatic redirection: After httpclient receives the request, if the request contains a redirection request, httpclient can jump automatically, but only for get and head requests. If this item is checked, the “follow redirection” will be invalid; Automatic redirection can automatically turn to the final target page, but JMeter does not record the content of the […]