从 inputAccessoryView 到 tableView 的动画文本，如 iOS 11 消息应用程序

Posted 2023-03-15

【中文标题】从 inputAccessoryView 到 tableView 的动画文本，如 iOS 11 消息应用程序

【英文标题】：animate text from inputAccessoryView to tableView like iOS 11 messages app

【发布时间】：2017-11-04 12:17:44

【问题描述】：

我有一个聊天应用程序，并且对实现类似于消息应用程序的动画非常感兴趣。发送消息会将来自 inputAccessoryView 中的文本或媒体动画化，其中消息直接组合到显示它的 tableView/collectionView 中。

我目前正在将我的消息输入到 inputAccessoryView 中的 textView 中。当用户按下回车键时，消息被添加到 tableView 数据源并加载到 tableView 中。

如何将动画外观直接从 inputAccessoryView 呈现到 tableView。

【参考方案1】：

我相信这个动画是这样工作的：

当您键入文本并按下发送时，使用 tableView.insertRows(at: [IndexPath], with: UITableViewRowAnimation) 将一个新的文本气泡添加到消息表视图的末尾。这将添加气泡并使 tableview 向上动画。 同时，会创建一个浮动气泡视图并将其放置在文本输入视图上，例如它的宽度跨越文本输入视图的前缘和插入到表格视图中的新聊天气泡的后缘. 浮动气泡视图非常快速并同时在两个方向上动画：它的宽度变化，直到它到达与 tableView 上的新气泡相同的宽度，并且它的 y 位置以与添加的聊天气泡向上滚动相同的速度变化在 tableView 上。 然后，当动画结束时，浮动气泡被移除。

如果您将浮动气泡动画与聊天气泡同步得非常好，那么输入文本似乎“变成”了聊天气泡。

我相信他们使用了这个创建重叠视图 -> 动画 -> 删除重叠视图流，因为如果您在动画期间密切注意聊天气泡，就在最后它看起来像 booble 只是一点点变化，好像漂浮的气泡没有完全对齐。