的iOS Android的使用UICollectionView

Question

我想要做的使用UICollectionView

由Android材料設計Hierarchical Timing在iOS中推出了動畫材質設計分層時序可以說，它是一個的CollectionView和調整的觀點是不是一個問題，會是什麼以及時的方式做這個動畫的最佳實踐。如何執行延遲

Answer 1

這樣做的一種方法是使用計時器一次添加一個單元格，並使這些單元格在窗口中展開爲全尺寸。

#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]; 
} 

該項目可以在這裏找到，http://jmp.sh/aDw846R

Answer 2

這樣的事情應該工作。我知道隨機碎片扔在一起。

Here's a very well done pen你所描述的。在這裏面，你會發現有問題的計時功能是曲線，在CSS定義爲：

cubic-bezier(0.650, 0.045, 0.405, 1.000) 

知道了定時功能，可以實現此動畫中的iOS。下面是另一個問題的鏈接 - 它顯示瞭如何取消自定義動畫，並且已經很好地解釋了。

Custom timing functions in iOS

可能需要一些簡單的數學，但是這應該幫助！ ...我希望。

歡呼

Answer 3

小類您的收藏觀察室，並添加這個方法：

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動畫細胞：

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() 
    } 
} 

Add擴展爲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 
    } 
} 

您可以調整baseDelay和動畫持續時間Cell的popAfter值來實現所需的時間。希望這有助於你的應用程序和祝你好運！隨意問任何問題。