IOS開(kāi)發(fā)仿微信右側(cè)彈出視圖實(shí)現(xiàn)
IOS開(kāi)發(fā)仿微信右側(cè)彈出視圖實(shí)現(xiàn)
微信首頁(yè)的+號(hào),點(diǎn)擊之后會(huì)彈出一個(gè)更多的視圖,這個(gè)視圖如何實(shí)現(xiàn)呢?
實(shí)現(xiàn)該效果可能需要以下技術(shù)要點(diǎn):
1.圖片拉伸,通過(guò)拉伸圖片的中間的較小區(qū)域來(lái)保持圖片的邊上的形狀
2.仿射變換,用到仿射變換的縮放,平移和合并,視圖動(dòng)畫(huà)
3.navigationBar的樣式設(shè)置
實(shí)現(xiàn)效果,如下:
本Demo圖片來(lái)源微信安裝包解壓得到的圖片
實(shí)現(xiàn)代碼:
// // ViewController.m // appXX-微信更多工具欄 // // Created by MRBean on 15/7/27. // Copyright (c) 2015年 yangbin. All rights reserved. // #import "ViewController.h" #define kScreenWidth self.view.bounds.size.width @interface ViewController () @property(strong,nonatomic)UIImageView *imageView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; //初始化ImageView UIImage *image = [UIImage imageNamed:@"More"]; NSLog(@"%f ,%f",image.size.width,image.size.height); UIImage *stretchImage = [image resizableImageWithCapInsets:UIEdgeInsetsMake(31, 36, 30, 33)];//拉伸圖片 _imageView = [[UIImageView alloc]init]; _imageView.frame = CGRectMake(kScreenWidth-100, 64, 100, 150); _imageView.image = stretchImage; //仿射變換,矩陣變換 CGAffineTransform smaller = CGAffineTransformMakeScale(0.01, 0.01);//比例縮放 CGAffineTransform rightUpMove = CGAffineTransformMakeTranslation(_imageView.frame.size.width/2, -_imageView.frame.size.height/2);//平移 CGAffineTransform cat = CGAffineTransformConcat(smaller, rightUpMove);//合并兩個(gè)矩陣變換 _imageView.transform = cat;//設(shè)置_imageView的仿射變換 _imageView.alpha = 0;//透明度 [self.view addSubview:_imageView]; _imageView.hidden = YES; self.navigationController.navigationBar.barStyle = UIBarStyleBlack;//設(shè)置navigationBar的樣式 self.navigationController.navigationBar.tintColor = [UIColor whiteColor];//設(shè)置navigationBar字體或者鏤空?qǐng)D的顏色 } //點(diǎn)擊右側(cè)的按鈕 - (IBAction)tapAdd:(UIBarButtonItem *)sender { if (_imageView.hidden) { CGAffineTransform larger = CGAffineTransformMakeScale(1, 1);//放大 _imageView.hidden = NO;//顯示視圖 [UIView animateWithDuration:0.2 animations:^{ _imageView.transform = larger; _imageView.alpha = 1; }]; } else { CGAffineTransform smaller = CGAffineTransformMakeScale(0.01, 0.01);//縮小 CGAffineTransform rightUpMove = CGAffineTransformMakeTranslation(_imageView.frame.size.width/2, -_imageView.frame.size.height/2);//移動(dòng) CGAffineTransform cat = CGAffineTransformConcat(smaller, rightUpMove);//合并transform [UIView animateWithDuration:0.2 animations:^{ _imageView.transform = cat; } completion:^(BOOL finished) { _imageView.hidden = YES; _imageView.alpha = 0; }]; } } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } @end
如有疑問(wèn)請(qǐng)留言或者到本站社區(qū)交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
相關(guān)文章

詳解IOS判斷當(dāng)前網(wǎng)絡(luò)狀態(tài)的三種方法

IOS中(Xcode) DEBUG模式(RELEASE模式)控制NSLog輸出,NSLog輸出方式

iOS10語(yǔ)音識(shí)別框架SpeechFramework應(yīng)用詳解

iOS開(kāi)發(fā)中一些手寫(xiě)控件及其相關(guān)屬性的使用

iOS開(kāi)發(fā)商品頁(yè)中banner中點(diǎn)擊查看圖片

iOS動(dòng)畫(huà)特效之立方體翻轉(zhuǎn)

iOS開(kāi)發(fā)中如何實(shí)現(xiàn)一個(gè)平滑的顏色過(guò)渡