快捷導(dǎo)航

基于iOS實(shí)現(xiàn)圖片折疊效果

更新時(shí)間：2017年07月22日 11:55:07 作者：憤怒的小明

這篇文章主要為大家詳細(xì)介紹了基于iOS實(shí)現(xiàn)圖片折疊效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了iOS實(shí)現(xiàn)圖片折疊效果的具體代碼，供大家參考，具體內(nèi)容如下

一、分析與說明

1.1 分析界效果

當(dāng)鼠標(biāo)在圖片上拖動(dòng)的時(shí)候,圖片上有一個(gè)折疊的效果.
這種折疊效果其實(shí)就是圖片的上半部分繞著X軸做一個(gè)旋轉(zhuǎn)的操作.
我們圖片的旋轉(zhuǎn)都是繞著錨點(diǎn)進(jìn) 旋轉(zhuǎn)的.所以如果是一張圖片的,辦不到只上圖的上半部分進(jìn) 個(gè)旋轉(zhuǎn).
其實(shí)是兩張圖片, 把兩張圖片合成一張圖片的方法,
實(shí)現(xiàn)方案.弄上下兩張圖 ,上部圖片只顯示上半部分, 下部圖片只顯示下半部分.

1.2 如果讓張圖只顯上半部分或者下半部分?

利用 CALayer的一個(gè)屬性contentsRect = CGRectMake(0, 0, 1, 0.5);
contentsRect就是要顯示的范圍.它是取值范圍是(0~1);
想讓上部圖片只顯示上半部分contentsRect設(shè)置CGRectMake(0, 0, 1, 0.5); 讓下部圖片只顯示下半部分contentsRect設(shè)置為CGRectMake(0, 0.5, 1, 0.5)

1.3 讓上部圖繞著錨點(diǎn)進(jìn) 旋轉(zhuǎn),但是圖的默認(rèn)錨點(diǎn)在中 ,所以要把上部圖的錨點(diǎn)設(shè)在最底部.

修改上部分的錨點(diǎn)為anchorPoint = CGPointMake(0.5, 1)
但是修過錨點(diǎn)之后, 會(huì)出現(xiàn)一個(gè)問題,就是上部分的圖片,會(huì)往上走.導(dǎo)致兩個(gè)圖片中間有一個(gè)空隙.
解決辦法為*.把兩張圖片放到一起.設(shè)置上部分圖片的錨點(diǎn)后.上部分圖會(huì)上走一半的距離.
然后再設(shè)置下部圖片的錨點(diǎn).設(shè)置下部圖錨點(diǎn)值為anchorPoint = CGPointMake(0.5, 0);
這樣就能夠辦到兩張圖片合成一張的效果.

1.4 添加一個(gè)添加手勢(shì)的view(Drag View)

弄一個(gè)和圖片V相同的View,把手勢(shì)添加給這個(gè)UIView.
添加完手勢(shì)時(shí), 在手勢(shì)方法當(dāng)中去旋轉(zhuǎn)上部分圖片.
用來計(jì)算旋轉(zhuǎn)的角度,上半部分旋轉(zhuǎn)的角度是根據(jù)手指向下拖動(dòng)的Y值來決定.當(dāng) 指到最下部時(shí)正好旋轉(zhuǎn)180度.
假設(shè)手指移動(dòng)到最下部為200.那旋轉(zhuǎn) 度應(yīng)該為 angel = transP.Y * M_PI / 200.0;

1.5 拖動(dòng)的時(shí)候讓它有一個(gè)立體產(chǎn)效果

立體的效果就是有一種近大遠(yuǎn)小的感覺.
想要設(shè)置立體效果.要修改它的TransForm當(dāng)中的一個(gè)M34值,
設(shè)置方式為弄一個(gè)空的TransFrom3D

CATransform3D transform = CATransform3DIdentity;

200.0可以理解為,人的眼睛離手機(jī)屏幕的垂直距離,

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

1.6 給下部分圖片添加陰影的效果.陰影是有漸變的效果.是從透明到黑色的一個(gè)漸變.

我們可以通過CAGradientLayer這個(gè)層來創(chuàng)建漸變.這個(gè)層我們就稱它是一個(gè)漸變層.
漸變層也是需要添加到一個(gè)層上面才能夠顯.
漸變層里面有一個(gè) colors屬性.這個(gè)屬性就是設(shè)置要漸變的顏色.它是一個(gè)數(shù)組.
數(shù)組當(dāng)中要求我們傳入都是 CGColorRef類型,所以我們要把顏轉(zhuǎn)成CGColor.
但是轉(zhuǎn)成CGColor后,數(shù)組就認(rèn)識(shí)它是一個(gè)對(duì)象了,就要通過在前面加上一個(gè)(id)來告訴編譯器是一個(gè)對(duì)象.
可以設(shè)置漸變的方向:
通過startPoint和endPoint這兩個(gè)屬性來設(shè)置漸變的方向.它的取值范圍也是(0~1)
默認(rèn) 向?yàn)樯舷聺u變?yōu)?

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

