UICollectionViewFlowLayout的隐式动画

前几天在gitHub看到个不错的效果,就是DaiExpandCollectionView,效果如图:

所以赶紧下下来源码看看他怎么实现的,打开源码看了半天,发现他没写什么关于动画的代码啊。。。

经高人指点,才明白原来他是利用了UICollectionViewFlowLayout的隐式动画!

所谓隐式动画,就是系统自带的动画了,其实也不是什么高大上的东西,关键是我怎么就没想到可以这么用!

研究了半天人家的源码,基本了解了他实现的思路,然后发现他的这个库用起来比较不方便,需要继承他的collectionView,而且不能自定义cell大小,不能很好的适配各种尺寸的屏幕,

但这个库我确实很喜欢,所以就自己仿写了一个,就是LXMExpandLayout,顺便解决下上面发现的问题,地址在这里: https://github.com/Phelthas/LXMExpandLayout

效果如图:

               

还是来说说思路和原理的问题

基本思路是:

继承系统的UICollectionViewFlowLayout,利用UICollectionViewFlowLayout已有的各种属性和效果,对其做出适当的修改已达到自己想要的效果

具体来说就是:

1,重载  - (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect;方法,

用 [super layoutAttributesForElementsInRect:newRect]获取各个元素在 UICollectionViewFlowLayout中的layoutAttributes。

然后修改其属性

2,属性可不是随便改的,这个得给原作者点个赞,他想出来的这个规则,让这个属性的修改简单了好几倍。

这个规则就是:选中的item放大到这个item的旁边只能放得下一个没有放大的item!!!

这个规则的牛X之处在于:这样放大的item的右边,刚好可以放得下原来跟他同一行的剩下的item,进而需要修改属性的item就是原来跟需要放大的item同一行的item,剩下item,只需要简单的上下平移或者根本不用动!!!

3,知道了这个规则,就有了方向,可以大胆动手改了,选中的item用transform属性做平移和放大,其他的简单修改frame就可以了

这里怎么取出来和选中item同一行的其他item呢?

有个不错的方法,就是: self.sameRowItemArray = [super layoutAttributesForElementsInRect:CGRectMake(0, selectedAttributes.frame.origin.y, self.collectionViewWidth, self.itemHeight)];注意是super的方法,不是self~~

4,关键的时刻到了,怎么让collectionView执行隐形动画呢?

这个也是从原作者那里学到的,就是调用系统的 - (void)performBatchUpdates:(void (^)(void))updates completion:(void (^)(BOOL finished))completion;方法。我把它封装成了一个collectionView的分类,方便配合我的LXMExpandLayout使用。

这个方法会使collectionView重新调用其layout去重新布局,而且是带动画的哦~~

5,直接调用performBatchUpdates方法的话,动画是线性的,那怎么样才能有弹簧的效果呢?

这里又从原作者那里学到一招:用一个UIView animation的block将则个performBatchUpdates包起来

这样就可以用UIView的animation动画代替performBatchUpdates的默认动画。利用iOS7自带的弹簧动画方法

+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay usingSpringWithDamping:(CGFloat)dampingRatio initialSpringVelocity:(CGFloat)velocity options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion NS_AVAILABLE_IOS(7_0);

效果杠杠的~~

其他还有一些细节需要注意的,代码里我已经写了注释了,这里就不在说了

具体这个库怎么使用,也已经写在gitHub上了,也就不罗嗦了。

有问题欢迎留言讨论~~

时间: 2024-11-06 20:31:10

UICollectionViewFlowLayout的隐式动画的相关文章

iOS边练边学--CALayer,非根层隐式动画,钟表练习

一.CALayer UIView之所以能显示在屏幕上,完全是因为他内部的一个图层 在创建UIView对象时,UIView内部会自动创建一个图层(即CALayer对象),通过UIView的layer属性可以访问这个层 当UIView需要显示到屏幕上时,会调用drawRect:方法进行绘制,并且会将所有内容绘制在自己的图层上,绘图完毕后,系统会将图层拷贝到屏幕上,于是就完成了UIView的显示 UIView本身不具备显示的功能,是他内部的层才有显示功能 二.CALayer的基本使用 三.关于CALa

CALayer创建和和如何隐藏隐式动画

//修改CALay属性会产生隐式动画 - (void)viewDidLoad { [super viewDidLoad]; // 创建图层 CALayer *layer = [CALayer layer]; layer.backgroundColor = [UIColor blueColor].CGColor; // 设置frame layer.frame = CGRectMake(100, 100, 100, 100); // 添加到控制器view的图层上面 [self.view.layer

iOS开发——图形编程OC篇&(三)CALayer隐式动画

CALayer隐式动画 在前面几讲中已经提到,每一个UIView内部都默认关联着一个CALayer,我们可用称这个Layer为Root Layer(根层).所有的非Root Layer,也就是手动创建的CALayer对象,都存在着隐式动画. * 当对非Root Layer的部分属性进行相应的修改时,默认会自动产生一些动画效果,这些属性称为Animatable Properties(可动画属性). * 列举几个常见的Animatable Properties: ? bounds:用于设置CALay

UI进阶--隐式动画

隐式动画:直接改变属性就会有动画效果,非根层才有隐式动画,根层是没有隐式动画的.根层与非根层:控件的layer属性是根层控件的layer属性的子层就是非根层隐藏动画的禁止: 1 [CATransaction begin]; 2 [CATransaction setDisableActions:YES]; 3 //设置隐式动画动画时间 4 self.myview.layer.position = CGPointMake(10, 10); 5 [CATransaction commit]; 6 布局

ios隐式动画

1. 每一个UIView内部都默认关联着一个CALayer,我们可以称这个Layer为Root Layer 2. 所有的非Root Layer,也就是手动创建的CALayer对象都存在着隐式动画 什么是隐式动画 1 当对非Root Layer的部分属性进行修改时,默认会自动产生一些动画效果 2 而这些属性称为Animatable Properties(可动画属性) 列举几个常见的Animatable Properties(可动画属性) bounds:用于设置CALayer的宽度和高度.修改这个属

隐式动画和核心动画

1. 隐式动画,只有非根层的CALayer才有隐式动画,即改变图层的属性的时候,比如大小,颜色等,会自动添加一个颜色效果, 根层:控件里面的CALayer 非根层:自己创建的CALayer,不依附控件存在的CALayer 隐式动画的使用场景不多 2. 核心动画: Core Animation是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍.也就是说,使用少量的代码就可以实现非常强大的功能.Core Animation可以用在Mac OS X和iOS平台.Core

iOS Core Animation Advanced Techniques(四):隐式动画和显式动画

隐式动画 按照我的意思去做,而不是我说的. -- 埃德娜,辛普森 我们在第一部分讨论了Core Animation除了动画之外可以做到的任何事情.但是动画师Core Animation库一个非常显著的特性.这一章我们来看看它是怎么做到的.具体来说,我们先来讨论框架自动完成的隐式动画(除非你明确禁用了这个功能). 事务 Core Animation基于一个假设,说屏幕上的任何东西都可以(或者可能)做动画.动画并不需要你在Core Animation中手动打开,相反需要明确地关闭,否则他会一直存在.

显示动画,隐式动画、关键帧动画

概要 一些简单的动画代理学习例子,包括显示.隐式.关键帧.关键帧路径四类动画.(感觉这个动画太复杂,学习简单的例子没继续了) 结果展示 流程概要 见代码 主要代码 // // ViewController.m // Animation // // Created by arbboter on 14/12/20. // Copyright (c) 2014年 arbboter. All rights reserved. // #import "ViewController.h" @int

OC - 22.隐式动画

简介 每个UI控件,默认自动创建一个图层(根图层),即每个UI控件对应于至少一个图层 每一个UIView内部都默认关联着一个CALayer,我们可用称这个Layer为Root Layer(根层)   所有的非Root Layer,也就是手动创建的CALayer对象,都存在着隐式动画 什么是隐式动画?   当对非Root Layer的部分属性进行修改时,默认会自动产生一些动画效果 而这些属性称为Animatable Properties(可动画属性) 常见的可执行隐式动画的属性 位置与尺寸 anc