基于iOS實現(xiàn)圖片折疊效果
本文實例為大家分享了iOS實現(xiàn)圖片折疊效果的具體代碼，供大家參考，具體內容如下
一、分析與說明
1.1 分析界 效果
當鼠標在圖片上拖動的時候,圖片上有一個折疊的效果.
這種折疊效果其實就是圖片的上半部分繞著X軸做一個旋轉的操作.
我們圖片的旋轉都是繞著錨點進 旋轉的.所以如果是一張圖片的,辦不到只上圖 的上半部 分進 個旋轉.
其實是兩張圖片, 把兩張圖片合成一張圖片的方法,
實現(xiàn)方案.弄上下兩張圖 ,上部圖片只顯示上半部分, 下部圖片只顯示下半部分.
1.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)
1.3 讓上部圖 繞著錨點進 旋轉,但是圖 的默認錨點在中 ,所以要把上部圖 的錨點設在 最底部.
修改上部分的錨點為anchorPoint = CGPointMake(0.5, 1)
但是修過錨點之后, 會出現(xiàn)一個問題,就是上部分的圖片,會往上走.導致兩個圖片中間有一個空隙.
解決辦法為*.把兩張圖片放到一起.設置上部分圖片的錨點后.上部分圖 會上走一半的距離.
然后再設置下部圖片的錨點.設置下部圖 錨點值為anchorPoint = CGPointMake(0.5, 0);
這樣就能夠辦到兩張圖片合成一張的效果.
1.4 添加一個添加手勢的view(Drag View)
弄一個和圖片V相同的View,把手勢添加給這個UIView.
添加完手勢時, 在手勢方法當中去旋轉上部分圖片.
用來計算旋轉的角度,上半部分旋轉的角度是根據(jù)手指向下拖動的Y值來決定.當 指到最下部 時正好旋轉180度.
假設手指移動到最下部為200.那旋轉 度應該為 angel = transP.Y * M_PI / 200.0;
1.5 拖動的時候讓它有一個立體產(chǎn)效果
立體的效果就是有一種近大遠小的感覺.
想要設置立體效果.要修改它的TransForm當中的一個M34值,
設置方式為弄一個空的TransFrom3D
CATransform3D transform = CATransform3DIdentity;
200.0可以理解為,人的眼睛離手機屏幕的垂直距離,
transform.m34 = - 1 / 200.0; transform = CATransform3DRotate(transform, angle, 1, 0, 0);
1.6 給下部分圖片添加陰影的效果.陰影是有漸變的效果.是從透明到黑色的一個漸變.
我們可以通過CAGradientLayer這個層來創(chuàng)建漸變.這個層我們就稱它是一個漸變層.
漸變層也是需要添加到一個層上面才能夠顯.
漸變層里面有一個 colors屬性.這個屬性就是設置要漸變的顏色.它是一個數(shù)組.
數(shù)組當中要求我們傳入都是 CGColorRef類型,所以我們要把顏 轉成CGColor.
但是轉成CGColor后,數(shù)組就認識它是一個對象了,就要通過在前面加上一個(id)來告訴編譯器是 一個對象.
可以設置漸變的方向:
通過startPoint和endPoint這兩個屬性來設置漸變的方向.它的取值范圍也是(0~1)
默認 向為上下漸變?yōu)?
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屬性.這個屬性是調協(xié)漸變層的不透明度.
它的取值范圍同樣也是 0-1, 當為0時代表透明, 當為1明,代碼不透明.
所以我們可以給下部分圖片添加一個漸變層,漸變層的顏色為從透明到黑.
gradientL.colors = @[(id)[UIColor clearColor].CGColor,(id)[UIColor blackColor].CGColor];
開始時沒有漸變,所以可以把漸變層設為透明狀態(tài).
之后隨著手指向下拖動的時,漸變層的透明度跟著改變.
當手指拖到最下面的時候,漸變層的透明度正好為1.
CGFloat opacity = 1 * transP.y / 200.0;
1.7 在手指松開后有一個反彈動畫
在手指松開后，我們添加一個反彈動畫。
當手勢狀態(tài)為結束時：
1.把漸變的透明度改為 0
2.情況之前的形變
//手指松開，圖片復位
if(pan.state == UIGestureRecognizerStateEnded){
//把漸變效果透明
self.gradient.opacity = 0;
//delay:動畫延時執(zhí)行時間
//Damping:彈性系數(shù),設的超小, 彈性就越大
//Velocity:彈性的初始速度
//options:以什么樣樣式來做動畫,開始有結束慢,
[UIView animateWithDuration:1 delay:0 usingSpringWithDamping:0.1 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{
//上部分圖片復位
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);
//添加手勢
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;
//設置漸變的顏色
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{
//獲取當前手指的偏移量
CGPoint tranP = [pan translationInView:self.dragView];
//最大旋轉180
//當手指偏移量為dragView的高度時為180
CGFloat angle = tranP.y * M_PI / MAX_H;
CATransform3D transform = CATransform3DIdentity;
//設置立體效果（近大遠?。?
//設置眼睛和屏幕的距離
transform.m34 = -1 /300.0;
//設置漸變層的不透明度
self.gradient.opacity = tranP.y / MAX_H;
//讓上層圖片繞x軸旋轉
self.topIv.layer.transform = CATransform3DRotate(transform, -angle, 1, 0, 0);
//手指松開，圖片復位
if(pan.state == UIGestureRecognizerStateEnded){
//把漸變效果透明
self.gradient.opacity = 0;
//delay:動畫延時執(zhí)行時間
//Damping:彈性系數(shù),設的超小, 彈性就越大
//Velocity:彈性的初始速度
//options:以什么樣樣式來做動畫,開始有結束慢,
[UIView animateWithDuration:1 delay:0 usingSpringWithDamping:0.1 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{
//上部分圖片復位
self.topIv.layer.transform = CATransform3DIdentity;
} completion:nil];
}
}
@end
三、圖示
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
iOS開發(fā)之UIPickerView實現(xiàn)城市選擇器的步驟詳解
這篇文章給大家介紹iOS利用控件UIPickerView實現(xiàn)城市選擇器的效果，選擇城市這一功能相信在大家日常開發(fā)的時候經(jīng)常遇見，下面就來看看詳細的實現(xiàn)過程，有需要的可以參考借鑒。2016-09-09
iOS開發(fā)之統(tǒng)計Xcode工程的代碼行數(shù)
這篇文章主要給大家介紹了在iOS開發(fā)中，如果想要統(tǒng)計Xcode工程的代碼行數(shù)該如何實現(xiàn)，文章給出了詳細的方法和示例代碼，對大家的理解和學習很有幫助，本文中還分享了統(tǒng)計java文件和xml文件的代碼，有需要的朋友們下面來一起看看吧。2016-10-10
ios開發(fā)Flutter之數(shù)據(jù)存儲
這篇文章主要為大家介紹了ios開發(fā)Flutter之數(shù)據(jù)存儲的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
本文給大家介紹的是iOS 原生態(tài)API實現(xiàn)二維碼的掃描功能，非常簡單實用，有需要的小伙伴可以參考下。2015-07-07
這篇文章主要介紹了詳解IOS 單例的兩種方式的相關資料,希望通過本文大家能夠理解掌握IOS 的兩種單例的使用方法，需要的朋友可以參考下2017-09-09
本篇文章通過代碼分享和圖文形式教給大家用IOS寫一個好看的ActionSheet過程以及注意事項，需要的朋友參考下吧。2018-01-01
本篇文章主要介紹了iOS單例的創(chuàng)建與銷毀示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了iOS應用開發(fā)中使用設計模式中的觀察者模式的實例,包括Cocoa框架使用中的KVO機制的相關配合運用,代碼為傳統(tǒng)的Objective-C,需要的朋友可以參考下2016-03-03
為了防止被抓包那么就要了解抓包的原理。本文將詳細介紹IOS如何防止抓包，感興趣的同學，可以參考下。2021-06-06
這篇文章主要為大家詳細介紹了IOS實現(xiàn)下拉菜單效果的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07