在 Swift 中逐行淡入 UITableViewCell答案

【问题标题】：Fade in UITableViewCell row by row in Swift在 Swift 中逐行淡入 UITableViewCell
【发布时间】：2015-10-22 06:39:56
【问题描述】：

我是 swift 新手，我正在尝试拥有一个 UITableView，并且单元格将被动画化以一一出现。我怎样才能做到这一点？此外，如果新出现的单元格行不在屏幕上（隐藏在表格下方）。当每个单元格出现时，如何将表格向上移动？

    var tableData1: [String] = ["1", "2", "3", "4", "5", "6", "7"]

     override func viewWillAppear(animated: Bool) {
           tableView.scrollEnabled=false
    tableView.alpha=0.0
            NSTimer.scheduledTimerWithTimeInterval(NSTimeInterval(3), target: self, selector: "animateTable", userInfo: nil, repeats: false)
}

func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.tableData1.count
    }

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

        let cell:TblCell = self.tableView.dequeueReusableCellWithIdentifier("cell") as! TblCell
        cell.lblCarName.textAlignment = NSTextAlignment.Justified;
return cell
}

func animateTable() {

//what should be the code?//
}

【问题讨论】：

标签： ios swift uitableview animation

【解决方案1】：

步骤一

在初始化单元格的cellForRowAtIndexPath 方法中，将其隐藏；

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell     {
    let cell: TblCell = tableView.dequeueReusableCell(withIdentifier: "cell") as! TblCell
    cell.continueLabel.textAlignment = .justified
    cell.contentView.alpha = 0
    return cell
}

第二步

让我们制作渐变动画。 UITableViewDelegate 具有 willDisplayCell 方法，该方法能够检测到当您滚动到顶部或底部时，第一个单元格将显示在窗口上。

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    UIView.animate(withDuration: 0.8, animations: {
        cell.contentView.alpha = 1
    })   
}

您的淡入淡出动画正在进行中。最重要的是，您不能直接在运行时设置单元格的 alpha，因为 iOS 正在对单元格进行一些特殊的内部处理，作为 UITableView 的一部分并忽略您的设置。所以如果你设置你的手机的contentView，一切都会好起来的。

【讨论】：

我试过这个并且代码有效，但我想要一个稍微不同的行为。您的代码同时淡化所有行。我只希望 tableView （底行）的每一行新行都消失。我怎么能重用你的代码来完成呢？另外作为替代方案，我可以在 2 秒后以某种方式删除底行吗？谢谢。

【解决方案2】：

在 UITableView 中，当行进入您的“范围视野”时，它们会自动为您准备好。我假设您至少最初不能滚动 tableView，所以我们将以编程方式滚动它，使行显示为它。我们是怎么做到的？实际上 UITableView 有一个方法可以让我们滚动到特定的行：

scrollToRowAtIndexPath(indexPath : NSIndexPath, atScrollPosition : UITableViewScrollPosition, animated : Bool);

我写代码太累了，所以我将尝试解释一下。首先，对于您将 alpha 设置为 0 的每个单元格，一旦它们被加载 (cellForRowAtIndexPath)。然后让我们假设我们的屏幕适合前 5 行。您将按顺序对它们的 alpha 进行动画处理（使用 UIView.animateWithDuration ）直到第五个（索引 4），然后您将使用 5 传递 NSIndexPath 的 scrollToRowAtIndexPath，然后使用 6，...直到其余的（使用 scrollPosition = .底部）。对于它们中的每一个，您将在它们加载后立即进行动画处理。请记住在这些交互之间留出一些时间。（首先动画，将 NSTimer 运行到第二个，然后继续）。布尔动画当然应该是真的。

【讨论】：

谢谢！我已经将 alpha 设置为 0。我不确定的是如何让单元格一一出现？他们同时出现？如何控制或分配每个单元格？
可以调用您实现的方法“cellForRowAtIndexPath”来获取特定行的单元格。为了让它们一一出现，您可以使用 NSTime.scheduledTimerWithTimeInterval 调用它们。例如，第一行传递 1，第二行传递 2，第三行传递 3。

【解决方案3】：

要逐个显示每个可见单元格，您可以通过使用 alpha 和持续时间值来实现。

extension UITableView {

    func fadeVisibleCells() {

        var delayDuration: TimeInterval = 0.0

        for cell in visibleCells {

            cell.alpha = 0.0

            UIView.animate(withDuration: delayDuration) {
                cell.alpha = 1.0
            }

            delayCounter += 0.30
        }
    }
}

【讨论】：

【解决方案4】：

这里有一些可以帮助您入门的代码。在我的COBezierTableView 我继承了UITableView 并覆盖了layoutSubviews 方法。在那里，您可以根据它们在视图中的相对位置来操作单元格。在本例中，我将它们从底部淡出。

import UIKit

public class MyCustomTableView: UITableView {

    // MARK: - Layout

    public override func layoutSubviews() {
        super.layoutSubviews()

        let indexpaths = indexPathsForVisibleRows!
        let totalVisibleCells = indexpaths.count - 1
        if totalVisibleCells <= 0 { return }

        for index in 0...totalVisibleCells {
            let indexPath = indexpaths[index] 
            if let cell = cellForRowAtIndexPath(indexPath) {
                if let superView = superview {
                    let point = convertPoint(cell.frame.origin, toView:superView)
                    let pointScale = point.y / CGFloat(superView.bounds.size.height)
                    cell.contentView.alpha = 1 - pointScale
                }
            }
        }
    }
}

【讨论】：

【解决方案5】：

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    cell .alpha = 1.0
         let transform = CATransform3DTranslate(CATransform3DIdentity, 0, 3000, 1200)
       //let transform = CATransform3DTranslate(CATransform3DIdentity, 250, 0, 1250)
     //let transform = CATransform3DTranslate(CATransform3DIdentity, 250, 1250, 0)
      // let transform = CATransform3DTranslate(CATransform3DIdentity, -250, 300, 120)


   cell.layer.transform = transform




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

【讨论】：

请添加一些关于您的逻辑的声明来解释您的代码！会很棒的！

【解决方案6】：

我认为这种方法将是一个很好的解决方案。

将所有单元格的 alpha 设置为 0

在 tableView(_:,willDisplay:,forRowAt:) 中为它们设置动画

为每个indexPath.row 设置一个延迟

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    cell.alpha = 0

    UIView.animate(withDuration: 0.5, delay: 0.05 * Double(indexPath.row), animations: {
        cell.alpha = 1
    })
}

【讨论】：