最近公司要修改支付彈窗的顯示，要實現(xiàn)類似支付寶彈窗那種的地步彈出一個View，于是本人寫了個相關(guān)的Demo，效果圖如下：
首先要考慮彈出視圖的動畫，剛開始試過好多動畫效果，可是都不理想，最后發(fā)現(xiàn)有時候最簡單的就可以滿足我們最基礎(chǔ)的需求，只需實現(xiàn)慢慢的改變底部View的位移，代碼如下
__weak ViewController *weakSelf = self;
self.payView.backgroundColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0];
[UIView animateWithDuration:0.5 animations:^{
[weakSelf.payView setFrame:CGRectMake(0, 0, WIDTH, HEIGHT)];
} completion:^(BOOL finished) {
}];
上面只是實現(xiàn)了彈出視圖的過程，下面還要考慮如何實現(xiàn)點擊彈出View的關(guān)閉按鈕，將View慢慢下移收起，秉著“自己的事情自己做”的原則，點擊View上關(guān)閉按鈕的事件就在View自身里面解決，于是有了下段代碼：
__weak PayView *weakSelf = self;
[UIView animateWithDuration:0.5 animations:^{
weakSelf.frame = CGRectMake(0, HEIGHT, WIDTH, HEIGHT);
} completion:^(BOOL finished) {
}];
有了上面兩個基礎(chǔ)動畫，支付彈窗是能夠?qū)崿F(xiàn)基本的彈出和消失了，可是不能實現(xiàn)點擊非支付部分支付彈窗也能收起的效果，于是我又做了下面的工作
// 定義一塊backgroungView，用來存放所有支付彈窗的布局控件
@property (nonatomic, strong) UIView *backgroungView;
然后添加如下方法，用來實現(xiàn)點擊空白處支付彈窗也可以自己下移
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
[self upDownSelf];
}
可是發(fā)現(xiàn)，如果僅僅這樣寫的話，會出現(xiàn)點擊到支付彈窗上，支付彈窗也會下移，于是乎我完善了上面的方法
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
// 判斷當(dāng)前是否是空白處的高度范圍，是則下移彈窗，不是則不作任何處理
if (touch.view.frame.origin.y < payViewHeight) {
[self upDownSelf];
}
}
應(yīng)公司需求，我們還需要一塊選擇支付方式的View，需要再點擊支付方式按鈕時從右向左移出，點擊返回按鈕時再從左向右移除，想了一下發(fā)現(xiàn)其實跟上面的動畫一樣，只是上面是改變y軸，這個是改變x軸而已。但是這些動畫實現(xiàn)的前提是先在右邊有一塊這樣的支付方式的View，想法屢清楚了，敲出如下代碼
#pragma mark - 加載支付方式視圖
- (void)loadPayMentView {
self.payMentView = [[PaymentMethodView alloc] initWithFrame:CGRectMake(WIDTH, 0, WIDTH, payViewHeight)];
_payMentView.delegate = self;
[self.backgroungView addSubview:_payMentView];
}
#pragma mark - 進(jìn)入選擇支付方式頁面
- (void)nextBtnClick:(UIButton *)sender
{
__weak PayView *weakSelf = self;
[UIView animateWithDuration:0.5 animations:^{
weakSelf.payMentView.frame = CGRectMake(0, 0, WIDTH, payViewHeight);
} completion:^(BOOL finished) {
}];
}
在選擇支付方式的視圖中有如下代碼
#pragma mark - 返回上一頁支付頁面
- (void)returnToPayView {
__weak PaymentMethodView *weakSelf = self;
[UIView animateWithDuration:0.5 animations:^{
weakSelf.frame = CGRectMake(WIDTH, 0, WIDTH, weakSelf.frame.size.height);
} completion:^(BOOL finished) {
}];
}
這樣一來，簡單的從下彈出支付視圖，點擊支付方式彈出選擇支付方式的視圖的Demo就完成了，本文只是講解一個上彈出現(xiàn)、點擊收起，以及左移出現(xiàn)、返回收起的動畫效果。實際Demo中還涉及部分邏輯關(guān)系，感興趣的可以查看詳細(xì)Demo。
