在swift中使用TableViewCell动画

时间:2015-01-07 11:00:00

标签: uitableview animation swift

我正在关注THIS教程并使用以下代码实现该动画:

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

}

但是我想在这个单元格动画中更新一些内容,就像我滚动到tableView时一样,单元格在开始时就像(0.1,0.1,1)一样小,之后它像(1,1,1)那样缩放但是我想像泡泡一样应用类型效果就像它在开始之后一样小,它的原始比例就像(1,1,1)一样,一个是缩放,它再次进入原始比例,如(1,1,1)

请指导我如何实现该动画?

修改

我尝试了这个,但它并不是那种平滑而不完全我想要的。

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

}

6 个答案:

答案 0 :(得分:20)

你需要的是一个轻松的动画效果。有关详细信息,请查看http://easings.net

您可以使用此库https://github.com/jjackson26/JMJParametricAnimation/tree/master/JMJParametricAnimationDemo

制作参数化动画

目前,您尝试做的效果大致可以使用下面的代码完成。你必须一个接一个地进行缩放动画。你的方式使所有的动画一起开始。
完成块中添加下一个动画代码会在动画后启动它。您可以进一步调整时间以获得所需的粗略效果。

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

答案 1 :(得分:12)

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

答案 2 :(得分:9)

Swift 3 版本就像魅力一样!

groupby.apply

答案 3 :(得分:2)

使用此代码在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()
}

答案 4 :(得分:2)

使用此代码在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})
}

答案 5 :(得分:1)

使用此代码从左向Tableview单元添加动画

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