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

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

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