iOS Android Material Design Hierarchical Timing using UICollectionView答案

【问题标题】：iOS Android Material Design Hierarchical Timing using UICollectionViewiOS Android Material Design Hierarchical Timing using UICollectionView
【发布时间】：2014-10-29 14:26:26
【问题描述】：

我想做Android Material Design Hierarchical Timing在iOS中使用UICollectionView引入的动画

假设它是一个collectionView，并且调整视图大小不是问题，及时执行此动画的最佳做法是什么。如何执行延迟

【问题讨论】：

标签： ios uicollectionview calayer material-design

【解决方案1】：

子类您的集合视图单元格并添加此方法：

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

为 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 和动画持续时间以实现所需的时间。希望这对您的应用有所帮助并祝您好运！欢迎随时提出任何问题。

【讨论】：

【解决方案2】：

执行此操作的一种方法是使用计时器一次添加一个单元格，并让这些单元格在进入窗口时扩展为完整大小。

#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

【讨论】：

不做这个动画，设计和动画后来改了，但有趣的答案，保存了它
实际上，@rdelmar 的回答是正确的，就“及时制作这个动画的最佳实践是什么？”这个问题。很担心，但是由于您的开场白是“我想使用 UICollectionView 在 iOS 中制作 Android Material Design Hierarchical Timing 引入的动画”，因此答案需要进行某些更改。你看，Hierarchical Timing Animation 对角线发生，从左上角开始，在右下角结束，所以要实现这一点，我们不能使用 FlowLayout，FlowLayout 会从左到右和从上到下添加单元格。
感谢您的回答@rdelmar。现在发放赏金。如果您有机会，我很想看看您对 Amit 评论的看法。
@AaronBrager Amit 是正确的。两个动画之间存在一些差异，直到我录制它们并逐帧观看之前我才能轻易看到。 Android 动画确实以更对角的方式进行。左下角的正方形开始出现在顶行的第二个之后，而在我的动画中，左下角的正方形直到顶行的第 5 个开始增长（但仍然很小）才出现。我认为他不能使用流布局是错误的。我会在这方面做更多的工作，看看我是否可以更接近地模仿 Android 动画。
@AaronBrager 在对此进行了更多研究之后，我必须做些什么才能使它更像 Android 动画，使我的代码类似于 Nikita 的。我尝试了他的代码，它几乎与 Android 动画相同。他的答案应该被认为是正确的。

【解决方案3】：

这样的事情应该可以工作。我知道，随意拼凑的碎片。

Here's a very well done pen 你所描述的。在其中你会发现有问题的计时函数是曲线，在 CSS 中定义为：

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

知道了定时功能，就可以在iOS中实现这个动画了。这是另一个问题的链接——它展示了如何实现自定义动画，并且解释得很好。

Custom timing functions in iOS

可能需要一些简单的数学运算，但这应该会有所帮助！ ...我希望。

干杯

【讨论】：