Development and implementation of flip poker animation using IOS

Time:2022-5-21

preface

This article mainly introduces the method of using IOS to develop and realize flip poker animation, which can be shared for your reference and study. Let’s have a detailed introduction.

Animation effect

Implementation principle

The implementation principle is to create three poker pockerviews. First, add an ImageView on the poker as the back of the card. Then realize the flipping animation, remove the ImageView when flipping, and add another ImageView as the front.

Core code:

Method 1: flip animation, internal implementation or method 2


+ (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);

Method 2: uiview animation


[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];

Full code:

ViewController. M file code

#import "ViewController.h"
#import "PockerView.h"
@interface ViewController ()
//Record which card to turn
@property(nonatomic,assign)NSInteger index;
//Animation time
@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"];
 //Cycle to create 3 playing cards
 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];
 }
}

 

//Click the blank space to trigger
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
 //Execute animation
 [self executeAnimation];
}


//Execute animation
- (void)executeAnimation{
 //Get the playing cards according to the tag value
 PockerView *pocker = [self.view viewWithTag:1000+ _index];
 //Method 1
 [self animationWithView:pocker];
 //Method 2
// [self rotateWithView:pocker];
}

//Flop animation method 1 (internal implementation or method 2)
- (void)animationWithView:(PockerView *)view{
 //The delay method moves the card being flipped to the top of the view when it is half flipped
 [self performSelector:@selector(delayAction:) withObject:view afterDelay:_duration / 2];

 //Flip animation
 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];
      }
 }];
}

//Delay method
- (void)delayAction:(UIView *)view{
 [self.view bringSubviewToFront:view];
}


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


//Method 2
- (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 document code

//
// PockerView.h
//Flop
//
//Created by bin on April 20, 2017
// Copyright  ©  2017 bin 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 file code

//
// PockerView.m
//Flop
//
//Created by bin on April 20, 2017
// Copyright  ©  2017 bin All rights reserved.
//

#import "PockerView.h"

@implementation PockerView

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

  //Set shadow
  self.layer.shadowColor = [UIColor blackColor].CGColor;
  self.layer.shadowOffset = CGSizeMake(-10, 0);
  self.layer.shadowOpacity = 0.3;

  //The back of the card
  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];

  //Front of card
  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

GitHub link address:https://github.com/jiangbin1993/pockerRotateAnimation.git

Local download address:http://xiazai.jb51.net/201707/yuanma/pockerRotateAnimation(jb51.net).rar

summary

The above is the whole content of this article. I hope the content of this article can bring some help to your study or work. If you have any questions, you can leave a message. Thank you for your support for developeppaer.