圖片折疊效果

最終的效果,圖片來自網(wǎng)絡(luò),

OC代碼

#import"ViewController.h"

@interfaceViewController()

@property(weak,nonatomic)IBOutletUIImageView*topView;

@property(weak,nonatomic)IBOutletUIImageView*bottomView;

@property(weak,nonatomic)IBOutletUIView*dragView;

@property(nonatomic,weak)CAGradientLayer*layer;

@end

@implementationViewController

- (void)viewDidLoad {

[superviewDidLoad];

//先讓上部分View顯示圖片上部分內(nèi)容

// 0~1

_topView.layer.contentsRect=CGRectMake(0,0,1,0.5);

//設(shè)置錨點(diǎn)

_topView.layer.anchorPoint=CGPointMake(0.5,1);

//設(shè)置下部分顯示內(nèi)容

_bottomView.layer.contentsRect=CGRectMake(0,0.5,1,0.5);

_bottomView.layer.anchorPoint=CGPointMake(0.5,0);

//添加拖動(dòng)手勢

UIPanGestureRecognizer*pan = [[UIPanGestureRecognizeralloc]initWithTarget:selfaction:@selector(pan:)];

[_dragViewaddGestureRecognizer:pan];

//陰影效果,添加到底部

CAGradientLayer*layer = [CAGradientLayerlayer];

_layer= layer;

layer.frame=_bottomView.bounds;

//設(shè)置漸變顏色

layer.colors=@[(id)[UIColorclearColor].CGColor,(id)[UIColorblackColor].CGColor];

layer.opacity=0;

//? ? //設(shè)置漸變的方向

//

layer.startPoint = CGPointMake(0, 0);

//

layer.endPoint = CGPointMake(1, 0);

//

//? ? //設(shè)置顏色漸變的開始位置

//

layer.locations = @[@0.5];

[_bottomView.layeraddSublayer:layer];

}

//只要手指在拖動(dòng)的View移動(dòng)的時(shí)候就會(huì)調(diào)用

- (void)pan:(UIPanGestureRecognizer*)pan

{

//獲取手勢偏移量

CGPointtransP =? [pantranslationInView:_dragView];

//計(jì)算旋轉(zhuǎn)角度

CGFloatangle = -transP.y/200.0*M_PI;

//增加立體感

CATransform3Dtransform =CATransform3DIdentity;

//

d:人的眼睛和屏幕的垂直距離

CGFloatd =300;

//設(shè)置形變的m34就可以增加立體感,立體感(近大遠(yuǎn)小)

transform.m34= -1/ d;

//秒速形變的旋轉(zhuǎn)的度數(shù)

transform =CATransform3DRotate(transform,angle,1,0,0);

//開始旋轉(zhuǎn)

_topView.layer.transform= transform;

//設(shè)置陰影的透明度

CGFloatopacity = transP.y/200;

_layer.opacity= opacity;

if(pan.state==UIGestureRecognizerStateEnded) {

//還原

// Damping:值越小,彈簧效果越明顯

// options:秒速動(dòng)畫執(zhí)行過程,勻速,快入快出

[UIViewanimateWithDuration:1delay:0usingSpringWithDamping:0.2initialSpringVelocity:1options:UIViewAnimationOptionCurveEaseInOutanimations:^{

_topView.layer.transform=CATransform3DIdentity;

}completion:^(BOOLfinished) {

}];

//彈簧效果

//上部分形變清空

//陰影透明

_layer.opacity=0;

}

}

@end

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末鞍恢,一起剝皮案震驚了整個(gè)濱河市每窖,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌窒典,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,214評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異肩祥,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)混狠,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來将饺,“玉大人,你說我怎么就攤上這事予弧。” “怎么了掖蛤?”我有些...
    開封第一講書人閱讀 152,543評(píng)論 0 341
  • 文/不壞的土叔 我叫張陵,是天一觀的道長致讥。 經(jīng)常有香客問我仅仆,道長垢袱,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,221評(píng)論 1 279
  • 正文 為了忘掉前任请契,我火速辦了婚禮,結(jié)果婚禮上姚糊,老公的妹妹穿的比我還像新娘。我一直安慰自己救恨,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,224評(píng)論 5 371
  • 文/花漫 我一把揭開白布擎淤。 她就那樣靜靜地躺著,像睡著了一般嘴拢。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上席吴,一...
    開封第一講書人閱讀 49,007評(píng)論 1 284
  • 那天捞蛋,我揣著相機(jī)與錄音孝冒,去河邊找鬼拟杉。 笑死,一個(gè)胖子當(dāng)著我的面吹牛搬设,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播拿穴,決...
    沈念sama閱讀 38,313評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼默色!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,956評(píng)論 0 259
  • 序言:老撾萬榮一對(duì)情侶失蹤蚤霞,失蹤者是張志新(化名)和其女友劉穎义钉,沒想到半個(gè)月后昧绣,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體捶闸,經(jīng)...
    沈念sama閱讀 43,441評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,925評(píng)論 2 323
  • 正文 我和宋清朗相戀三年删壮,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片央碟。...
    茶點(diǎn)故事閱讀 38,018評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖菱涤,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情粘秆,我是刑警寧澤,帶...
    沈念sama閱讀 33,685評(píng)論 4 322
  • 正文 年R本政府宣布攻走,位于F島的核電站,受9級(jí)特大地震影響昔搂,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,234評(píng)論 3 307
  • 文/蒙蒙 一痒玩、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧蠢古,春花似錦、人聲如沸草讶。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,240評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽拍霜。三九已至,卻和暖如春祠饺,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背汁政。 一陣腳步聲響...
    開封第一講書人閱讀 31,464評(píng)論 1 261
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留勺鸦,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,467評(píng)論 2 352
  • 正文 我出身青樓换途,卻偏偏與公主長得像,于是被迫代替她去往敵國和親怀跛。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,762評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容

  • 前言 此次文章吻谋,講述的是Layer的一個(gè)屬性contentsRect现横,利用它可以控制圖層內(nèi)容的展示漓拾,然后還有利用漸...
    袁崢閱讀 7,696評(píng)論 18 70
  • 繞著x軸轉(zhuǎn)動(dòng) 上半部分旋轉(zhuǎn)戒祠,下半部分不動(dòng) 一張圖片旋轉(zhuǎn)的效果.layer.transform MakeRotati...
    彼岸的黑色曼陀羅閱讀 399評(píng)論 0 0
  • 圖片折疊效果 1.如何制作圖片折疊效果? 把一張圖片分成兩部分顯示姜盈,上面一部分,下面一部分馏颂,折疊上面部分的內(nèi)容。 ...
    SoManyDumb閱讀 1,104評(píng)論 0 0
  • 原理: 1救拉、創(chuàng)建工程-打開Main.storyboard-拖入兩個(gè)ImageView . 調(diào)整位置 .設(shè)置圖片 2...
    Codepgq閱讀 1,167評(píng)論 1 5
  • VLC的集成和使用 VLC介紹 VLC Media Player (VideoLAN) 為 Windows、Lin...
    Pocket閱讀 19,481評(píng)論 75 66