Swift animation for periscope-style comments

Question

I am using this code for periscope-style comments in my iOS app (where the comment bubbles slide up from the bottom): https://github.com/yoavlt/PeriscommentView

And this is the code that actually animates the comments in and out:

public func addCell(cell: PeriscommentCell) {
        cell.frame = CGRect(origin: CGPoint(x: 0, y: self.frame.height), size: cell.frame.size)
        visibleCells.append(cell)
        self.addSubview(cell)

        UIView.animateWithDuration(self.config.appearDuration, delay: 0, options: UIViewAnimationOptions.CurveEaseOut, animations: { () -> Void in
            let dy = cell.frame.height + self.config.layout.cellSpace
            for c in self.visibleCells {
                let origin = c.transform
                let transform = CGAffineTransformMakeTranslation(0, -dy)
                c.transform = CGAffineTransformConcat(origin, transform)
            }
        }, completion: nil)

        UIView.animateWithDuration(self.config.disappearDuration, delay: self.config.stayDuration, options: UIViewAnimationOptions.CurveEaseIn, animations: { () -> Void in
            cell.alpha = 0.0
        }) { (Bool) -> Void in
            self.visibleCells.removeLast()
            cell.removeFromSuperview()

        }
    }

The problem with the above code is that sometimes when a new comment is added, it shows up overlapping the previous comment. The expected behavior is that the previous comment slides up and the new comment takes its place. I noticed that this mainly happens when you add a new comment after the previous comment starts to fade out, but still has not disappeared.

I tried putting a breakpoint in the self.visibleCells.removeLast(), and it does seem like this gets called only when the last comments completed disappears, so I would expect this to work correctly (because the for loop moves up all the visible cells, and even when a comment is fading out, it is still visible).

Any help with this would be appreciated.

Thanks!

Answer 1

I just got a clone of that repository, run on my device and your problem is trying to rewrite the functionality. Do not do that. Instead, just add this line:

@IBAction func addNewCell(sender: UIButton) {
    self.periscommentView.addCell(UIImage(named: "twitterProfile")!, name: "Your_Name_Here", comment: "Your_Comment_Here")
}

That's all! I just checked it and it works perfectly!

Do not try to change alpha or moving up. The library does all of these stuffs! Good luck! ;)