Search code examples
iosswiftfacebook-pop

Using Facebook Pop to animate view affine transform


I have the following code that will animate some UITableViewCells from the bottom in a spring manner:

override func viewDidAppear(animated: Bool) {
    super.viewDidAppear(animated)
    self.tableView.reloadData()

    let cellsNum = self.tableView.visibleCells() as NSArray

    // Hide the tableView and move the cells to below the tableView
    self.tableView.alpha = 0.0
    for cell in cellsNum as [UITableViewCell] {
        cell.transform = CGAffineTransformMakeTranslation(0, self.tableView.bounds.size.height)
        println("\(NSStringFromCGAffineTransform(cell.transform))")
        //cell.layer.transform = CATransform3DRotate(CATransform3DIdentity, CGFloat(90.0) * CGFloat(M_PI) / CGFloat(180.0), 1.0, 0.0, 0.0)
    }

    // Show the tableView and animate the cells
    self.tableView.alpha = 1.0
    for cell in cellsNum as [UITableViewCell] {
        UIView.animateWithDuration(1.2, delay: 0.05 * Double(cellsNum.indexOfObject(cell)), usingSpringWithDamping: 0.77, initialSpringVelocity: 0, options: nil, animations: { () -> Void in
            cell.transform = CGAffineTransformMakeTranslation(0, 0)
            //cell.layer.transform = CATransform3DRotate(CATransform3DIdentity, 0, 1.0, 0.0, 0.0)
            }, completion: nil);
    }
}

How can I do this in Facebook Pop? I've looked in the source but the closest one was kPopLayerTranslationXY but that the code below didn't work:

for cell in cellsNum as [UITableViewCell] {
        let trans = POPSpringAnimation(propertyNamed: kPOPLayerTranslationXY)
        trans.toValue = NSValue(CGPoint: CGPointMake(0, 0))
        trans.fromValue = NSValue(CGPoint: CGPointMake(0, self.tableView.bounds.size.height))
        trans.springBounciness = 10
        trans.springSpeed = 5
        cell.pop_addAnimation(trans, forKey: "Translation")
    }

Possibly define a custom animatable property?


Solution

  • You are animating a layer property so you should add the animation to the layer of the cell, not the cell.

    cell.layer.pop_addAnimation(trans, forKey: "Translation")
    

    Also as you are only animating y you could use kPOPLayerTranslationY and set the toValue and fromValue to a float.