利用iOS開發(fā)實(shí)現(xiàn)翻轉(zhuǎn)撲克牌動畫的方法
前言
本文主要給大家介紹的關(guān)于利用iOS開發(fā)實(shí)現(xiàn)翻轉(zhuǎn)撲克牌動畫的方法,分享出來供大家參考學(xué)習(xí),下面話不多說,來一起看看詳細(xì)的介紹吧。
動畫效果

實(shí)現(xiàn)原理
實(shí)現(xiàn)原理就是創(chuàng)建三個撲克牌pockerView , 先在撲克牌上添加一個imageview,作為牌的背面。然后實(shí)現(xiàn)翻轉(zhuǎn)動畫,在翻轉(zhuǎn)的時候?qū)mageview移除,添加另一個imageview作為正面。
核心代碼:
方法一: 翻轉(zhuǎn)動畫,內(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動畫
[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"];
// 循環(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í)行動畫
[self executeAnimation];
}
// 執(zhí)行動畫
- (void)executeAnimation{
// 根據(jù)tag值取到撲克牌
PockerView *pocker = [self.view viewWithTag:1000+ _index];
// 方法一
[self animationWithView:pocker];
// 方法二
// [self rotateWithView:pocker];
}
// 翻牌動畫方法一(內(nèi)部實(shí)現(xiàn)還是方法二)
- (void)animationWithView:(PockerView *)view{
// 延時方法 正在翻轉(zhuǎn)的牌翻轉(zhuǎn)一半的時候把它移到視圖最上面來
[self performSelector:@selector(delayAction:) withObject:view afterDelay:_duration / 2];
// 翻轉(zhuǎn)動畫
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) {
// 設(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
github鏈接地址:https://github.com/jiangbin1993/pockerRotateAnimation.git
本地下載地址:http://xiazai.jb51.net/201707/yuanma/pockerRotateAnimation(jb51.net).rar
總結(jié)
以上就是這篇文章的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
IOS 實(shí)現(xiàn)一個死鎖導(dǎo)致 UI 假死的例子
這篇文章主要介紹了IOS 實(shí)現(xiàn)一個死鎖導(dǎo)致 UI 假死的例子的相關(guān)資料,需要的朋友可以參考下2016-12-12
iOS中一行代碼實(shí)現(xiàn) UIView 鏤空效果
這篇文章主要介紹了一行代碼實(shí)現(xiàn) UIView 鏤空效果,這是一種實(shí)現(xiàn) UIView 鏤空效果的方案,可以快速實(shí)現(xiàn)任意形狀的鏤空、文字的鏤空、帶鏤空的毛玻璃效果等。需要的朋友可以參考下2018-11-11
舉例講解設(shè)計(jì)模式中的原型模式在iOS應(yīng)用開發(fā)中的作用
這篇文章主要介紹了設(shè)計(jì)模式中的原型模式在iOS應(yīng)用開發(fā)中的作用,示例代碼為傳統(tǒng)的Objective-C,需要的朋友可以參考下2016-04-04
ios學(xué)習(xí)筆記之基礎(chǔ)數(shù)據(jù)類型的轉(zhuǎn)換
在編碼過程中,數(shù)據(jù)的處理是必要的。眾多數(shù)據(jù)中,NSString、NSData、NSArray、 NSDictionary等數(shù)據(jù)類型是常用的,對付它們?nèi)菀?,但是在多個數(shù)據(jù)類型之間轉(zhuǎn)換就需要技巧了。本文主要給大家介紹ios中基礎(chǔ)數(shù)據(jù)類型的轉(zhuǎn)換,有需要的下面來一起看看吧。2016-11-11

