圖片打碎還原效果

//實現(xiàn)原理是用layer.contensRect實現(xiàn)的走越,參考文獻:http://blog.csdn.net/mamong/article/details/8534999

CGFloat ratio = 0.1;
for (int i = 0; i < 100; i++) {
UIImageView imageView = [[UIImageView alloc] init];
imageView.backgroundColor = [UIColor redColor];
imageView.image = image;
NSInteger column = i % 10; // 列
NSInteger row = i / 10; // 行
//層內(nèi)容的可視區(qū)域
imageView.layer.contentsRect = CGRectMake(ratio
column, rowratio, ratio, ratio);
imageView.frame = CGRectMake(self.frame.size.width
ratiocolumn, row(self.frame.size.heightratio), self.frame.size.widthratio, self.frame.size.height*ratio);
[self addSubview:imageView];//將控件添加到self
}

//然后用UIView animateWithDuration動畫改變所有self的所有子控件layer.transform屬性就可以實現(xiàn)打碎效果趣倾,還原也一樣的原理
// 打碎

-(void)smash {
[UIView animateWithDuration:1 animations:^{
[self.subviews enumerateObjectsUsingBlock:^(__kindof UIView * _Nonnull obj, NSUInteger idx, BOOLBOOL * _Nonnull stop) {
UIImageView *imageView = obj;
imageView.layer.transform = [self configTransform3DWithRotateAngle:[self getRandomNumber:0 to:360] andPositionX:[self getRandomNumber:0 to:100] andPositionY:[self getRandomNumber:0 to:100]];
}];
}];

}

