有关卡片动画的解读

简介: 有关卡片动画的解读

1.先看看试效果图


image.png


卡片其实是利用坐标的移动,动画来实现,以及缩放率(下面先讲解怎么去使用它)


1.首先把.pch 里面的(下面的放到你的工程里面的pch)

#import "CardHeader.h"
#define iPhone5AndEarlyDevice (([[UIScreen mainScreen] bounds].size.height*[[UIScreen mainScreen] bounds].size.width <= 320*568)?YES:NO)
#define Iphone6 (([[UIScreen mainScreen] bounds].size.height*[[UIScreen mainScreen] bounds].size.width <= 375*667)?YES:NO)

3.把下面的类导入工程

image.png

4.在其他控制器跳转到 JLCardViewController.h 控制器(数据都是服务器的数据)


在跳转JLCardViewController.h控制器之前的控制里面传参数(首先是图片,其次是姓名,性别,手机号等等都可以传)

定义4个存值的数组

//头像
@property(nonatomic,strong) NSArray *arrryPicture;
//名字
@property(nonatomic,strong) NSArray *arrryName;
//性别
@property(nonatomic,strong) NSArray *arrrysex;
//手机号
@property(nonatomic,strong) NSArray *arrryphone;

当然在JLCardViewController.h控制器里面我也进行了数组接收这些值

调到控制器的方法走下面的(数组里面的值都是网络请求回来的)

JLCardViewController *jLCardViewController = [JLCardViewController new];
//图片
jLCardViewController.pictureArray = _arrryPicture;
//名字
jLCardViewController.nameArray = _arrryName;
//电话号码
jLCardViewController.phoneArray = _arrryphone;
//性别
jLCardViewController.sexArray = _arrrysex;
[self.navigationController pushViewController:jLCardViewController animated:YES];

5.在 JLCardViewController里面赋值以及进行展示和操作


在229行进行跳转(里面有方法的执行),我采用的是block 进行传值

在这里给大家普及一下block常用的方法(讲解两种)

大家要防止循环引用(Wself这个名字自己定义)

__weak typeof(self) Wself = self;
  • (1) 方法调用block

1.在.h里面(建立吧bock)和设置block的方法
  typedef void(^BLOCK)(NSString *name);
  -(void)setBlock:(BLOCK)block;(在.m属性需要实现)
 2.在.m里面进行实现block方法和属性的转换
  先利用BLOCK设置一个属性 BLOCK valueBlock;
 -(void)setBlock:(BLOCK)block
 {
       valueBlock = block;
 }
 3.在点击的调用的方法里面进行调用
  valueBlock(这里放一个字符串传到外面);
 4.在外面调用
 [类的对象 setBlock:^(NSString *name) {
      这里进行执行block这个方法
 }];
  • (2) 属性调用block
1.在.h里面设置2个字符串
@property(nonatomic,strong) void(^guwen)(NSString *paGe,NSString *name);
2.在.m里面点击调用
 if (self.guwen) {
    self.guwen(pageNumber,self.nameLabel.text);
 }
3.在外面把值取出来
 利用这个类的对象进行调用
 累的对象.guwen = ^(NSString *paGe,NSString *name){
    在此进行调用传值
  };

6.还是讲讲咱们的卡片


  • 卡片可左边拖动默认不喜欢此人,向右喜欢此人(咱们重点讲解点击的事件)
    JLCardViewController其中80-84行代码是我赋值的地方


@"page":[NSString stringWithFormat:@"%d",i+1](存值)
 在JLDragCardView.m里面进行取值(获取自己点击的是第几张:把这个页码传到外面去进行跳转)
 pageNumber = [NSString stringWithFormat:@"%@",self.infoDict[@"page"]];
  • 最后在JLCardViewController 里面的第231行进行实现点击的方法(跳转或者其他的设置)


7.下最后给大家4个demo(前两个本人亲自在此封装的)


1.网络数据的demo

2.本地数据的demo

3.其他人的卡片

4.无规则的卡片

8.下面里面的小方法

<1>.屏幕判断
 #define iPhone5AndEarlyDevice (([[UIScreen mainScreen] bounds].size.height*[[UIScreen mainScreen] bounds].size.width <= 320*568)?YES:NO)
 #define Iphone6 (([[UIScreen mainScreen] bounds].size.height*[[UIScreen mainScreen] bounds].size.width <= 375*667)?YES:NO)


  • 大家路过的点个赞,谢谢


目录
相关文章
|
6月前
|
前端开发
Flutter笔记:光影动画按钮、滚动图标卡片组等
Flutter笔记:光影动画按钮、滚动图标卡片组等
79 0
|
前端开发
【CSS动画02--卡片旋转3D】
【CSS动画02--卡片旋转3D】
|
前端开发
【30天30个小项目】菜单悬停动画
【30天30个小项目】菜单悬停动画
67 0
【30天30个小项目】菜单悬停动画
An动画基础之元件的图形动画与按钮动画
An动画基础之元件的图形动画与按钮动画
322 0
An动画基础之元件的图形动画与按钮动画
|
JavaScript Serverless 容器
ue仿携程轮播图效果(滑动轮播,下方高度自适应)
这篇文章主要介绍了vue仿携程轮播图效果(滑动轮播,下方高度自适应),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
|
JavaScript
制作移动端整页滚动动画
制作移动端整页滚动动画
108 0
按钮卡片特效集锦
20款按钮特效 和 11款卡片合集  
按钮卡片特效集锦
|
前端开发
卡片布局以及鼠标悬浮展示全部
卡片布局以及鼠标悬浮展示全部
135 0
卡片布局以及鼠标悬浮展示全部