設(shè)置左右漸變

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

可以設(shè)置漸變從一個(gè)顏色到下一個(gè)顏色的位置
設(shè)置屬性為locations = @[@0.3,@0.7]
漸變層同時(shí)還有一個(gè)opacity屬性.這個(gè)屬性是調(diào)協(xié)漸變層的不透明度.
它的取值范圍同樣也是 0-1, 當(dāng)為0時(shí)代表透明, 當(dāng)為1明,代碼不透明.
所以我們可以給下部分圖片添加一個(gè)漸變層,漸變層的顏色為從透明到黑.

gradientL.colors =
@[(id)[UIColor clearColor].CGColor,(id)[UIColor blackColor].CGColor];

開始時(shí)沒有漸變,所以可以把漸變層設(shè)為透明狀態(tài).
之后隨著手指向下拖動(dòng)的時(shí),漸變層的透明度跟著改變.
當(dāng)手指拖到最下面的時(shí)候,漸變層的透明度正好為1.

CGFloat opacity = 1 * transP.y / 200.0;

1.7 在手指松開后有一個(gè)反彈動(dòng)畫

在手指松開后，我們添加一個(gè)反彈動(dòng)畫。
當(dāng)手勢(shì)狀態(tài)為結(jié)束時(shí)：
1.把漸變的透明度改為 0
2.情況之前的形變

//手指松開，圖片復(fù)位
if(pan.state == UIGestureRecognizerStateEnded){
 //把漸變效果透明
 self.gradient.opacity = 0;

 //delay:動(dòng)畫延時(shí)執(zhí)行時(shí)間
 //Damping:彈性系數(shù),設(shè)的超小, 彈性就越大
 //Velocity:彈性的初始速度
 //options:以什么樣樣式來做動(dòng)畫,開始有結(jié)束慢,
 [UIView animateWithDuration:1 delay:0 usingSpringWithDamping:0.1 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{
  //上部分圖片復(fù)位
  self.topIv.layer.transform = CATransform3DIdentity;
 } completion:nil];
}

二、代碼

//
// ViewController.m
// 03_UIView74_圖片折疊
//
// Created by 杞文明 on 17/7/19.
// Copyright © 2017年 杞文明. 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];
 //讓上部圖層顯示上半部分
 self.topIv.layer.contentsRect = CGRectMake(0, 0, 1, 0.5);
 self.topIv.layer.anchorPoint = CGPointMake(0.5, 1);

 //讓下部圖片只顯示下半部分
 self.bottomIv.layer.contentsRect = CGRectMake(0, 0.5, 1, 0.5);
 self.bottomIv.layer.anchorPoint = CGPointMake(0.5, 0);

 //添加手勢(shì)
 UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(pan:)];
 [self.dragView addGestureRecognizer:pan];

 //漸變層
 [self gradientLayer];
}

-(void)gradientLayer{
 //漸變層
 CAGradientLayer *gradient = [CAGradientLayer layer];
 gradient.frame = self.bottomIv.bounds;
 //設(shè)置漸變的顏色
 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{
 //獲取當(dāng)前手指的偏移量
 CGPoint tranP = [pan translationInView:self.dragView];

 //最大旋轉(zhuǎn)180
 //當(dāng)手指偏移量為dragView的高度時(shí)為180
 CGFloat angle = tranP.y * M_PI / MAX_H;

 CATransform3D transform = CATransform3DIdentity;

 //設(shè)置立體效果（近大遠(yuǎn)?。?
 //設(shè)置眼睛和屏幕的距離
 transform.m34 = -1 /300.0;

 //設(shè)置漸變層的不透明度
 self.gradient.opacity = tranP.y / MAX_H;

 //讓上層圖片繞x軸旋轉(zhuǎn)
 self.topIv.layer.transform = CATransform3DRotate(transform, -angle, 1, 0, 0);

 //手指松開，圖片復(fù)位
 if(pan.state == UIGestureRecognizerStateEnded){
  //把漸變效果透明
  self.gradient.opacity = 0;

  //delay:動(dòng)畫延時(shí)執(zhí)行時(shí)間
  //Damping:彈性系數(shù),設(shè)的超小, 彈性就越大
  //Velocity:彈性的初始速度
  //options:以什么樣樣式來做動(dòng)畫,開始有結(jié)束慢,
  [UIView animateWithDuration:1 delay:0 usingSpringWithDamping:0.1 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{
   //上部分圖片復(fù)位
   self.topIv.layer.transform = CATransform3DIdentity;
  } completion:nil];
 }
}

@end

三、圖示