iOS Android材质devise使用UICollectionView进行分层定时
我想使用UICollectionView在iOS中执行由Android Material Design Hierarchical Timing引入的animation
让我们说它是一个collectionView，调整视图的大小不是问题，那么及时做这个animation的最佳做法是什么。 如何执行延迟
一种方法是使用定时器一次添加一个单元格，并将这些单元格放到窗口中展开为全尺寸。
#import "ViewController.h" #import "RDCollectionViewCell.h" @interface ViewController () <UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout> @property (weak,nonatomic) IBOutlet UICollectionView *collectionview; @property (strong,nonatomic) NSMutableArray *mutableArray; @property (strong,nonatomic) NSArray *data; @end @implementation ViewController -(void)viewDidLoad { [super viewDidLoad]; self.mutableArray = [NSMutableArray new]; self.data = @[@"one", @"two", @"three", @"four", @"five", @"six", @"seven", @"eight", @"nine", @"ten"]; [self performSelector:@selector(startTimer) withObject:nil afterDelay:0.5]; } -(void)startTimer { [NSTimer scheduledTimerWithTimeInterval:.05 target:self selector:@selector(addCells:) userInfo:nil repeats:YES]; } -(void)addCells:(NSTimer *) timer { static int counter = 0; [self.mutableArray addObject:self.data[counter]]; counter ++; [self.collectionview insertItemsAtIndexPaths:@[[NSIndexPath indexPathForItem:self.mutableArray.count -1 inSection:0]]]; if (self.mutableArray.count == self.data.count) { [timer invalidate]; } } -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section { return self.mutableArray.count; } -(UICollectionViewCell *) collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { RDCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath]; cell.contentView.backgroundColor = (indexPath.row % 2 == 0)? [UIColor colorWithRed:180/255.0 green:210/255.0 blue:254/255.0 alpha:1] : [UIColor colorWithRed:50/255.0 green:167/255.0 blue:85/255.0 alpha:1]; cell.label.text = self.mutableArray[indexPath.row]; return cell; } 在自定义单元类中，
@implementation RDCollectionViewCell -(void)awakeFromNib { self.contentView.transform = CGAffineTransformMakeScale(0.01, 0.01); } -(void)didMoveToWindow { [UIView animateWithDuration:0.3 delay:0.1 options:0 animations:^{ self.contentView.transform = CGAffineTransformIdentity; } completion: nil]; }
该项目可以在这里findhttp://jmp.sh/aDw846R
inheritance您的集合视图单元格并添加此方法：
class YourCollectionViewCell: UICollectionViewCell { //Some IBOutlets if needed func popAfter(delay: NSTimeInterval){ transform = CGAffineTransformMakeScale(0, 0) UIView.animateWithDuration(0.7, delay: delay, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in self.transform = CGAffineTransformMakeScale(1, 1) }, completion: nil) } }
将您的集合视图的delegate和dataSource为您的视图控制器（这可以在Interface Builder中完成）。 将常量添加到您的视图控制器，并重新加载viewDidAppear集合视图来animation单元格：
class YourViewController{ private let numberOfCellsInLine = 3 private let numberOfVisibleCellsOnTheScreen = 12 private let baseDelay = 0.15 override func viewDidAppear(animated: Bool) { super.viewDidAppear(animated) collectionView.reloadData() } }
将扩展添加到您的视图控制器的UICollectionView数据源和委托：
extension YourViewController: UICollectionViewDataSource, UICollectionViewDelegateFlowLayout{ func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int{ return numberOfCells } // The cell that is returned must be retrieved from a call to -dequeueReusableCellWithReuseIdentifier:forIndexPath: func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell{ let cell = collectionView.dequeueReusableCellWithReuseIdentifier("YourCellID", forIndexPath: indexPath) as YourCollectionViewCell //set cell's content let index = indexPath.row let yIndex = index / numberOfCellsInLine let delay = Double(index % numberOfCellsInLine + (index >= numberOfVisibleCellsOnTheScreen ? 0 : yIndex)) * baseDelay cell.popAfter(delay) return cell } }
您可以在Cell的popAfter值中调整baseDelay和animation持续时间，以达到所需的时间。 希望这有助于你的应用程序和祝你好运！ 随意问任何问题。
像这样的东西应该工作。 随机件扔在一起，我知道。
这是你描述的一个很好的笔 。 在这里你会发现所讨论的定时函数是在CSS中定义的曲线：
cubic-bezier(0.650, 0.045, 0.405, 1.000)
知道计时function，你可以在iOS中实现这个animation。 这是一个链接到另一个问题 – 它显示了如何拉动自定义animation，并很好地解释。
iOS中的自定义计时function
可能需要一些简单的math，但这应该有帮助！ …我希望。
干杯