Swift - Fading cells in UITableView

Question

I'm having troubles with my UITableView in swift on Xcode 6 :

I would like my UITableView cells to fade in / out when appearing / disappearing.

I looked a lot on the web for fade animations but I didn't find what I wanted because it's based on duration animations.

I Think what I need is sort of mask based on alpha ? I'm not sur and I don't even know have to create one...

I have a UIViewController containing a tableView and some blank space (for now) upside and downside of the UITableView.

Thank's for your help !!

Best,

Anatole

Never tried this, but try setting to opacity to 0 first and then using `tableView(_:willDisplayCell:forRowAtIndexPath:)` to animate to to 1. — Rengers, Apr 02 '15 at 09:35

score 11 · Answer 1 · answered Dec 21 '16 at 20:40

I was looking for the same thing, I ended up making my own and I thought I'd share it:

func scrollViewDidScroll(_ scrollView: UIScrollView) {

    let cellCount = tableView.visibleCells.count
    let alphaInterval:CGFloat = 1.0 / CGFloat(cellCount / 2)

    for (index,cell) in (tableView.visibleCells as [UITableViewCell]).enumerated() {

        if index < cellCount / 2 {
            cell.alpha = CGFloat(index) * alphaInterval
        } else {
            cell.alpha = CGFloat(cellCount - index) * (alphaInterval)
        }
    }
}

and here is the cell:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = UITableViewCell()
    cell.textLabel?.text = countries[indexPath.row].uppercased()
    cell.textLabel?.textColor = .white
    cell.backgroundColor = .clear
    cell.alpha = 0.25

    UIView.animate(withDuration: 0.5, animations: {
        cell.alpha = 1 
    })

    return cell
}

Ends up looking like this:

Timon · Accepted Answer · 2015-04-05T11:42:51.993

10

animateWithDuration seems appropriate, since the fade in/out has a duration: the cell gradually becoming visible or invisible over time.

Here is an example of making table cells fade-in:

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

    var cell = self.tableView.dequeueReusableCellWithIdentifier("cell") as UITableViewCell

    cell.textLabel?.text = self.items[indexPath.row]
    cell.backgroundColor = UIColor.grayColor()
    cell.alpha = 0

    UIView.animateWithDuration(2, animations: { cell.alpha = 1 })

    return cell
}

EDIT:

This sets the cell's alpha based on their y position, which is probably closer to what you want:

func scrollViewDidScroll(scrollView: UIScrollView) {

    for cell in tableView.visibleCells() as [UITableViewCell] {

        var point = tableView.convertPoint(cell.center, toView: tableView.superview)
        cell.alpha = ((point.y * 100) / tableView.bounds.maxY) / 100
    }
}

edited Apr 05 '15 at 11:42

answered Apr 03 '15 at 06:14

Timon

131
1
5

Hi Timon and thank you very much for your help ! Like I said, I'm not looking for an animation with duration, because when user scrolls very fast then all the screen is fading, and when he scrolls very slow, the animation is not long enough. If it exist, I need an animation on a specific distance. Else, I was thinking if any Mask method exist. By applying an alpha gradient mask on the top and bottom of tableView, it would permit to fade cells coming in / out. Sorry, I know I ask a lot but I didn't find anything like this on the web... Thank's again, hope you have an idea ! Best, Anatole – foofoo Apr 03 '15 at 19:25
I added another solution above that changes the alpha based on the y position of the cell. If you expand this to only apply to the top 3rd of the screen, and invert the effect for the bottom 3rd of the screen, that should get you pretty close? – Timon Apr 05 '15 at 12:22
Thank's à lot timon it's perfect !! I will test that as soon that I have some free time !! – foofoo Apr 06 '15 at 16:54
@Timon Thanks, but how to show the cells one by one with your animation ? – MEH Jan 17 '17 at 09:37

Swift - Fading cells in UITableView

2 Answers2

Linked