首页 > 系统 > iOS > 正文

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

2020-07-26 02:39:30
字体:
来源:转载
供稿:网友

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

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表