IOS開發(fā)仿微信右側(cè)彈出視圖實(shí)現(xiàn)
IOS開發(fā)仿微信右側(cè)彈出視圖實(shí)現(xiàn)
微信首頁的+號,點(diǎn)擊之后會彈出一個更多的視圖,這個視圖如何實(shí)現(xiàn)呢?
實(shí)現(xiàn)該效果可能需要以下技術(shù)要點(diǎn):
1.圖片拉伸,通過拉伸圖片的中間的較小區(qū)域來保持圖片的邊上的形狀
2.仿射變換,用到仿射變換的縮放,平移和合并,視圖動畫
3.navigationBar的樣式設(shè)置
實(shí)現(xiàn)效果,如下:

本Demo圖片來源微信安裝包解壓得到的圖片
實(shí)現(xiàn)代碼:
//
// 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;//設(shè)置_imageView的仿射變換
_imageView.alpha = 0;//透明度
[self.view addSubview:_imageView];
_imageView.hidden = YES;
self.navigationController.navigationBar.barStyle = UIBarStyleBlack;//設(shè)置navigationBar的樣式
self.navigationController.navigationBar.tintColor = [UIColor whiteColor];//設(shè)置navigationBar字體或者鏤空圖的顏色
}
//點(diǎn)擊右側(cè)的按鈕
- (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
如有疑問請留言或者到本站社區(qū)交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關(guān)文章
詳解IOS判斷當(dāng)前網(wǎng)絡(luò)狀態(tài)的三種方法
IOS中(Xcode) DEBUG模式(RELEASE模式)控制NSLog輸出,NSLog輸出方式
iOS10語音識別框架SpeechFramework應(yīng)用詳解
iOS開發(fā)中一些手寫控件及其相關(guān)屬性的使用
iOS開發(fā)商品頁中banner中點(diǎn)擊查看圖片
iOS開發(fā)中如何實(shí)現(xiàn)一個平滑的顏色過渡

