TableViewCell animation in swift

问题:

I am following THIS tutorial and achieve that animation with this code:

func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {
    cell.layer.transform = CATransform3DMakeScale(0.1,0.1,1)
    UIView.animateWithDuration(0.25, animations: {
        cell.layer.transform = CATransform3DMakeScale(1,1,1)
    })

}

But I want to update something in this cell animation like when I scrolling into tableView the cell is small like (0.1,0.1,1) at the start and after that It scales like (1,1,1) but I want to apply like bubble type effect like it is small at start after that it comes at its original Scale like (1,1,1) and one it is zoom and again it comes into its original scale like (1,1,1).

please guide me how can I achieve that animation?

EDIT:

I tried this but its not that kind of smooth and not exact what I want.

    func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {
    cell.layer.transform = CATransform3DMakeScale(0.1,0.1,1)
    UIView.animateWithDuration(0.3, animations: {
        cell.layer.transform = CATransform3DMakeScale(1,1,1)
    })
    UIView.animateWithDuration(1, animations: {
        cell.layer.transform = CATransform3DMakeScale(2,2,2)
    })
    UIView.animateWithDuration(0.3, animations: {
        cell.layer.transform = CATransform3DMakeScale(1,1,1)
    })

}

回答1:

What you need is an ease out back animation. For more information check out http://easings.net

You can make parametric animations using this library https://github.com/jjackson26/JMJParametricAnimation/tree/master/JMJParametricAnimationDemo

For now, the effect you are trying to do can be roughly done using the code below. You have to do the scaling animation one after another. The way you have done makes all animations start together.
Adding the next animation code in the completion block starts it after the animation. You can further tweak the timings to get the rough effect you need.

    cell.layer.transform = CATransform3DMakeScale(0.1,0.1,1)
    UIView.animateWithDuration(0.3, animations: {
        cell.layer.transform = CATransform3DMakeScale(1.05,1.05,1)
        },completion: { finished in
            UIView.animateWithDuration(0.1, animations: {
                cell.layer.transform = CATransform3DMakeScale(1,1,1)
            })
    })

回答2:

Swift 4

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    cell.transform = CGAffineTransform(scaleX: 0.8, y: 0.8)
    UIView.animate(withDuration: 0.4) {
        cell.transform = CGAffineTransform.identity
    }
}

回答3:

Swift 3 version works like charm!

cell.layer.transform = CATransform3DMakeScale(0.1, 0.1, 1)
    UIView.animate(withDuration: 0.3, animations: {
        cell.layer.transform = CATransform3DMakeScale(1.05, 1.05, 1)
    },completion: { finished in
        UIView.animate(withDuration: 0.1, animations: {
            cell.layer.transform = CATransform3DMakeScale(1, 1, 1)
        })
    })

回答4:

Use this code to get spiral cells animation in your tableview

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    //1. Setup the CATransform3D structure
   var rotation = CATransform3DMakeRotation( CGFloat((90.0 * M_PI)/180), 0.0, 0.7, 0.4);
    rotation.m34 = 1.0 / -600

    //2. Define the initial state (Before the animation)
    cell.layer.shadowOffset = CGSize(width: 10.0, height: 10.0)
    cell.alpha = 0;
    cell.layer.transform = rotation;
    cell.layer.anchorPoint = CGPoint(x: 0.0, y: 0.5)

    //3. Define the final state (After the animation) and commit the animation
    cell.layer.transform = rotation
    UIView.animate(withDuration: 0.8, animations:{cell.layer.transform = CATransform3DIdentity})
    cell.alpha = 1
    cell.layer.shadowOffset = CGSize(width: 0, height: 0)
    UIView.commitAnimations()
}

回答5:

Use this code to achieve animation in your tableview

func tableView(_ tableView: UITableView, willDisplay cell:
    UITableViewCell, forRowAt indexPath: IndexPath) {
    let rotationAngleInRadians = 360.0 * CGFloat(.pi/360.0)
  //  let rotationTransform = CATransform3DMakeRotation(rotationAngleInRadians, -500, 100, 0)
    let rotationTransform = CATransform3DMakeRotation(rotationAngleInRadians, 0, 0, 1)
    cell.layer.transform = rotationTransform
    UIView.animate(withDuration: 1.0, animations: {cell.layer.transform = CATransform3DIdentity})
}