ios开发仿微信右侧弹出视图实现
微信首页的+号,点击之后会弹出一个更多的视图,这个视图如何实现呢?
实现该效果可能需要以下技术要点:
1.图片拉伸,通过拉伸图片的中间的较小区域来保持图片的边上的形状
2.仿射变换,用到仿射变换的缩放,平移和合并,视图动画
3.navigationbar的样式设置
实现效果,如下:
本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
|
如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
原文链接:http://blog.csdn.net/yangbingbinga/article/details/47088893