最近公司要修改支付彈窗的顯示胯陋，要實(shí)現(xiàn)類似支付寶彈窗那種的地步彈出一個(gè)View蕊温，于是本人寫(xiě)了個(gè)相關(guān)的Demo袱箱，效果圖如下：
首先要考慮彈出視圖的動(dòng)畫(huà)，剛開(kāi)始試過(guò)好多動(dòng)畫(huà)效果义矛，可是都不理想发笔，最后發(fā)現(xiàn)有時(shí)候最簡(jiǎn)單的就可以滿足我們最基礎(chǔ)的需求，只需實(shí)現(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) {
}];
上面只是實(shí)現(xiàn)了彈出視圖的過(guò)程了讨，下面還要考慮如何實(shí)現(xiàn)點(diǎn)擊彈出View的關(guān)閉按鈕，將View慢慢下移收起噪矛，秉著“自己的事情自己做”的原則量蕊，點(diǎn)擊View上關(guān)閉按鈕的事件就在View自身里面解決，于是有了下段代碼：
__weak PayView *weakSelf = self;
[UIView animateWithDuration:0.5 animations:^{
weakSelf.frame = CGRectMake(0, HEIGHT, WIDTH, HEIGHT);
} completion:^(BOOL finished) {
}];
有了上面兩個(gè)基礎(chǔ)動(dòng)畫(huà)艇挨，支付彈窗是能夠?qū)崿F(xiàn)基本的彈出和消失了残炮，可是不能實(shí)現(xiàn)點(diǎn)擊非支付部分支付彈窗也能收起的效果，于是我又做了下面的工作
// 定義一塊backgroungView缩滨，用來(lái)存放所有支付彈窗的布局控件
@property (nonatomic, strong) UIView *backgroungView;
然后添加如下方法势就，用來(lái)實(shí)現(xiàn)點(diǎn)擊空白處支付彈窗也可以自己下移
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
[self upDownSelf];
}
可是發(fā)現(xiàn)，如果僅僅這樣寫(xiě)的話脉漏，會(huì)出現(xiàn)點(diǎn)擊到支付彈窗上苞冯，支付彈窗也會(huì)下移，于是乎我完善了上面的方法
- (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司忱，需要再點(diǎn)擊支付方式按鈕時(shí)從右向左移出皇忿，點(diǎn)擊返回按鈕時(shí)再?gòu)淖笙蛴乙瞥肓艘幌掳l(fā)現(xiàn)其實(shí)跟上面的動(dòng)畫(huà)一樣坦仍，只是上面是改變y軸鳍烁，這個(gè)是改變x軸而已。但是這些動(dòng)畫(huà)實(shí)現(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)入選擇支付方式頁(yè)面
- (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 - 返回上一頁(yè)支付頁(yè)面
- (void)returnToPayView {
__weak PaymentMethodView *weakSelf = self;
[UIView animateWithDuration:0.5 animations:^{
weakSelf.frame = CGRectMake(WIDTH, 0, WIDTH, weakSelf.frame.size.height);
} completion:^(BOOL finished) {
}];
}
這樣一來(lái)，簡(jiǎn)單的從下彈出支付視圖梳玫，點(diǎn)擊支付方式彈出選擇支付方式的視圖的Demo就完成了爹梁，本文只是講解一個(gè)上彈出現(xiàn)、點(diǎn)擊收起提澎，以及左移出現(xiàn)卫键、返回收起的動(dòng)畫(huà)效果。實(shí)際Demo中還涉及部分邏輯關(guān)系虱朵，感興趣的可以查看詳細(xì)Demo莉炉。
