CODEWITHSUNDEEP
uitableviewanimationswift
Dharmesh Kheni
Dharmesh Kheni

Reputation: 71862

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)
    })

}

Upvotes: 10

Views: 29266

Answers (7)

Sasinderan N
Sasinderan N

Reputation: 87

This will only work If you have created a custom tableview cell. Add these lines in tabeleViewcell swift file

override func setHighlighted(_ highlighted: Bool, animated: Bool) {
        super.setHighlighted(highlighted, animated: animated)
        UIView.animate(withDuration: 0.1, animations: {
            if highlighted {
                self.transform = CGAffineTransform(scaleX: 0.95, y: 0.95)
            } else {
                self.transform = CGAffineTransform.identity
            }
        })
    }

Upvotes: 0

Solayman Rana
Solayman Rana

Reputation: 331

Use This Code to Animate Tableview cell from left 

    func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {

    let rotationTransform = CATransform3DTranslate(CATransform3DIdentity, -200, 0, 0)
    cell.layer.transform = rotationTransform
    cell.alpha = 0.5

    UIView.animate(withDuration: 0.5){
        cell.layer.transform = CATransform3DIdentity
        cell.alpha = 1.0
    }
}

Upvotes: 1

Sai kumar Reddy
Sai kumar Reddy

Reputation: 1829

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})
}

Upvotes: 2

Sai kumar Reddy
Sai kumar Reddy

Reputation: 1829

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()
}

Upvotes: 2

Ahmadreza
Ahmadreza

Reputation: 7232

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
    }
}

Upvotes: 18

amagain
amagain

Reputation: 2072

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)
        })
    })

Upvotes: 9

rakeshbs
rakeshbs

Reputation: 24572

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)
            })
    })

Upvotes: 24

Related Questions