iOS UIcollectionView 实现卡牌翻转效果

- (void)viewDidLoad {

[super viewDidLoad];

// Do any additional setup after loading the view, typically from a nib.

self.title = @"卡牌翻转效果";

self.edgesForExtendedLayout = UIRectEdgeNone;

[self.view addSubview:self.collectionView];

NSArray * arr = @[@"0",@"0",@"0",@"0",@"0",@"0",@"0",@"0",@"0",@"0",@"0",@"0",@"0",@"0",@"0",@"0",@"0",@"0",@"0",@"0",@"0",@"0",@"0",@"0",@"0",@"0",@"0",@"0",@"0",@"0",@"0",@"0",@"0",@"0",@"0",@"0",@"0"];

[arr enumerateObjectsUsingBlock:^(id  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {

Model *model =[[Model alloc] init];

model.select = [obj boolValue];

[self.dataArray addObject:model];

}];

[self.collectionView reloadData];

}

-(NSMutableArray *)dataArray{

if (!_dataArray) {

_dataArray = [NSMutableArray array];

}

return _dataArray;

}

-(UICollectionView *)collectionView{

if (!_collectionView) {

UICollectionViewFlowLayout * layout = [[UICollectionViewFlowLayout alloc] init];

// 定义大小

layout.itemSize = CGSizeMake((appWidth - 40)/2.0, 0.8*(appWidth - 40)/2.0);

// 设置最小行间距

layout.minimumLineSpacing = 10;

// 设置垂直间距

layout.minimumInteritemSpacing = 10;

layout.sectionInset = UIEdgeInsetsMake(15, 15, 15, 15);

// 设置垂直间距

layout.headerReferenceSize = CGSizeMake(0, 0);

// 设置滚动方向(默认垂直滚动)

layout.scrollDirection = UICollectionViewScrollDirectionVertical;

_collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, appWidth, appHeight - 64) collectionViewLayout:layout];

_collectionView.backgroundColor = [UIColor clearColor];

_collectionView.delegate = self;

_collectionView.dataSource = self;

[_collectionView registerNib:[UINib nibWithNibName:NSStringFromClass([HomeCollectionViewCell class]) bundle:nil] forCellWithReuseIdentifier:@"homeCell"];

}

return _collectionView;

}

-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{

return 1;

}

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{

return self.dataArray.count;

}

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

HomeCollectionViewCell * cell =  [collectionView dequeueReusableCellWithReuseIdentifier:@"homeCell" forIndexPath:indexPath];

Model * model = self.dataArray[indexPath.item];

if (model.select == YES) {

cell.secondView.hidden = YES;

cell.firstview.hidden = NO;

}else{

cell.secondView.hidden = NO;

cell.firstview.hidden = YES;

}

cell.bt.tag = indexPath.item;

[cell.bt addTarget:self action:@selector(didBtAction:event:) forControlEvents:UIControlEventTouchUpInside];

return cell;

}

-(void)collectionView:(UICollectionView *)collectionView willDisplayCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath{

Model* model = self.dataArray[indexPath.item];

HomeCollectionViewCell * cell1 = (HomeCollectionViewCell *)cell;

if (model.select == YES) {

cell1.secondView.hidden = YES;

cell1.firstview.hidden = NO;

}else{

cell1.secondView.hidden = NO;

cell1.firstview.hidden = YES;

}

}

- (void)didBtAction:(UIButton *)sender event:(UIEvent *)event{

NSSet *touches = [event allTouches];

UITouch *touch = [touches anyObject];

CGPoint position = [touch locationInView:self.collectionView];

NSIndexPath *indexPath = [self.collectionView indexPathForItemAtPoint:position];

//    NSIndexPath *indexPath = [NSIndexPath indexPathForRow:sender.tag inSection:0];

HomeCollectionViewCell *cell = (HomeCollectionViewCell*)[self.collectionView cellForItemAtIndexPath:indexPath];

//这里时查找视图里的子视图(这种情况查找,可能时因为父视图里面不只两个视图)

//    NSInteger fist= [[cell subviews] indexOfObject:[cell viewWithTag:1000]];

//    NSInteger seconde= [[cell subviews] indexOfObject:[cell viewWithTag:2000]];

Model* model = self.dataArray[indexPath.item];

// 3、3D翻转动画

[UIView animateWithDuration:1.0 animations:^{

if (model.select == YES)

{

cell.secondView.hidden = NO;

cell.firstview.hidden = YES;

model.select = NO;

[self.dataArray replaceObjectAtIndex:indexPath.item withObject:model];// 当前显示的是正面视图

[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:cell cache:YES];

}

else

{

cell.secondView.hidden = YES;

cell.firstview.hidden = NO;

model.select = YES;

[self.dataArray replaceObjectAtIndex:indexPath.item withObject:model];// 当前显示的是背面视图

[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:cell cache:YES];

}

}];

}

时间: 2024-10-10 13:23:38

iOS UIcollectionView 实现卡牌翻转效果的相关文章

TCG卡牌游戏研究:《炉石战记:魔兽英雄传》所做的改变

