如何使用iOS開(kāi)發(fā)實(shí)現(xiàn)翻轉(zhuǎn)撲克牌動(dòng)畫(huà)

這篇文章主要介紹了如何使用iOS開(kāi)發(fā)實(shí)現(xiàn)翻轉(zhuǎn)撲克牌動(dòng)畫(huà)，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

動(dòng)畫(huà)效果

實(shí)現(xiàn)原理

實(shí)現(xiàn)原理就是創(chuàng)建三個(gè)撲克牌pockerView , 先在撲克牌上添加一個(gè)imageview，作為牌的背面。然后實(shí)現(xiàn)翻轉(zhuǎn)動(dòng)畫(huà)，在翻轉(zhuǎn)的時(shí)候?qū)mageview移除，添加另一個(gè)imageview作為正面。

核心代碼：

方法一： 翻轉(zhuǎn)動(dòng)畫(huà)，內(nèi)部實(shí)現(xiàn)還是方法二

+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^ __nullable)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0);

方法二 ：UIView動(dòng)畫(huà)

[UIView beginAnimations:@"aa" context:nil];
 [UIView setAnimationDuration:_duration];
 [UIView setAnimationCurve:UIViewAnimationCurveLinear];
 [view.imgview1 removeFromSuperview];
 [view addSubview:view.imgview2];
 [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:view cache:NO];
 [UIView commitAnimations];

完整代碼：

ViewController.m文件代碼

#import "ViewController.h"
#import "PockerView.h"
@interface ViewController ()
// 記錄翻第幾張牌
@property(nonatomic,assign)NSInteger index;
// 動(dòng)畫(huà)時(shí)間
@property(nonatomic,assign)CGFloat duration;
@end

@implementation ViewController

 

- (void)viewDidLoad {
 [super viewDidLoad];

 self.view.backgroundColor = [UIColor blackColor];
 _duration = 0.5;
 _index = 0;
 NSArray *arr = @[@"2.jpg",@"3.jpg",@"4.jpg"];
 // 循環(huán)創(chuàng)建3張撲克牌
 for (int i = 0; i < 3; i++) {
  PockerView *pocker = [[PockerView alloc]initWithFrame:CGRectMake(100 + 80 * i, 100, 100, 150) imageName:arr[i]];
  pocker.tag = 1000 + i;
  [self.view addSubview:pocker];
 }
}

 

// 點(diǎn)擊空白處觸發(fā)
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
 // 執(zhí)行動(dòng)畫(huà)
 [self executeAnimation];
}


// 執(zhí)行動(dòng)畫(huà)
- (void)executeAnimation{
 // 根據(jù)tag值取到撲克牌
 PockerView *pocker = [self.view viewWithTag:1000+ _index];
 // 方法一
 [self animationWithView:pocker];
 // 方法二
// [self rotateWithView:pocker];
}

// 翻牌動(dòng)畫(huà)方法一（內(nèi)部實(shí)現(xiàn)還是方法二）
- (void)animationWithView:(PockerView *)view{
 // 延時(shí)方法 正在翻轉(zhuǎn)的牌翻轉(zhuǎn)一半的時(shí)候把它移到視圖最上面來(lái)
 [self performSelector:@selector(delayAction:) withObject:view afterDelay:_duration / 2];

 // 翻轉(zhuǎn)動(dòng)畫(huà)
 UIViewAnimationOptions option = UIViewAnimationOptionTransitionFlipFromLeft;
 [UIView transitionWithView:view      duration:_duration
      options:option
     animations:^ {
      [view.imgview1 removeFromSuperview];
      [view addSubview:view.imgview2];
     }
     completion:^(BOOL finished){
      _index++;
      if (_index < 3) {
       [self executeAnimation];
      }
 }];
}

// 延時(shí)方法
- (void)delayAction:(UIView *)view{
 [self.view bringSubviewToFront:view];
}


- (void)delayAction2{
 _index++;
 if (_index < 3) {
  [self executeAnimation];
 }
}


// 方法二
- (void)rotateWithView:(PockerView *)view{

 [self performSelector:@selector(delayAction:) withObject:view afterDelay:_duration / 2];
 [self performSelector:@selector(delayAction2) withObject:nil afterDelay:_duration];
 [UIView beginAnimations:@"aa" context:nil];
 [UIView setAnimationDuration:_duration];
 [UIView setAnimationCurve:UIViewAnimationCurveLinear];
 [view.imgview1 removeFromSuperview];
 [view addSubview:view.imgview2];
 [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:view cache:NO];
 [UIView commitAnimations];
}
@end

PockerView.h文件代碼

//
// PockerView.h
// 翻牌
//
// Created by 斌 on 2017/4/20.
// Copyright © 2017年 斌. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface PockerView : UIView

@property(nonatomic,strong)UIImageView *imgview1;
@property(nonatomic,strong)UIImageView *imgview2;

- (instancetype)initWithFrame:(CGRect)frame imageName:(NSString *)imageName;

@end

PockerView.m文件代碼

//
// PockerView.m
// 翻牌
//
// Created by 斌 on 2017/4/20.
// Copyright © 2017年 斌. All rights reserved.
//

#import "PockerView.h"

@implementation PockerView

- (instancetype)initWithFrame:(CGRect)frame imageName:(NSString *)imageName{
 self = [super initWithFrame:frame];
 if (self) {

  // 設(shè)置陰影
  self.layer.shadowColor = [UIColor blackColor].CGColor;
  self.layer.shadowOffset = CGSizeMake(-10, 0);
  self.layer.shadowOpacity = 0.3;

  // 牌的背面
  self.imgview1 = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];
  _imgview1.backgroundColor = [UIColor redColor];
  _imgview1.image = [UIImage imageNamed:@"1.jpeg"];
  [self addSubview:_imgview1];
  self.imgview1.layer.cornerRadius = 10;
  self.imgview1.clipsToBounds = YES;
  self.imgview1.layer.borderWidth = 5;
  self.imgview1.layer.borderColor = [[UIColor whiteColor] CGColor];

  // 牌的正面
  self.imgview2 = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];
  _imgview2.backgroundColor = [UIColor redColor];
  _imgview2.image = [UIImage imageNamed:imageName];
  self.imgview2.layer.cornerRadius = 10;
  self.imgview2.clipsToBounds = YES;
  self.imgview2.layer.borderWidth = 5;
  self.imgview2.layer.borderColor = [[UIColor whiteColor] CGColor];
 }
 return self;
}
@end

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何使用iOS開(kāi)發(fā)實(shí)現(xiàn)翻轉(zhuǎn)撲克牌動(dòng)畫(huà)”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!