ios - 点击时如何在 UICollectionViewCell 中制作此动画？

Question

我正在尝试做一个类似的动画，当你选择一个时，它会制作这些 UICollectionViewCell。我的意思是他们所做的事情就好像他们起床了，但是 Nose 在想怎么才能得到它。我清楚应该在方法中完成:

CollectionView ( CollectionView : UICollectionView , didSelectItemAtIndexPath indexPath : NSIndexPath ) 

我留下了一个 YouTube 视频，它展示了我所说的话 https://www.youtube.com/watch?v=gFWiyOERVBg

谢谢

Answer 1

didSelectItemAtIndexPath 可以用作触发器，但与此无关。

如果我要尝试重现这一点，我会采用以下方法:

首先， Collection View 中的所有单元格都会受到影响，检索可见项数组并对每个项应用转换。

变换看起来好像分两个阶段进行，首先是 y 轴旋转变换，其值应用于 .m34 处的变换矩阵以改变视角。其次，使用足够大的负 x 值将单元格移出屏幕。将这些变换放在一个基本动画组中，我怀疑您会非常接近所需的效果。

最后的观察是这似乎是一个过渡，因此您可以将其作为 UIViewControllerAnimation 的一部分来实现。

编辑

我今天早上有时间，所以我为您整理了一些代码。

仔细观察动画后，我注意到向左移动实际上是旋转动画的一部分， anchor 在 x 轴上设置为 0。所以实际上我们所需要的只是一个旋转和淡入淡出的动画——全部以 x = 0 为中心。

要实现这一点，最简单的方法是为集合列表中的每个单元格添加一个 CALayer，并在单元格“移植”到新层后为添加的层设置动画。

  - (void)processVisibleItems{
      NSArray *visibleItems = [self.collectionView indexPathsForVisibleItems];

      for (NSIndexPath *p in visibleItems) {
         // create a layer which will contain the cell for each of the visibleItems
         CALayer *containerLayer = [CALayer layer];
         containerLayer.frame = self.collectionView.layer.bounds;
         containerLayer.backgroundColor = [UIColor clearColor].CGColor;

         // we need to change the anchor point which will offset the layer - adjust accordingly 
         CGRect containerFrame = containerLayer.frame;
         containerFrame.origin.x  -= containerLayer.frame.size.width/2;
         containerLayer.frame = containerFrame;
         containerLayer.anchorPoint = CGPointMake(0.0f, 0.5f);
         [self.collectionView.layer addSublayer:containerLayer];

         //add the cell to the new layer - change MyCollectionViewCell to your cell's class
          MyCollectionViewCell *cell = (MyCollectionViewCell*)[self.collectionView cellForItemAtIndexPath:p];
          cell.frame = [containerLayer convertRect:cell.frame fromLayer:cell.superview.layer];
          [containerLayer addSublayer:cell.layer];
          //add the animation to the layer
          [self addAnimationForLayer:containerLayer];
      }
  }

  - (void)addAnimationForLayer:(CALayer*)layerToAnimate{
      // fade-out animation
      CABasicAnimation *fadeOutAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
      [fadeOutAnimation setToValue:@0.0];

      //rotation Animation
      CABasicAnimation *rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
      CATransform3D tfm = CATransform3DMakeRotation((65.0f * M_PI) / 180.0f, 0.0f, -1.0f, 0.0f);
      //add perspective - change to your liking
      tfm.m14 = -0.002f;
      rotationAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
      rotationAnimation.toValue = [NSValue valueWithCATransform3D:tfm];

      //group the animations and add to the new layer
      CAAnimationGroup *group = [CAAnimationGroup animation];
      group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
      group.fillMode =  kCAFillModeForwards;
      group.removedOnCompletion = NO;
      group.duration = 0.35f;
      [group setAnimations:@[rotationAnimation, fadeOutAnimation]]; 

      [layerToAnimate addAnimation:group forKey:@"rotateAndFadeAnimation"];
  }
  //To trigger on cell click simply call [self processVisibleItems] in didSelectItemAtIndexPath

注意-

要使它看起来与视频中的动画完全一样，您需要更改几处:

1. 随机化包含可见项列表的数组。就目前而言，这些项目将按顺序或根据可见项目的数组触发。
2. 随机化组动画的持续时间，或者至少在动画之间引入一个小的延迟(随机化持续时间在 0.35(Apple 的默认时间)和 0.6 之间应该效果很好)。
3. 可能随机化旋转动画的角度 - 介于 50 度和 85 度之间的任何角度都应该有效(目前在上面的示例中设置为 65)；

仅此而已......尽情享受吧!