iOS实现卡片堆叠效果

本文实例为大家分享了iOS实现卡片堆叠效果的具体代码，供大家参考，具体内容如下

如图，这就是最终效果。

去年安卓5.0发布的时候，当我看到安卓全新的Material Design设计语言后，真的是喜欢的不得了，这种设计语言不同于偏平式设计以及卡片式设计。简约，自然。直到15年初，偶然看到CM团队已经发布了好多基于安卓5.0的ROM，恰巧有我手机对应的版本，便迫不及待的刷了固件，体验了一把。
不得不说的是，安卓的这个版本简直历史性变革，更加流畅，好用，而且在开发者模式下，发现这个版本移除了Dalvik模式，全部采用了ART模式(在安卓4.4的时候，这两种是可以选择的)，虽然我用的时候会出现一些小bug(大概一周会出现1-2次明显卡顿)，不过用起来还是很舒服的。

然后就说一下我比较喜欢的几个地方吧。

1.后台任务管理器样式，卡片堆叠效果，第一次看见这个感觉酷爆了，因为我从来没想过能在手机上出现这么炫酷的效果。然后就是苹果在一年后9.0的系统后台管理界面也使用了这种设计，只不过是横向滚动，我想说一个大写的呵呵。
2.沉浸式设计，额…这个有点抄袭苹果设计的嫌疑，不过我觉得比苹果的更加好看 简约。虽然在4.4版本上可以设置状态栏透明了，但是我做过的一些东西有时候还是会蒙上大概不透明度为50%的黑色图层(可能是我的打开方式有误).
3.短信，日历右下角的那个小加号。虽然看起来没什么，但是那个很有点点睛之笔的意思啊。每个页面的颜色搭配都很漂亮，那个小加号的颜色也是点睛色。看起来很舒服，很有纸质阅读的感受(后来看到说当时谷歌就是以这种感觉为基础设计的这套设计语言).
4.长阴影。不多说了，目测一大波App的icon都采用这个了。

思路

就是利用scrollview的内容视图的偏移量来计算每个view的位置，然后利用iOS中滚动视图在顶部以及底部继续拉的时候的那个效果来相应的完成边界的效果（安卓的滚动视图…呵呵，不重写的话就拉不动了）。
其实就那么几条公式就搞定了。

核心代码

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{

 [self.viewArr enumerateObjectsUsingBlock:^(UIView * view, NSUInteger idx, BOOL *stop) {

 NSInteger value = self.distance;

 /*************设置位置***************/
 CGRect rect = view.frame;
 //view最底位置
 NSInteger min_y = self.top + value*idx;
 rect.origin.y = min_y - (scrollView.contentOffset.y);

 //view的最高位置
 if (scrollView.contentOffset.y >= value*idx-value*pow(2.0, idx)/pow(2.0, self.dataArr.count)){
  rect.origin.y = self.top+value*pow(2.0, idx)/pow(2.0, self.dataArr.count);
 }
 if (scrollView.contentOffset.y > scrollView.contentSize.height- SCREEN_HEIGTH) {
  rect.origin.y = rect.origin.y -(scrollView.contentOffset.y -(scrollView.contentSize.height-SCREEN_HEIGTH));
 }
 view.frame = rect;

 /*************设置大小***************/
 CGFloat scale = 0.60;
 scale = (rect.origin.y*0.75 +60)/1000+scale >=0.9?0.9:(rect.origin.y*0.75 +50)/1000+scale;
 view.layer.transform = CATransform3DMakeScale(scale, scale, 1);
 }];
}

[git源码]

