ios开发仿微信右侧弹出视图实现（ios开发仿微信右侧弹出视图实现）

ios开发仿微信右侧弹出视图实现

微信首页的+号,点击之后会弹出一个更多的视图,这个视图如何实现呢?

实现该效果可能需要以下技术要点:

1.图片拉伸,通过拉伸图片的中间的较小区域来保持图片的边上的形状

2.仿射变换,用到仿射变换的缩放,平移和合并,视图动画

3.navigationbar的样式设置

实现效果,如下:

ios开发仿微信右侧弹出视图实现（ios开发仿微信右侧弹出视图实现）

本demo图片来源微信安装包解压得到的图片

实现代码:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 // // 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);//合并两个矩阵变换 _imageview.transform = cat;//设置_imageview的仿射变换 _imageview.alpha = 0;//透明度 [self.view addsubview:_imageview]; _imageview.hidden = yes; self.navigationcontroller.navigationbar.barstyle = uibarstyleblack;//设置navigationbar的样式 self.navigationcontroller.navigationbar.tintcolor = [uicolor whitecolor];//设置navigationbar字体或者镂空图的颜色 } //点击右侧的按钮 - (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);//移动 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