快速的TableViewCell动画 [英] TableViewCell animation in swift

查看:198
本文介绍了快速的TableViewCell动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

}

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



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

编辑:



我尝试过这种方法,但它不是那么平滑且不

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

}


解决方案

您需要的是缓动动画。有关更多信息,请查看 http://easings.net



您可以制作参数化动画使用此库 https://github.com/jjackson26/JMJParametricAnimation/tree/master/JMJParametricAnimationDemo

目前,您尝试执行的效果可以使用下面的代码大致完成。您必须一个接一个地执行缩放动画。完成的方式使所有动画一起开始。

completion块中添加下一个动画代码,然后在动画之后开始。您可以进一步调整时间以获得所需的粗略效果。

  cell.layer.transform = CATransform3DMakeScale(0.1,0.1, 1)
UIView.animateWithDuration(0.3,动画:{
cell.layer.transform = CATransform3DMakeScale(1.05,1.05,1)
},完成:{在
UIView中完成。 animateWithDuration(0.1,动画:{
cell.layer.transform = CATransform3DMakeScale(1,1,1)
})
})


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

}

解决方案

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

这篇关于快速的TableViewCell动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