1.使用时同UITableView类似。
2.可以详细看一下接口函数就会知道怎么使用了。
3.已经实现了复用。
4.后续会一直完善。
5.如果代码能帮助到您，非常荣幸。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • iOS利用余弦函数实现卡片浏览工具

    本文实例为大家分享了iOS利用余弦函数实现卡片浏览工具的具体代码,供大家参考,具体内容如下 一.实现效果 通过拖拽屏幕实现卡片移动,左右两侧的卡片随着拖动变小,中间的变大.效果如下: 二.原理说明 1.上面的动画效果是根据余弦函数的曲线特性实现的,先看一下函数曲线y=cos(x),在区间-π/2 到 π/2的范围内,y的值在x的0的是后是最大的,左右则越来越小. 2.可以将被滚动的卡片的高度按照0.0~1.0的比例放大缩小,效果如下: 3.放置到手机屏幕上的效果如下: 三.代码 封装每个卡片为C

  • iOS实现卡片式滚动效果 iOS实现电影选片效果

    本文实例为大家分享了iOS实现卡片式滚动效果的具体代码,供大家参考,具体内容如下 先来张效果图吧: 直接上源码了就(工作比较忙,就不一一解释了,有问题可以Q一同讨论,793136807): CardScrollView.h #import <UIKit/UIKit.h> @interface CardView : UIView @property (nonatomic, assign) CGFloat zoomRate; @property (nonatomic, strong) NSStri

  • iOS自定义View实现卡片滑动

    iOS自定义View实现卡片滑动

    本文实例为大家分享了iOS自定义View实现卡片滑动效果的具体代码,供大家参考,具体内容如下 说明 控件基于UIView封装完成,采用UIPanGestureRecognizer监听自身的触摸事件,以此处理各种滑动动画操作. 内容之间可以循环切换,采用类似tableView加载机制,达到复用效果 效果 代码实现 #import <UIKit/UIKit.h> @class SMSwipeView; @protocol SMSwipeDelegate <NSObject> @requ

  • iOS实现3D卡片式轮播效果

    iOS实现3D卡片式轮播效果

    本文实例为大家分享了iOS实现3D卡片式轮播效果的具体代码,供大家参考,具体内容如下 效果: 参考UITableView的UITableViewDataSource和UITableViewDelegate两个方法实现:支持五险轮播,可以加载本地图片,也可以加载网络图片,可以根据自己的需求自定义 Demo地址 UITableViewDelegate /** * 当前显示cell的Size(中间页显示大小) * * @param flowView <#flowView description#>

  • iOS实现卡片堆叠效果

    本文实例为大家分享了iOS实现卡片堆叠效果的具体代码,供大家参考,具体内容如下 如图,这就是最终效果. 去年安卓5.0发布的时候,当我看到安卓全新的Material Design设计语言后,真的是喜欢的不得了,这种设计语言不同于偏平式设计以及卡片式设计.简约,自然.直到15年初,偶然看到CM团队已经发布了好多基于安卓5.0的ROM,恰巧有我手机对应的版本,便迫不及待的刷了固件,体验了一把. 不得不说的是,安卓的这个版本简直历史性变革,更加流畅,好用,而且在开发者模式下,发现这个版本移除了Dalv

  • Android 实现卡片堆叠钱包管理动画效果

    Android 实现卡片堆叠钱包管理动画效果

    目录 实现原理: 思路: 重写adView 方法 确保每个子View的测量属性宽度填满父组件 重写onLayout 方法是关键 源码 先上效果图 源码 github.com/woshiwzy/Ca… 实现原理: 1.继承LinearLayout2.重写onLayout,onMeasure 方法3.利用ValueAnimator 实施动画4.在动画回调中requestLayout 实现动画效果 思路: 1.用Bounds 对象记录每一个CardView 对象的初始位置,当前位置,运动目标位置 2.

  • IOS等待时动画效果的实现

    IOS等待时动画效果的实现

    查询时间或长或短,为了提升用户体验,目前用的比较多的手段之一就是查询等待时添加一个动态等待效果.当我们在请求网络时加载页面时有个动作效果,效果图如下: 源代码可以网上找开源项目Coding.net,上面的效果原理为两张图片组合,外面那个则为动画转动,里面的图标则是透明度的变化:主要代码如下: 1:把它封装在EaseLoadingView里面 @interface EaseLoadingView : UIView @property (strong, nonatomic) UIImageView

  • IOS图片设置毛玻璃效果

    推荐阅读:ios毛玻璃效果的实现及图片模糊效果的三种方法 废话不多说了,直接给大家贴代码了,具体代码如下所示: // 创建需要的毛玻璃特效类型 UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]; // 毛玻璃view 视图 UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:blurEf

  • iOS仿擦玻璃效果的实现方法

    iOS仿擦玻璃效果的实现方法

    照例先看下效果图 实现思路 动手前先想了下思路,就是利用母鸡哥讲的涂鸦 + 设置layer的mask的方式,这样做可以说是非常简单了.然后就用了半下午的时间写完了,效果基本和大神写得那个一样,而且对比了下代码量,我写得真是简单明了呀,用了不到大神代码量一半的代码就完成了同样的功能,心情愉悦.然后我又跑了大神的应用看了看cpu利用率(我用5s跑的),大约最高保持在百分这十几,感觉有点高但也可以,再跑我自己写得,令我大吃了一惊,随便划几下就百分之40+了,这么个小东西耗这么多cpu那这也太low了.

  • iOS自带动画效果的实例代码

     1.普通动画: [UIView beginAnimations:nil context:nil]; [UIView setAnimationDuration:2]; frame.origin.x += 150; [img setFrame:frame]; [UIView commitAnimations]; 2.连续动画(一系列图像): NSArray *myImages = [NSArray arrayWithObjects: [UIImage imageNamed:@"myImage1.p

  • 基于iOS实现图片折叠效果

    基于iOS实现图片折叠效果

    本文实例为大家分享了iOS实现图片折叠效果的具体代码,供大家参考,具体内容如下 一.分析与说明 1.1 分析界 效果 当鼠标在图片上拖动的时候,图片上有一个折叠的效果. 这种折叠效果其实就是图片的上半部分绕着X轴做一个旋转的操作. 我们图片的旋转都是绕着锚点进 旋转的.所以如果是一张图片的,办不到只上图 的上半部 分进 个旋转. 其实是两张图片, 把两张图片合成一张图片的方法, 实现方案.弄上下两张图 ,上部图片只显示上半部分, 下部图片只显示下半部分. 1.2 如果让 张图 只显 上半部分或者

  • IOS展开三级列表效果示例

    IOS展开三级列表效果示例

    效果图如下: #import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDelegate> @property (strong, nonatomic) UIWindow *window; @end #import "AppDelegate.h" #import "RootViewController.h" @interface AppDelegate

  • iOS实现简易抽屉效果、双边抽屉效果

    本文实例为大家分享了iOS实现抽屉效果的全部代码,供大家参考,具体内容如下 iOS实现简易抽屉效果,代码: @interface ViewController () { UIView* _leftView; } @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from

  • Android中实现iOS中的毛玻璃效果

    Android中实现iOS中的毛玻璃效果

    为了实现毛玻璃效果,我们需要一组compute kernels(.rs文件中编写),及一组用于控制renderScript相关的Javaapi(.rs文件自动生成为Java类). 由于compute kernels的编写需要一定的学习成本,从JELLY_BEAN_MR1开始,Androied内置了一些compute kernels用于常用的操作,其中就包括了Gaussian blur. 下面,通过实操来讲解一下RenderScript来实现高斯模糊,最终实现效果(讲文字背景进行模糊处理): 实现

随机推荐