使用 UICollectionView 自定义发送消息动画，如 iMessage 发送消息

Posted 2023-03-14

【中文标题】使用 UICollectionView 自定义发送消息动画，如 iMessage 发送消息

【英文标题】：Send message animation like iMessage send message using UICollectionView customization

【发布时间】：2017-12-25 07:41:37

【问题描述】：

我正在开发聊天应用程序。我正在使用UIcollectionview 显示消息。我正在尝试在发送按钮上创建动画。当用户点击发送UIButton 时，我需要像 iMessage 这样的动画。 为了创建这样的动画，我使用了两种不同的方式，但没有得到正确的动画。 我创建了一个演示。在那个演示中，我实现了不同的方法。

演示链接：https://www.dropbox.com/s/z8rxjkpuxzs95kp/AdvanceCollection.zip?dl=0

下面是我真正需要的动画： https://www.dropbox.com/s/yo35lsm7yrc2oqu/Screen%20Recording.mov?dl=0

我应用了 2 种方法。以下是方法说明。

第一种方法： 在第一种方法中，我自定义了 FlowLayout。我知道这是正确的方法，但没有得到正确的曲线动画。

override func initialLayoutAttributesForAppearingItem(at itemIndexPath: IndexPath) -> UICollectionViewLayoutAttributes? 
            guard let attributes = super.initialLayoutAttributesForAppearingItem(at: itemIndexPath),
            let added = addedItem,
                added == itemIndexPath else 
                    return nil
            
            // set new attributes

            attributes.frame = CGRect(x: 0, y: 0, width: 500, height: 500)
            //attributes.center = CGPoint(x: self.collectionView!.frame.width - 23.5, y: -24.5)
            attributes.center = CGPoint(x: 0.0, y: 100.0)

            attributes.alpha = 1.0

            attributes.transform = CGAffineTransform(scaleX: 0.15, y: 0.15)

            attributes.zIndex = 20

            return attributes
        

第二种方法：在第二种方法中，我在willdisplaycell方法中实现动画。根据我的观点，我知道这不是自定义布局的正确方法，但我尝试过。在第二种方法中，我从底部获取动画，但 x、y、width 和 height。此外，任何可见的动画也与 iMessage 发送消息动画

不同

func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) 
        if !self.collectionData[indexPath.row].isAnimated
        
            cell.frame =  CGRect(x: 0, y: chatView.frame.origin.y, width: 1000.0, height: chatView.frame.size.height)
            UIView.animate(withDuration: 10.0, delay: 0, usingSpringWithDamping: 0.4, initialSpringVelocity: 0.6, options: UIViewAnimationOptions.curveEaseIn, animations: 
                cell.frame = CGRect(x:0, y:  cell.frame.origin.y, width: cell.frame.size.width, height: cell.frame.size.height)
            , completion:  finished in
               self.collectionData[indexPath.row].isAnimated = true
            )
        
    

【参考方案1】：

编辑：在此处查看 tableView 演示 animateCell

我认为你可以尝试使用 tableView 而不是 collectionView 来完成，因为 collectionView 布局非常愚蠢

我假设您已经为您的 collectionView 创建了一个自定义 xib 单元格，然后执行此操作

1- 将 top 、 bottom 、leading 、 trailing 约束正确设置为您的消息标签的超级视图

2- 将消息标签的顶部约束更改为 400

3- 将顶部约束设置为 IBOutlet

4- 在 cellForRowAt 中将该约束设置为 20

5- 然后做这样的动画

  UIView.animateWithDuration(1.0,
 
    cell.layoutSubview()

    cell.layoutIfNeeded()

 

注意：collectionView 的问题是改变 item 的大小，因此可以发生动画，上述解决方案与 tableView 完美配合

【讨论】：

我遵循了提供的步骤，但没有得到实际需要的输出。你能解释更多或创建小演示和分享。谢谢

不，这不是正确的动画。我提供了动画视频。请检查动画链接。另外，我为此提供了一个演示。我的动画太接近要求但不合适。 dropbox.com/s/yo35lsm7yrc2oqu/Screen%20Recording.mov?dl=0 感谢您的宝贵时间。

减少持续时间

你认为如果我减少持续时间而不是动画看起来像 iMessage 吗？我在很多地方都使用过 TableView。根据我的观点，TableView 并不能解决这个问题。我对此做了很多研究。无论您以这种方式提供的任何步骤，iMessage 都无法发送动画。 ***.com/q/47926643/4128762

是的，我现在推送更新，持续时间减少，问题在于单元格设计和布局而不是动画