欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2023-12-21 14:44:16
前言 本文主要给大家介绍的关于利用ios开发实现翻转扑克牌动画的方法,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍吧。 动画效果 实现原理 实...

前言

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

动画效果

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

实现原理

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

核心代码:

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

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

[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;
// 动画时间
@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文件代码

//
// 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) {

  // 设置阴影
  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://xiazai.jb51.net/201707/yuanma/pockerrotateanimation(jb51.net).rar

总结

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

上一篇:

下一篇: