如何为 tableview 单元格执行放大、缩小动画？

Posted 2023-03-15

【中文标题】如何为 tableview 单元格执行放大、缩小动画？

【英文标题】：How to perform a zoom-in , zoom-out animation for tableview cells?

【发布时间】：2021-06-25 04:50:21

【问题描述】：

我想知道如何重新创建这个动画？前 2 个单元格保持原样，但只有索引 2 中的单元格有动画。

现在我正在使用重新创建它

let rotationTransform = CATransform3DTranslate(CATransform3DIdentity, -500, 10, 0)
cell.layer.transform = rotationTransform

这与 gif 中的外观和感觉不太一样，是否有任何 pod 或某种方法可以实现这一点？

附加信息：第一个单元格只是一个简单的单元格，第二个单元格是一个collectionView，接下来的单元格是重复的。滑动当前正在使用滑动手势，我只需要有关如何重新创建此放大、缩小动画的信息。

任何帮助将不胜感激。 谢谢

编辑：我尝试将问题的 gif 大小更改为中等，但它没有播放，所以我再次将其更改为正常大小。

【问题讨论】：

请检查这个 我已经用 1) github.com/xmartlabs/XLPagerTabStrip 2) github.com/subinspathilettu/SJSegmentedViewController 做同样的事情

@NikunjKumbhani 嗨，你知道要重新制作动画吗？你给的东西有效，但它没有给出这个动画......

你问过加载动画吗？如果是，那么您也需要为此使用库

@NikunjKumbhani 你知道这样的图书馆吗？我试过了，我找不到！

请检查我的回答可能对你有帮助

【参考方案1】：

我实际上想出了一个简单的方法来执行这个动画。可能有更好的方法可以做到这一点，但以防将来有人需要帮助。

我们为 zoomIn 和 zoomOut 编写了 2 个函数（可以在任何地方使用）

func zoomOut(view : UIView,duration : Double,delay : Double)

    UIView.animate(withDuration: duration, delay: delay, options: UIView.AnimationOptions.curveEaseIn, animations: 
        view.transform = CGAffineTransform.identity.scaledBy(x: 0.95, y:  0.95)
     )

func zoomIn(view : UIView,duration : Double,delay : Double)

    UIView.animate(withDuration: duration, delay: delay, options: UIView.AnimationOptions.curveEaseIn, animations: 
        view.transform = CGAffineTransform.identity
     )

然后我们编写移动函数（可以在任何地方使用）

func movementAnimation(duration:Double,X:CGFloat,Y:CGFloat,item:UIView)

    UIView.animate(withDuration: duration) 
      item.transform = CGAffineTransform(translationX: X, y: Y)
        
    

最后我们将这两个结合起来得到一个相似的动画！

zoomOut(view: Table, duration: 0.1, delay: 0)
DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) 
        movementAnimation(duration: 0.2, X: -500, Y: 0, item: self.Table)
            
DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) 
        movementAnimation(duration: 0, X: 500, Y: 0, item: self.Table)
        movementAnimation(duration: 0.2, X: 0, Y: 0, item: self.Table)
            
zoomIn(view: self.Table, duration: 0.1, delay: 0.6)

这里首先缩小视图（将比例缩小到 0.95），然后以 0.2 秒的持续时间将其移到屏幕外。一旦它在屏幕外，它会立即以 0 秒的持续时间移动到屏幕的右侧。然后以 0.2 秒的持续时间将其移回原始位置。现在我们调用 zoomIn 将视图恢复到其原始大小，持续时间为 0.1 秒。 0.5 秒是 zoomOut + moveOut + movementIn 函数所用的总时间。

最后重新加载表格

DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) 
self.Table.reloadData()

希望这可以帮助某人并感谢“Nikunj Kumbhani”的豆荚创意！