Intermediate iOS 11 Programming with Swift (三) :动态表格视图Cell

本文是Intermediate iOS 11 Programming with Swift 4系列 的 第 三 篇.

3.0

当您阅读本章时,我假设您已经知道如何使用UITableView来显示数据。如果没有的话,回去看看《Swift book》的iOS 11编程入门

UITableView类提供了一种以表形式显示信息的强大方式,它是iOS应用程序中最常用的组件之一。无论你是在构建一个“应用程序”、“待办事项应用程序”还是“社交应用程序”,你都可以用一种或另一种形式来使用表格视图。UITableView的默认实现是初步的,只适用于基本的应用。为了将应用程序与其他应用程序区分开来,您通常为表视图和表单元格提供定制,以便使应用程序脱颖而出。

在本章中,我将向您展示一种强大的技术,通过添加微妙的动画来活跃您的应用程序。多亏了内置的api。对表视图单元格进行动画处理非常简单。同样,为了演示动画是如何完成的,我们将调整一个现有的基于表格的应用程序并添加一个微妙的动画。

首先,从这里下载项目模板。下载后,编译应用程序,确保你能正确运行它。它只是一个显示文章列表的非常简单的应用程序。

3.1


为表视图单元格创建一个简单的渐隐动画

让我们首先对基于表的应用程序进行调整,使其具有简单的渐隐效果。那么,当表行出现时,我们如何添加这个微妙的动画呢?  如果您查看UITableViewDelegate协议的文档,您应该找到一个名为tableView(_:willDisplay:forRowAt:)的方法:

optional func tableView(_ tableView: UITableView,

          willDisplay cell: UITableViewCell,

            forRowAt indexPath: IndexPath)

方法将在绘制行之前被调用。通过实现该方法,您可以自定义单元格对象,并在显示单元格之前添加您自己的动画。以下是创建渐隐效果所需的内容。在ArticleTableViewController.swift中插入代码片段:

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

    // Define the initial state (Before the animation)

    cell.alpha = 0

    // Define the final state (After the animation)

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

}

Core Animation为iOS开发人员提供了一种创建动画的简单方式。您需要做的就是定义可视化元素的初始和最终状态。Core Animation随后将找出这两种状态之间所需的动画。

在上面的代码中,我们首先将单元格的初始alpha值设置为0,这表示完全透明。然后我们开始动画;将持续时间设置为1秒,并定义单元格的最终状态,完全不透明。这将在表单元格出现时自动创建渐隐效果。

现在可以编译和运行应用程序了。

使用CATransform3D创建旋转效果

容易,对吧?只需几行代码,您的应用程序看起来就与基于表格的标准应用程序有点不同。tableView(_:willDisplay:forRowAt:)方法是实现表格视图单元格动画的关键。您可以在方法中实现任何类型的动画。

渐隐动画就是一个例子。现在让我们尝试使用CATransform3D实现另一个动画。别担心,你只需要几行代码。

若要将旋转效果添加到表单元格,请更新如下方法:

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

    // Define the initial state (Before the animation)

    let rotationAngleInRadians = 90.0 * CGFloat(Double.pi/180.0)

    let rotationTransform = CATransform3DMakeRotation(rotationAngleInRadians, 0, 0, 1)

    cell.layer.transform = rotationTransform

    // Define the final state (After the animation)

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

}

与前面一样,我们定义转换的初始和最终状态。一般的想法是我们先顺时针旋转90度,然后把它恢复到正常的方向,也就是最终的状态。

好的,但是我们怎么能顺时针旋转90度的表格单元呢?

关键是使用CATransform3DMakeRotation函数来创建旋转变换。函数有四个参数:

弧度的角度——这是旋转的角度。由于角度是弧度,我们首先需要把角度转换成弧度。

        x轴-这是从屏幕左边到屏幕右边的轴。

        y轴——这是从屏幕顶部到屏幕底部的轴。

        z轴-这是指向屏幕外的轴"

由于旋转是围绕Z轴的,我们将这个参数的值设为1,而将X轴和Y轴的值设为0。一旦我们创建转换,它就被分配给单元格的层。

接下来,我们开始动画的持续时间为1秒。单元格的最终状态被设置为CATransform3DIdentity,它将把单元格重置为原始位置。

好了,点击运行来测试这个应用程序!

3.2


提示:你可能想知道CATransform3D是什么。它实际上是一个表示矩阵的结构。在三维空间中进行旋转等变换涉及到一些矩阵的计算。我不会讲矩阵计算的细节。如果你想了解更多,你可以查看这里.


用CATransform3DTranslate创建一个飞行的效果。

旋转效果看起来很酷吗?您可以进一步调整动画以使其更好。尝试更改tableView(_:willDisplay:forRowAt:)方法,并使用以下代码行替换rotationTransform的初始化:

let rotationTransform = CATransform3DTranslate(CATransform3DIdentity, -500, 100, 0)

代码行只是转换或移动单元格的位置。它表示单元格向左移动了500点(负值),向下移动了100点(正值)。Z轴没有变化。

现在你可以再次测试这个应用了。点击“运行”按钮,就可以玩“飞行”了

3.3


现在,每当您在表格中滚动时,单元格动画都会显示出来,无论您是向下滚动还是向上滚动表格视图。”虽然动画很不错,但是如果动画显示得太频繁,用户会觉得很烦人。您可能只希望在单元格第一次出现时显示动画。尝试修改现有的项目并添加该限制。

总结

在本章中,我向您展示了表格单元动画的基础知识。尝试更改转换的值,看看会得到什么效果。

可以在这里查看原作者的项目.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,227评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,755评论 1 298
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,899评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,257评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,617评论 3 288
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,757评论 1 221
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,982评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,715评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,454评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,666评论 2 249
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,148评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,512评论 3 258
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,156评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,112评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,896评论 0 198
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,809评论 2 279
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,691评论 2 272

推荐阅读更多精彩内容

  • 用到的组件 1、通过CocoaPods安装 2、第三方类库安装 3、第三方服务 友盟社会化分享组件 友盟用户反馈 ...
    SunnyLeong阅读 14,503评论 1 180
  • 好了好了 别说了 我爱你 170322 2355
    小名王蕊蕊阅读 164评论 0 0
  • 小小四张书签画了三个小时,中间给孩子把尿哄睡一次,哈哈,只想说:腰好累!还没压平,凑乎看吧,没有水彩纸了,用的水溶...
    一笔一画一世界阅读 238评论 0 3
  • 时间过得真快,今年都快过完了。今天的我还在不断地犯同样的错误,真是对不起别人更对不起自己。项目总负责是我,分项是别...
    缪培阅读 277评论 0 0
  • 01 接到父亲的电话时是早上,我还在上课,拒接了。等到下午吃过好饭,看通话记录,才发现我还没有回电话。 接通电话,...
    刀子ABC阅读 418评论 2 6