Ios 使用UICollectionView自定义发送消息动画,如iMessage发送消息
我正在开发聊天应用程序。我正在使用Ios 使用UICollectionView自定义发送消息动画,如iMessage发送消息,ios,swift,uicollectionview,uicollectionviewcell,uicollectionviewflowlayout,Ios,Swift,Uicollectionview,Uicollectionviewcell,Uicollectionviewflowlayout,我正在开发聊天应用程序。我正在使用UIcollectionview显示消息。我正在尝试在“发送”按钮上创建动画。当用户点击sendui按钮时,我需要像iMessage这样的动画。 为了创建这样的动画,我使用了两种不同的方法,但没有得到正确的动画。 我创建了一个演示。在那个演示中,我实现了不同的方法 演示链接: 下面是我实际需要的动画: 我采用两种方法。下面是方法说明 第一种方法: 在第一种方法中,我定制了FlowLayout。我知道这是正确的方法,但没有得到正确的曲线动画 override
UIcollectionview
显示消息。我正在尝试在“发送”按钮上创建动画。当用户点击sendui按钮时,我需要像iMessage这样的动画。
为了创建这样的动画,我使用了两种不同的方法,但没有得到正确的动画。
我创建了一个演示。在那个演示中,我实现了不同的方法
演示链接:
下面是我实际需要的动画:
我采用两种方法。下面是方法说明
第一种方法:
在第一种方法中,我定制了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、宽度和高度。此外,任何可见的动画也与iMessage send message动画不同
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
})
}
}
编辑:请参见此处的tableView演示
我认为您可以尝试使用tableView而不是collectionView来实现这一点,因为collectionView布局非常愚蠢
我假设您已经为collectionView创建了一个自定义xib单元,然后执行此操作
1-将顶部、底部、前导和尾随约束正确设置为消息标签的superview
2-将消息标签的顶部约束更改为400
3-将顶部约束设置为IBOutlet
4-在单元格中,将限制设置为20
5-然后像那样做动画
UIView.animateWithDuration(1.0,
{
cell.layoutSubview()
cell.layoutIfNeeded()
}
注意:collectionView的问题是更改项目的大小,以便可以制作动画,上面的解决方案与tableView完美配合我遵循了提供的步骤,但没有得到实际需要的输出。你能解释更多或者创建一个小的演示和分享吗。谢谢,伙计,这不是真正的动画。我为动画提供了视频。请检查动画链接。此外,我还为此提供了一个演示。我的动画太接近要求了,但不合适。谢谢你的时间。减少持续时间你认为如果我减少持续时间,动画看起来像iMessage吗?我曾在许多地方使用TableView。根据我的观点,TableView不能解决这个问题。我在这方面做了很多研究。无论您以那种方式提供了什么步骤,iMessage都无法发送动画。是的,我现在推了一个更新,持续时间缩短了,问题在于单元设计和布局,而不是动画