iOS-圖片摺疊效果

一.storyboard裏面如下圖,並且添加了拖動手勢

二.控制器.m代碼如下:

//  ViewController.m

#import "ViewController.h"

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *topImageV;
@property (weak, nonatomic) IBOutlet UIImageView *bottomImageV;

/** <#註釋#> */
@property (nonatomic, weak) CAGradientLayer *gradientL;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    //1.讓上部圖片只顯示上半部分
    self.topImageV.layer.contentsRect = CGRectMake(0, 0, 1, 0.5);
    //2.讓下部圖片只顯示下半部分
    self.bottomImageV.layer.contentsRect = CGRectMake(0, 0.5, 1, 0.5);
    
    self.topImageV.layer.anchorPoint = CGPointMake(0.5, 1);
    
    self.bottomImageV.layer.anchorPoint = CGPointMake(0.5, 0);
    
    //漸變層
    CAGradientLayer *gradientL = [CAGradientLayer layer];
    gradientL.frame = self.bottomImageV.bounds;
    //設置漸變的顏色
    gradientL.colors = @[(id)[UIColor clearColor].CGColor,(id)[UIColor blackColor].CGColor];
    
    //設置漸變透明
    gradientL.opacity = 0;

    self.gradientL = gradientL;
    
    [self.bottomImageV.layer addSublayer:gradientL];
       
}

//漸變層
- (void)gradientLayer {
    
    CAGradientLayer *gradientL = [CAGradientLayer layer];
    gradientL.frame = self.bottomImageV.bounds;
    //設置漸變的顏色
    gradientL.colors = @[(id)[UIColor redColor].CGColor,(id)[UIColor greenColor].CGColor,(id)[UIColor yellowColor].CGColor];
    //設置漸變的方向
    gradientL.startPoint = CGPointMake(0, 0);
    gradientL.endPoint = CGPointMake(1, 0);
    
    //設置一個漸變到另一個漸變的起始位置
    gradientL.locations = @[@0.2,@0.6];
}

- (IBAction)pan:(UIPanGestureRecognizer *)pan {
    
    
    //獲取移動的偏移量
    CGPoint transP = [pan translationInView:pan.view];
    //讓上部圖片開始旋轉
    CGFloat angle = transP.y * M_PI / 200;
    
    //近大遠小
    CATransform3D transform = CATransform3DIdentity;
    //眼睛離屏幕的距離
    transform.m34 = -1 / 300.0;
    
    self.gradientL.opacity = transP.y * 1 / 200.0;
    
    
    //self.topImageV.layer.transform  = CATransform3DMakeRotation(-angle, 1, 0, 0);
    self.topImageV.layer.transform = CATransform3DRotate(transform, -angle, 1, 0, 0 );
    
    
    if (pan.state == UIGestureRecognizerStateEnded) {
        
        self.gradientL.opacity = NO;
        //上部的圖片復位
        //usingSpringWithDamping:彈性係數.越小彈性越大
        [UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.3 initialSpringVelocity:0 options: UIViewAnimationOptionCurveLinear  animations:^{
            
            self.topImageV.layer.transform = CATransform3DIdentity;
            
        } completion:nil];
    }
    
    
    
}

@end

效果圖如下:滑動鼠標的時候,圖片有摺疊效果

筆記:

1.分析界 效果
當 標在圖 上拖動的時候,圖 有 個摺疊的效果.這種摺疊效果其實就是圖 的上半部分繞着X軸做 個旋轉的操作.我們圖 的旋轉都是繞着錨點進 旋轉的.所以如果是 張圖 的,辦不到只上圖 的上半部分進 個旋轉.
其實是兩張圖,把兩張圖 合成 張圖 的 法,實現 案.弄上下兩張圖,上上部圖 只顯 上半部分,下部圖 只顯 下半部分.

2.如果讓 張圖 只顯 上半部分或者下半部分?利CALayer的 個屬性contentsRect = CGRectMake(0, 0, 1, 0.5);contentsRect就是要顯 的範圍.它是取值範圍是(0~1);想讓上部圖 只顯 上半部分contentsRect設置CGRectMake(0, 0, 1, 0.5);讓下部圖 只顯 下半部分contentsRect設置爲CGRectMake(0, 0.5, 1, 0.5)