转自:http://www.gameres.com/665306.html TCG演进史 说到卡牌游戏,大家会联想到什么呢? 是历史悠久的扑克牌.风靡全球的<MTG 魔法风云会>与<游戏王>.结合数位与现实的<三国志大战>.或是在手机上掀起收集热潮的<龙族拼图>和<百万亚瑟王>? 卡牌游戏这个统称,其内容可以跟各式各样的玩法结合,而暴风雪新推出的<炉石战记>(以下简称炉石)所选择的玩法,是让玩家自行组牌.进行对战的「集换式卡牌游戏」(

cocos2d-x 3.3 之卡牌设计 NO.3 卡牌移动

上次说了如何播放卡牌翻转的动画,卡牌翻到正面后,就需要让玩家将卡牌拖拽至出场区域或者墓地区域了. 这里重复一下之前的内容: 1.重载触控函数: virtual bool onTouchBegan(Touch* touch, Event* event); virtual void onTouchMoved(Touch* touch, Event* event); virtual void onTouchEnded(Touch* touch, Event* event); 2.在init里添加: /

cocos2d-x 3.0游戏实例学习笔记 《卡牌塔防》第0步---知识点总结&amp;效果预览

/* 说明: **1.本次游戏实例是<cocos2d-x游戏开发之旅>上的最后一个游戏,这里用3.0重写并做下笔记 **2.我也问过木头本人啦,他说:随便写,第一别完全照搬代码:第二可以说明是学习笔记 **3.这里用cocos2d-x 3.0版本重写,很多地方不同,但是从重写过程中也很好的学习了cocos2d-x */ 环境:Win7 .cocos2d-x 3.0final .C++ .VS2012 笔记思路:后面就按这种思路写笔记啦 1.首先给出每次实现的效果截图 2.然后给出设计思路 3.

ios按钮点击后翻转效果

代码是网上找到的,不过找到的时候直接复制下来不能用,稍微整理下,为和我一样水平的菜鸟观摩一下下. (1)引入“QuartzCore.framework”库,头部引用. C代码   #include<QuartzCore/CoreAnimation.h> (2)直接上代码,你懂的. C代码   -(IBAction)buttonP:(id)sender{ [self buttonAnimation:sender]; } - (CAAnimation *) animationRotate { CA

css3实现卡牌旋转与物体发光效果

效果演示 http://demo.qpdiy.com/hxw/CSS3/rotate+light.html 物体旋转: 卡牌同一位置放2张图片,通过设置3D动画旋转实现 animation: cardfront 2s infinite; -webkit-animation: cardfront 2s infinite; @keyframes cardfront{ 0%{transform: rotateY(0deg);} 50%{transform: rotateY(180deg);} 100%

cocos2d-X 卡牌手机游戏《刀塔传奇》完整源码下载

源码介绍 <刀塔传奇>--cocos2d-x手机游戏源码下载 <刀塔传奇>是一款以Dota故事为背景的动作卡牌手机游戏战斗DEMO,以创新的轻操作战斗玩法,打破传统卡牌游戏操作呆板.无脑等待的瓶颈,玩家指尖手动掌控英雄大招,把握施放大招的顺序,尽享酷炫技能带来的极致视觉体验.<刀塔传奇> iOS/安卓平台长时间高居排行榜榜首,创下了2014年手游人气神话. 大小:7 MB 测试环境 引擎版本:3.0 开发工具:vs2012 测试说明:基于cocos2d-x3.0和vs2

自然系卡牌主要增加血量m--4武侠联盟游戏

在<游戏降临>这一款手游中,有很多不同类型不同属性的卡牌,卡牌一共分为5个系,近百种卡牌,让玩家为之倾心.卡牌分为火,水,自然,雷,光5个系,火系卡牌主要增加攻击力,水系卡牌主要增加幸运,自然系卡牌主要增加血量,雷系卡牌主要增加敏捷,光系卡牌主要增加防御.每一种卡牌都有其特定的作用和效果,只要玩家善于运用和搭配,就能发挥卡牌的最大能量,引爆战争. 战术阵型的作用会愈来愈突出的.举个例子,你的球队实力2000,但却打不过实力1800的球队,这就是阵容战术在作怪!阵型战术的相克原理是:组织克防守,

【OpenGL】Shader实例分析(六)- 卡牌特效

转发请保持地址:http://blog.csdn.net/stalendp/article/details/30989295 本文将介绍怎么通过alpha通道来隐藏信息,并实现卡牌特效.运行效果如下: 代码如下: Shader "stalendp/imageShine" { Properties { _MainTex ("image", 2D) = "white" {} _NoiseTex("noise", 2D) = &qu

网页特效:3D翻转效果

前段时间在极客学院的网站上看到了一个网页效果,就是鼠标移到某个块上,出现3D翻转的效果显示背面的内容(http://www.jikexueyuan.com/,在页面的最后面).对于前端也只是了解一些,当时还不知道这个效果怎么做的,于是查看了它的源码,发现用到了css3的一个属性backface-visibility,这个属性也要配合transform:rotateY来使用,如果将某个div或dom元素的backface-visibility设置为hidden时,表示的是当该div处于背面的时候是