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

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