点击时如何在UICollectionViewCell中制作这个动画？

Question

我试图做一个类似的动画，当你选择一个时，会产生这些UICollectionViewCell。我的意思是他们这样做的事实，好像他们起床，但鼻子怎么得到它。我显然应该在方法中完成：

CollectionView ( CollectionView : UICollectionView , didSelectItemAtIndexPath indexPath : NSIndexPath ) 

我留下了一段YouTube视频，其中显示了我所说的内容 https://www.youtube.com/watch?v=gFWiyOERVBg

由于

Answer 1

didSelectItemAtIndexPath可以用作触发器，但在这里无关紧要。

如果我试图重现这一点，我会采取以下方法：

首先，集合视图中的所有单元格都受到影响，检索可见项目数组并对每个单元格应用变换。

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

最后的观察结果是这似乎是一个转换，所以你可以在UIViewControllerAnimation中实现这一点。

修改

今天早上我有时间，所以我为你准备了一些代码。

在仔细观察动画后，我注意到向左移动实际上是旋转动画的一部分，在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

NB -

您需要更改一些内容，以使其看起来与视频中的动画完全相同：

1. 随机化包含可见项列表的数组。就目前而言，这些项目将按顺序或按可见项目数组触发。
2. 随机化群组动画的持续时间，或者至少在动画之间引入一个小延迟（随机化持续时间在0.35之间（Apple的默认时间），并说0.6应该可以正常工作）。
3. 可能随机化旋转动画的角度 - 介于50到85度之间的任何东西都应该有效（在上面的示例中当前设置为65）;

这就是它的全部......享受！

Answer 2

您可以在didSelectItemAtIndexPath，

中使用此行获取UICollectionViewCell

let cell = collectionView.cellForItemAtIndexPath(indexPath)

使用单元格引用，您可以使用animateWithDuration或任何其他方法设置动画，以便为单元格内的对象设置动画。

Answer 3

如果能为某人提供服务，我会转移到MDB983的快速反应

auto inserted_it1 = arr_1.insert(it, tmp);
auto inserted_it2 = arr_2.insert(it1, tmp1);

inserted_it1->p = &*inserted_it2;
inserted_it2->p = &*inserted_it1;