IOS开发仿微信右侧弹出视图实现
2017-10-17 11:05
621 查看
IOS开发仿微信右侧弹出视图实现
微信首页的+号,点击之后会弹出一个更多的视图,这个视图如何实现呢?
实现该效果可能需要以下技术要点:
1.图片拉伸,通过拉伸图片的中间的较小区域来保持图片的边上的形状
2.仿射变换,用到仿射变换的缩放,平移和合并,视图动画
3.navigationBar的样式设置
实现效果,如下:
本Demo图片来源微信安装包解压得到的图片
实现代码:
// // 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
如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
您可能感兴趣的文章:
相关文章推荐
- IOS开发 左右弹出菜单视图 菜鸟纯代码实现思路
- iOS开发中表视图搜索栏实现中的Objective-C 递归问题
- SilverLight商业应用程序开发---学习笔记(9)从摘要信息跳转到详细信息 导航到细节视图 在弹出窗体打开细节视图 使用DataGrid控件的行细节显示特性显示细节内容 主/从视图的实现
- iOS 6开发---应用集合视图(UICollectionView)-实现补充视图(Supplementary View)
- ios---实现随着键盘弹出,响应的视图也随之上移
- ios开发学习-弹出视图(Popup View) 效果源码分享--系列教程2
- ios开发学习-弹出视图(Popup View) 效果源码分享--系列教程4
- iOS开发中表视图搜索栏实现中的Objective-C深浅拷贝问题
- 【iOS开发-24】导航控制器下不同视图控制器之间切换:利用CATrasition和view的layer层来实现自定义的动画效果
- ios开发之实现长按UITableViewCell弹出UIMenuController
- 【iOS开发-26】利用协议代理实现导航控制器UINavigationController视图之间的正向传值和反向传值
- ios开发之实现长按UITableViewCell弹出UIMenuController
- IOS开发之自定义segment实现视图切换
- ios开发学习-弹出视图(Popup View) 效果源码分享--系列教程4
- ios开发学习-弹出视图(Popup View) 效果源码分享--系列教程1
- ios开发学习-弹出视图(Popup View) 效果源码分享--系列教程2
- ios开发之实现长按UITableViewCell弹出UIMenuController
- ios开发学习-弹出视图(Popup View) 效果源码分享--系列教程1
- Cocoa Touch 入门记——《精通 iOS 开发》学习心得(3) [标签栏实现多视图的方法(运用 xib)]
- ios开发学习-弹出视图(Popup View) 效果源码分享--系列教程1