利用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

总结

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

(0)

相关推荐

  • iOS中利用CAEmitterLayer实现粒子动画详解

    前言 你肯定见过很酷炫的iOS动画吧,例如微信的表情雨

  • IOS 中动画的暂停与继续播放的详解

    IOS 中动画的暂停与继续播放的详解 在使用动画控制UI的时候,可能会碰到通过手势或其他方式要进行暂停正在进行中的动画,然后再继续.如手指按下时,暂停动画,手指离开时继续动画. 实现原理主要是通过UI的layer进行相关的控制. 暂停动画: - (void)pauselayer:(CALayer *)layer { CFTimeInterval pausedTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil]; layer.s

  • ios基于MJRefresh实现上拉刷新和下拉加载动画效果

    本文介绍了ios基于MJRefresh实现上拉刷新和下拉加载动画效果,分享给大家,具体如下: 目录 1. 头部刷新动画 2.尾部刷新动画 头部刷新动画 #import <MJRefresh/MJRefresh.h> @interface HZNormalHeader : MJRefreshGifHeader @end #import "HZNormalHeader.h" @implementation HZNormalHeader #pragma mark - 重写父类的方

  • IOS swift中的动画的实例详解

    IOS swift中的动画的实例详解 UIView的通用动画 let view = UIView(frame: CGRectMake(10.0, 10.0, 100.0, 40.0)) self.view.addSubview(view) view.backgroundColor = UIColor.lightGrayColor() // 位置改变 var frame = view.frame UIView.animateWithDuration(0.6, delay: 2.0, options

  • iOS 实现简单的加载等待动画示例(思路与实现)

    先看下最后基本要实现的效果 总结一下自己的实现思路与所用到的类 1.这个肯定是要自定义的View类,起名为XDColorCircle吧,最后用的时候达到这样的效果 //创建XDColorCircle的实例化对象 XDColorCircle *circle=[[XDColorCircle alloc]initWithFrame:CGRectMake(0 ,100,self.view.frame.size.width,200)]; //添加到视图上展示 [self.view addSubview:c

  • iOS 下拉刷新动画的实现实例

    先上完整的效果图: 接下去动画分步实现,首先先实现如下效果: 思路是这样的,在偏移值小于等于100的时候绘制一个矩形,当偏移值大于100的时候,底部直线变成曲线,主要是利用CAShapeLayer和UIBezierPath来实现,代码如下 #pragma mark - UIScrollViewDelegate -(void)scrollViewDidScroll:(UIScrollView *)scrollView { CGFloat height = -scrollView.contentOf

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

    前言 本文主要给大家介绍的关于利用iOS开发实现翻转扑克牌动画的方法,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍吧. 动画效果 实现原理 实现原理就是创建三个扑克牌pockerView , 先在扑克牌上添加一个imageview,作为牌的背面.然后实现翻转动画,在翻转的时候将imageview移除,添加另一个imageview作为正面. 核心代码: 方法一: 翻转动画,内部实现还是方法二 + (void)transitionWithView:(UIView *)view dura

  • Android开发简单实现摇动动画的方法

    本文实例讲述了Android开发简单实现摇动动画的方法.分享给大家供大家参考,具体如下: 1.先创建shake.xml <?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="700" android:fromXD

  • iOS开发中音频视频播放的简单实现方法

    前言 我们在平时的iOS开发中,音视频的播放有很多种,目前系统的自带的都属于 AVFoundation 框架,更加接近于底层,所以灵活性很强,更加方便自定义 还有就是第三方音视频视频播放,特点是功能强大,实现简单,支持流媒体,下面来逐一介绍,给大家参考学习,下面来一起看看详细的介绍吧. 播放系统音效或者短音效 注意: 这里的资源长度最多30秒 资源必须在 Target --> Build Phases --> Copy Bundle Resources 引入资源文件,否则获取不到文件 if l

  • iOS开发傻瓜式微信支付的方法教程

    前言 本文主要给大家介绍了关于iOS开发傻瓜式微信支付的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍吧. 方法步骤如下: 先下载微信SDK,如果集成了友盟分享里的微信,那就不用下载,也不用配置环境,因为配置友盟分享的时候已经把微信支付的环境都配置好了(包括框架,schema跳转,白名单)如果没有集成过友盟分享那么请到微信开放平台下载SDK 如果公司没有给微信平台的appkey则需要自己帮公司去微信平台申请 工程的bundle id 也要和在微信平台注册的bundle id一样 链接

  • iOS开发教程之扇形动画的实现

    前言 最近比较闲,正好利用这段时间把现在项目用的东西封装一下,方便以后复用,当然好的东西还是要分享.一起学习,一起进步. 看图片,很显然这是一个扇形图,相信大家对做扇形图得心应手,可能对做扇形动画有一定难度,不急,下面给出代码和思路. 针对项目用的扇形动画,在这个基础上我做了一下封装. 核心代码如下: -(instancetype)initWithCenter:(CGPoint)center radius:(CGFloat)radius bgColor:(UIColor *)bgColor re

  • iOS swift实现转场动画的方法示例

    转场动画介绍 转场动画在我们日常开发中是经常遇到的,所谓转场动画,就是一个控制器的view切到另一个控制器的view上过程中过的动画效果.本例子是实现了在导航控制器的titleView边上慢慢弹出一个控制器.下面话不多说,来一起看看详细的介绍: 效果图: 专场前 专场后 示例代码 首先自定义一个animator类.在需要转场的控制器内,设置代理 //需要设置转场动画的控制器titleViewVc.transitioningDelegate = aniamator//这里的animator是ani

  • iOS开发中WebView的基本使用方法简介

    1.使用UIWebView加载网页 运行XCode 4.3,新建一个Single View Application,命名为WebViewDemo. 2.加载WebView 在ViewController.h添加WebView成员变量和在ViewController.m添加实现 复制代码 代码如下: #import <UIKit/UIKit.h> @interface ViewController : UIViewController {     UIWebView *webView; } @e

  • iOS开发中UISwitch按钮的使用方法简介

    一.第一种创建UISwitch控件的方法,在代码中动态创建. 1.打开Xcode  4.3.2, 新建项目Switch,选择Single View Application. 2.打开ViewController.m文件在viewDidLoad方法里添加代码: 复制代码 代码如下: - (void)viewDidLoad {     [super viewDidLoad];     UISwitch *switchButton = [[UISwitch alloc] initWithFrame:C

  • iOS Swift控制器转场动画示例代码

    前言 在IOS开发中,我们model另外一个控制器的时候,一般都使用默认的转场动画.本文将给大家详细介绍关于iOS Swift控制器转场动画的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 返回效果也可更改 四种转场动画 1. move:源图片位置移动到目标图片位置: 2. circle:根据源控件大小创建圆形或者椭圆形path路径,放大展示目标: 3. tier:源左右,目标由小到大缩放: 4. middle:源的中心点开始放大,返回是缩回到中心. 代码解析 给UI

  • iOS开发中常用的各种动画、页面切面效果

    今天主要用到的动画类是CALayer下的CATransition至于各种动画类中如何继承的在这也不做赘述,网上的资料是一抓一大把.好废话少说切入今天的正题. 一.封装动画方法 1.用CATransition实现动画的封装方法如下,每句代码是何意思,请看注释之. #pragma CATransition动画实现 - (void) transitionWithType:(NSString *) type WithSubtype:(NSString *) subtype ForView : (UIVi

随机推荐