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

1.4 add a drag view to add gestures

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);

1.6 add shadow effect to the lower part of the picture Shadows have a gradient effect It is a gradient from transparent to black

We can passCAGradientLayerUse this layer to create a gradient This layer is called a gradient layer
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:


gradientL.startPoint = CGPointMake(0, 0); 
gradientL.endPoint = CGPointMake(0, 1);

Gradient left and right settings


gradientL.startPoint = CGPointMake(0, 0); 
gradientL.endPoint = CGPointMake(1, 0);

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


gradientL.colors =
@[(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){
 //Make the gradient effect transparent
 self.gradient.opacity = 0;

 //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
// Copyright  ©  2017 qiwenming All rights reserved.
//

#import "ViewController.h"

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

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

@end

@implementation ViewController

- (void)viewDidLoad {
 [super viewDidLoad];
 //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);

 //Add gesture
 UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(pan:)];
 [self.dragView addGestureRecognizer:pan];

 //Gradient layer
 [self gradientLayer];
}

-(void)gradientLayer{
 //Gradient layer
 CAGradientLayer *gradient = [CAGradientLayer layer];
 gradient.frame = self.bottomIv.bounds;
 //Sets the color of the gradient
 gradient.colors = @[(id)[UIColor clearColor].CGColor,(id)[UIColor blackColor].CGColor];

 [self.bottomIv.layer addSublayer:gradient];
 gradient.opacity = 0;
 self.gradient = 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
 self.gradient.opacity = tranP.y / MAX_H;

 //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){
  //Make the gradient effect transparent
  self.gradient.opacity = 0;

  //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.