3.讓上部圖 繞着錨點進 旋轉,但是圖 的默認錨點在中 ,所以要把上部圖 的錨點設在最底部.
修改上部分的錨點爲anchorPoint = CGPointMake(0.5, 1)
但是修過錨點之後,會出現 個問題,就是上部分的圖,會往上.導致兩個圖 中間有 個空隙.解決辦法爲.把兩張圖 放到 起.設置上部分圖 的錨點後.上部分圖 會上 半的距離.然後再設置下部圖 的錨點.設置上圖 的最上 設置下部圖 錨點值爲anchorPoint =CGPointMake(0.5, 0);

這樣就能夠辦到兩張圖 合成 張的效果.

4.給上部圖 添加 勢.根據 指向下拖動的距離.來計算旋轉的 度.拖動的時候,發現它的拖動範圍爲整個圖.所以添加 勢的時候,不能只添加上部分或着下部分.
可以弄 個跟View相同 的的View,把 勢添加給這個UIView.
添加完 勢時,在 勢 法當中去旋轉上部分圖.要來計算旋轉的 度,上半部分旋轉的 度是根據 指向上拖動的Y值來決定.當 指到最下部時正好旋轉180度.
假設 指移動到最下部爲200.那旋轉 度應該爲 angel = transP.Y * M_PI / 200.0;

5.拖動的時候讓它有 個 體產效果 體的效果就是有 種近 遠 的感覺.想要設置 體效果.要修改它的TransForm當中的 個M34值,設置 式爲弄 個空的TransFrom3D

CATransform3D transform = CATransform3DIdentity;200.0可以理解爲， 的眼睛離 機屏幕的垂直距離，近 遠 效果越明顯transform.m34 = - 1 / 200.0;
transform = CATransform3DRotate(transform, angle, 1, 0, 0);相對上 次改了m34的形變,再去旋轉

6.給下部分圖 添加陰影的效果.陰影是有漸變的效果.是從透明到 的 個漸變.我們可以通過CAGradientLayer這個層來創建漸變.這個層我們就稱它是 個漸變層.

漸變層也是需要添加到 個層上 才能夠顯.

漸變層 有 個colors屬性.這個屬性就是設置要漸變的顏.它是 個數組.數組當中要求我們傳 都是CGColorRef類型,所以我們要把顏 轉成CGColor.但是轉成CGColor後,數組就認識它是 個對象了,就要通過在前 加上 個(id)來告訴編譯器是 個對象.

可以設置漸變的 向:通過startPoint和endPoint這兩個屬性來設置漸變的 向.它的取值範圍也是(0~1)

默認 向爲上下漸變爲:gradientL.startPoint = CGPointMake(0, 0);gradientL.endPoint = CGPointMake(0, 1);設置左右漸變
gradientL.startPoint = CGPointMake(0, 0);gradientL.endPoint = CGPointMake(1, 0);

可以設置漸變從 個顏 到下 個顏 的位置設置屬性爲locations = @[@0.3,@0.7]

漸變層同時還有 個opacity屬性.這個屬性是調協漸變層的不透明度.它的取值範圍同樣也是0-1,
當爲0時代表透明,當爲1明,代碼不透明.

所以我們可以給下部分圖 添加 個漸變層,漸變層的顏 爲從透明到 .gradientL.colors =
@[(id)[UIColor clearColor].CGColor,(id)[UIColor blackColor].CGColor];

開始時沒有漸變,所以可以把漸變層設爲透明狀態.之後隨着 指向下拖動的時,漸變層的透明度跟着改變.

當 指拖到最下 的時候,漸變層的透明度正好爲1.所以要中間可以有 個 例.CGFloat opacity = 1 * transP.y / 200.0;
在 指拖動的時候,設置它的不透度

7.在 指拖動過程當中,鬆開 指時,有 個動畫返彈回去的效果.所以我們要堅聽 指的狀態.當 勢狀態爲結束時把漸變層的透明度設爲透明把上部圖 的旋轉設爲0,也就是清空之前的形變.

同時加上 個返彈動畫的效果.返彈動畫添加 法爲

Duration:動畫的執 時
delay:動畫延時時.Damping:動畫的彈性係數,越,彈簧效果越明顯initialSpringVelocity:彈簧初始化速度

[UIView animateWithDuration:0.8 delay:0 usingSpringWithDamping:0.1initialSpringVelocity:0

options:UIViewAnimationOptionCurveLinearanimations:^{

動畫執 代碼

} completion:^(BOOL finished) {動畫完成時調.
}];