服务器之家

服务器之家 > 正文

利用iOS开发实现翻转扑克牌动画的方法

时间:2021-03-23 16:29     来源/作者:斌Jonas

前言

本文主要给大家介绍的关于利用iOS开发实现翻转扑克牌动画的方法,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍吧。

动画效果

利用iOS开发实现翻转扑克牌动画的方法

实现原理

实现原理就是创建三个扑克牌pockerView , 先在扑克牌上添加一个imageview,作为牌的背面。然后实现翻转动画,在翻转的时候将imageview移除,添加另一个imageview作为正面。

核心代码:

方法一: 翻转动画,内部实现还是方法二

?
1
+ (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动画

?
1
2
3
4
5
6
7
[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文件代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
#import "ViewController.h"
#import "PockerView.h"
@interface ViewController ()
// 记录翻第几张牌
@property(nonatomic,assign)NSInteger index;
// 动画时间
@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"];
 // 循环创建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];
 }
}
 
 
 
// 点击空白处触发
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
 // 执行动画
 [self executeAnimation];
}
 
 
// 执行动画
- (void)executeAnimation{
 // 根据tag值取到扑克牌
 PockerView *pocker = [self.view viewWithTag:1000+ _index];
 // 方法一
 [self animationWithView:pocker];
 // 方法二
// [self rotateWithView:pocker];
}
 
// 翻牌动画方法一(内部实现还是方法二)
- (void)animationWithView:(PockerView *)view{
 // 延时方法 正在翻转的牌翻转一半的时候把它移到视图最上面来
 [self performSelector:@selector(delayAction:) withObject:view afterDelay:_duration / 2];
 
 // 翻转动画
 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];
      }
 }];
}
 
// 延时方法
- (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文件代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//
// 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文件代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
//
// 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) {
 
  // 设置阴影
  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

github链接地址:https://github.com/jiangbin1993/pockerRotateAnimation.git

总结

以上就是这篇文章的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对服务器之家的支持。

原文链接:http://www.jianshu.com/p/29f3ed1e3b7d

标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部