//該方法是傳一個角度甩鳄,x铜犬,y值進來 returny一個CATransform3D類型的對象

  • (CATransform3D)configTransform3DWithRotateAngle:(double)angle andPositionX:(double)x andPositionY:(double)y
    {
    CATransform3D transform = CATransform3DIdentity;
    // iOS的三維透視投影 實現(xiàn)view(layer)的透視效果(就是近大遠小)啼染,是通過設(shè)置m34的參考:http://blog.csdn.net/dreamjuvenile/article/details/51898444
    // transform.m34 = 1/0;
    /*
    旋轉(zhuǎn) CATransform3DRotate (CATransform3D t, CGFloat angle,CGFloat x, CGFloat y, CGFloat z) angle旋轉(zhuǎn)弧度:角度 * M_PI / 180座柱,
    x值范圍-1 --- 1之間 正數(shù)表示左側(cè)看向外旋轉(zhuǎn),負數(shù)表示向里CATransform3DRotate(transform, M_PIangle/180, 1, 0, 0)
    y值范圍-1 --- 1之間 正數(shù)左側(cè)看表示向外旋轉(zhuǎn)输吏,負數(shù)表示向里CATransform3DRotate(transform, M_PI
    angle/180, 0, 1, 0)
    同時設(shè)置x权旷,y表示沿著對角線翻轉(zhuǎn)
    CATransform3DRotate(transform, M_PIangle/180, 1, 1, 0)
    z值范圍-1 --- 1之間 正數(shù)逆時針旋轉(zhuǎn),負數(shù)表示順CATransform3DRotate(transform, M_PI
    angle/180, 0, 0, -1)
    同時設(shè)置x,y,z按照設(shè)定的數(shù)值進行旋轉(zhuǎn)
    CATransform3D rotateTransform = CATransform3DRotate(transform, M_PI*angle/180, 1, 1, 1);
    /
    CATransform3D rotateTransform = CATransform3DRotate(transform, M_PI
    angle/180, 1, 1, 1);
    // 移動
    CATransform3D moveanim = CATransform3DMakeTranslation(x, y, 0);
    // 合并
    CATransform3D concatTransform = CATransform3DConcat(rotateTransform, moveanim);
    return concatTransform;
    }

//傳入兩個int數(shù)據(jù)類型生成一個范圍的隨機數(shù)
-(CGFloat)getRandomNumber:(int)from to:(int)to
{
return (from+ 1 + (arc4random() % (to - from + 1)));
}

源代碼地址:https://github.com/PanDongGG/smashImageView

20160714151801208.gif
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末贯溅,一起剝皮案震驚了整個濱河市拄氯,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌它浅,老刑警劉巖译柏,帶你破解...
    沈念sama閱讀 212,884評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異姐霍,居然都是意外死亡鄙麦,警方通過查閱死者的電腦和手機典唇,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,755評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來胯府,“玉大人介衔,你說我怎么就攤上這事∶私伲” “怎么了?”我有些...
    開封第一講書人閱讀 158,369評論 0 348
  • 文/不壞的土叔 我叫張陵与纽,是天一觀的道長侣签。 經(jīng)常有香客問我,道長急迂,這世上最難降的妖魔是什么影所? 我笑而不...
    開封第一講書人閱讀 56,799評論 1 285
  • 正文 為了忘掉前任,我火速辦了婚禮僚碎,結(jié)果婚禮上猴娩,老公的妹妹穿的比我還像新娘。我一直安慰自己勺阐,他們只是感情好卷中,可當(dāng)我...
    茶點故事閱讀 65,910評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著渊抽,像睡著了一般蟆豫。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上懒闷,一...
    開封第一講書人閱讀 50,096評論 1 291
  • 那天,我揣著相機與錄音,去河邊找鬼淳附。 笑死打洼,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的玩焰。 我是一名探鬼主播由驹,決...
    沈念sama閱讀 39,159評論 3 411
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼昔园!你這毒婦竟也來了荔棉?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,917評論 0 268
  • 序言:老撾萬榮一對情侶失蹤蒿赢,失蹤者是張志新(化名)和其女友劉穎润樱,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體羡棵,經(jīng)...
    沈念sama閱讀 44,360評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡壹若,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,673評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片店展。...
    茶點故事閱讀 38,814評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡养篓,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出赂蕴,到底是詐尸還是另有隱情柳弄,我是刑警寧澤,帶...
    沈念sama閱讀 34,509評論 4 334
  • 正文 年R本政府宣布概说,位于F島的核電站碧注,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏糖赔。R本人自食惡果不足惜萍丐,卻給世界環(huán)境...
    茶點故事閱讀 40,156評論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望放典。 院中可真熱鬧逝变,春花似錦、人聲如沸奋构。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽弥臼。三九已至态贤,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間醋火,已是汗流浹背悠汽。 一陣腳步聲響...
    開封第一講書人閱讀 32,123評論 1 267
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留芥驳,地道東北人柿冲。 一個月前我還...
    沈念sama閱讀 46,641評論 2 362
  • 正文 我出身青樓,卻偏偏與公主長得像兆旬,于是被迫代替她去往敵國和親假抄。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,728評論 2 351

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

  • Core Animation其實是一個令人誤解的命名丽猬。你可能認為它只是用來做動畫的宿饱,但實際上它是從一個叫做Laye...
    小貓仔閱讀 3,694評論 1 4
  • >*很不幸,沒人能告訴你母體是什么脚祟,你只能自己體會* --駭客帝國 在第四章“可視效果”中谬以,我們研究了一些增強圖層...
    夜空下最亮的亮點閱讀 1,656評論 0 2
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現(xiàn)這些動畫的過程并不復(fù)雜由桌,今天將帶大家一窺iOS動畫全貌为黎。在這里你可以看...
    F麥子閱讀 5,105評論 5 13
  • 在iOS中隨處都可以看到絢麗的動畫效果邮丰,實現(xiàn)這些動畫的過程并不復(fù)雜,今天將帶大家一窺ios動畫全貌铭乾。在這里你可以看...
    每天刷兩次牙閱讀 8,473評論 6 30
  • 我不怕孤獨剪廉, 我怕的是再度孤獨。 注定要失去的東西炕檩,一開始要來干嘛斗蒋?可。笛质。這宇宙哪里又有永恒泉沾?活物會死,死物也被時...
    黑晗真的是理科生閱讀 263評論 0 1