最近剛上線二維碼的支付功能
產(chǎn)品要求:給我照著支付寶跟微信支付抄!M雷琛:焓 !9酢0墒选!B榫鳌:墼ⅰ!S铡I肼省!6⊙邸?攴铩U蜒场0摺C晔亍!u宸纭BА!;葑摹I骱恪!D於伞H诩怼!G骶唷AQ酢!=诟M舛ⅰ!R砣浮1ス丁!@窃āO浒尽!6陲薄L沟堋!
支付的話官地,可能會涉及一些比較隱私的東西酿傍,這篇文章不會去詳細說明,本篇文章主要要說的是 二維碼點擊以及條形碼點擊的效果(已經(jīng)封裝好了驱入,一拖即用)
展示一下效果圖(項目只能真機赤炒,就沒有截取GIF了)
--------------------------------分割線------------------------------
具體的需求:
1、點擊二維碼中心放大亏较,再次點擊莺褒,中心縮小至原來的尺寸
2、點擊條形碼雪情,旋轉(zhuǎn)橫屏放大遵岩,并顯示條形碼編號
需求就是這樣,分析一下,也不是很難尘执,主要就是動畫的東西舍哄。
1、對于二維碼點擊方法和縮小
①首先要考慮一下誊锭,直接放大縮小表悬,會很難看,而且也不便于后期修改(主要怕產(chǎn)品又要修改)丧靡。所以蟆沫,我們在放大的時候,我們可以添加一個白色的iamgeView温治,覆蓋整個屏幕饭庞,再在這個iamgeView上面,添加一個小的imageView熬荆,用于加載二維碼但绕,這就需要傳一個image進去。
(這個背景圖需要加載window上面)
//當(dāng)前imageview的圖片
UIImage *image = currentImageview.image;
//當(dāng)前視圖
UIWindow *window = [UIApplication sharedApplication].keyWindow;
//背景
UIView *backgroundView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
放大的動畫
//動畫放大所展示的ImageView
[UIView animateWithDuration:0.4 animations:^{
// CGFloat y,width,height;
// y = ([UIScreen mainScreen].bounds.size.height - image.size.height * [UIScreen mainScreen].bounds.size.width / image.size.width) * 0.5;
// //寬度為屏幕寬度
// width = [UIScreen mainScreen].bounds.size.width;
// //高度 根據(jù)圖片寬高比設(shè)置
// height = image.size.height * [UIScreen mainScreen].bounds.size.width / image.size.width;
[imageView setFrame:CGRectMake(0, 0, oldframe.size.width * 1.2, oldframe.size.height *1.2)];
imageView.center =backgroundView.center;
//重要惶看! 將視圖顯示出來
[backgroundView setAlpha:1];
} completion:^(BOOL finished) {
}];
2捏顺、條形碼的思路如上,也就是動畫不同纬黎,具體可以查看代碼
具體的使用
#pragma mark - **************** 手勢觸發(fā)事件 ****************
- (void)qrTapAction {
NSLog(@"點擊二維碼");
[LPScanImageView scanBigImageWithImageView:self.QRCodeImgView];
}
- (void)barCodeTapAction {
NSLog(@"點擊條形碼");
[LPScanImageView scanBarCodeImageWithImageView:barCodeBgView barcode:self.QRCode];
}
具體代碼已經(jīng)貼在github上面幅骄,求start
https://github.com/bommmmmmm/LPScanImageViewAnimation.git