JSQMessagesViewController 动画输入指示器

Question

我正在开发一个使用 JSQMessagesViewController 库的项目。有没有人成功地为打字指示器设置动画，如果是这样，他们可以分享他们的方法吗？

谢谢!

Answer 1

我参加聚会迟到了，但因为这也花费了我很多时间，而且我的帖子可以帮助其他人，所以我将列出我的工作解决方案。
我使用 APNG(动画 PNG，可以有透明背景)作为输入指示器，所以我使用 APNGKit，它提供了一个名为 APNGImageView 的 UIImageView 子类

将 JSQMessagesTypingIndicatorFooterView.xib 从 Pods/Pods/JSQMessagesViewController/Resources 复制到您的源文件夹，将其重命名为 MyMessagesTypingIndicatorFooterView.xib(例如)

创建一个名为 MyMessagesTypingIndicatorFooterView 的类，如下所示:

class MyMessagesTypingIndicatorFooterView: JSQMessagesTypingIndicatorFooterView {
@IBOutlet weak var animatedImageView: APNGImageView!

    override func draw(_ rect: CGRect) {
        super.draw(rect)

    }

    override func awakeFromNib() {
        super.awakeFromNib();
    }

    public override class func nib() -> UINib! {
        return UINib(nibName: "MyMessagesTypingIndicatorFooterView", bundle: Bundle.main)
    }

    override class func footerReuseIdentifier()->String{
        return "MyMessagesTypingIndicatorFooterView"
    }   
}

将 APNGImageView 实例添加到 MyMessagesTypingIndicatorFooterView.xib，引用自定义类 MyMessagesTypingIndicatorFooterView。向 MyMessagesTypingIndicatorFooterView 类添加引用 socket animationImageView。

在 JSQMessagesViewController 的子类中注册自定义页脚并覆盖 viewForSupplementaryElementOfKind

class MyMessagesViewController: JSQMessagesViewController{
override func viewDidLoad() {

self.collectionView.register(MyMessagesTypingIndicatorFooterView.nib(),
forSupplementaryViewOfKind: UICollectionElementKindSectionFooter,
withReuseIdentifier: "MyMessagesTypingIndicatorFooterView")}

override func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
if kind == UICollectionElementKindSectionFooter{
let footerView = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionFooter, withReuseIdentifier: "MyMessagesTypingIndicatorFooterView", for: indexPath) as! MyMessagesTypingIndicatorFooterView
//footerView
let image = APNGImage(named: "typing1.png")
footerView.animatedImageView.image = image
footerView.animatedImageView.startAnimating()
return footerView
}
return super.collectionView(collectionView, viewForSupplementaryElementOfKind: kind, at: indexPath)
}
}