Swift 表视图动画教程: Drop-In Cards

http://www.raywenderlich.com/76024/swift-table-view-animations-tutorial-drop-cards

标准 table view 是一个强大而又灵活的数据呈现方式;大部分情况下你的app 都使用了某种形式的 table view。但是,它有一个缺点就是,无法进行太多的定制,你的 app 会淹没在成千上万的类似是 app 中。

为了不使用千篇一律的 table view,我们可以利用某些动画以便使你的app 更加耀眼。看一下 Google+ app,卡片从边上滑过的动画。如果你没看过,请在这里下载download it here (免费)! 你也可以看一下 Google 在 2014 I/O 大会上发布的 设计指南 。它包含了许多如何使用动画的示例和技巧。

开始

下载开始项目 ,在 Xcode 6 中打开。在它的故事板中有一个UITableViewController 子类 MainViewController 以及 UITableViewCell 子类CardTableViewCell。模型对象是 Memeber 类,用于封装团队中每个成员的信息。数据来自本地资源束中的 JSON 文件。

运行程序,效果如下图所示:

最简单的动画

使用 File\New\File… ,先后旋转 iOS\Source\SwiftFile ,文件名为TipInCellAnimator.swift ,然后点击Create.

编辑该文件内容为:


import UIKit

class TipInCellAnimator {

// placeholder for things to come -- only fades in for now

class func animate(cell:UITableViewCell) {

let view = cell.contentView

view.layer.opacity = 0.1

UIView.animateWithDuration(1.4) {

view.layer.opacity = 1

}

}

}

该类只有一个以单元格为参数方法,它将单元格的 contentView 透明度设置为 0.1,然后在 1.4 秒的时间内将透明度改为 1.0。

触发动画

打开 MainViewController.swift 加入下列方法:


override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell,     forRowAtIndexPath indexPath: NSIndexPath) {

TipInCellAnimator.animate(cell)

}

这个方法是 UITableViewDelegate 协议 中的方法之一。它在单元格被渲染之前调用。在这个方法中我们调用了 TipInCellAnimator 的 animate 方法。

运行程序,滚动表格,单元格将呈现一个渐入的动画效果:


旋转

打开 TipInCellAnimator.swift, 将内容修改为:


import UIKit

import QuartzCore // 1

class TipInCellAnimator {

class func animate(cell:UITableViewCell) {

let view = cell.contentView

let rotationDegrees: CGFloat = -15.0

let rotationRadians: CGFloat = rotationDegrees * (CGFloat(M_PI)/180.0)

let offset = CGPointMake(-20, -20)

var startTransform = CATransform3DIdentity // 2

startTransform = CATransform3DRotate(CATransform3DIdentity,

rotationRadians, 0.0, 0.0, 1.0) // 3

startTransform = CATransform3DTranslate(startTransform, offset.x, offset.y, 0.0) // 4

// 5

view.layer.transform = startTransform

view.layer.opacity = 0.8

// 6

UIView.animateWithDuration(0.4) {

view.layer.transform = CATransform3DIdentity

view.layer.opacity = 1

}

}

}

这次的动画时间为0.4 秒,进场的效果更加复杂,将呈现一个旋转特效。上述代码的核心是 startTransform 变量,并在动画结束时回到原状态。

1.     首先需要导入 QuartzCore,这样我们才可能使用 core animation 动画。

2.     定义一个 identity transform,它的意思是什么都不做。这是这个 view 的默认 transform。

3.     调用 CATransform3DRotate 实现一个 -15 度(反时针)旋转。旋转轴为 0.0, 0.0, 1.0(分别代表x,y,z 轴),即在 z-轴上做旋转。

4.     除了简单的旋转,我们还做了一个平移。

5.     将旋转并平移后的 transform 设置为 view 的 transform。

6.      让 view 的状态由startTransform 变为默认的 transform。

上面执行的效果如下图所示:

注意,你是在单元格的子视图上进行动画,而不是对单元格进行动画。直接旋转单元格会导致一些意外的效果,例如抖动或切掉单元格的一部分。使用单元格的contentView 来代表单元格是所有子视图。

并非所有的属性都支持动画, Core AnimationProgramming Guide 中的 list of animatableproperties 列出了支持动画的属性。

运行程序,查看表格渲染时的效果。

Swift 重构

这个教程最初的 O-C 版本有一个地方值得一提,它会确保只会对startTransform 进行一次计算。而在上面的代码中,每次调用 animate() 方法都会导致 startTransform 重新被赋值。那么,在Swift 中如何实现这一点?

一种办法是声明一个存储属性。该属性通过调用一个闭包计算获得。

One wayis to use an immutable stored property that is computed by calling a closure.

修改 TipInCellAnimator.swift 内容如下:


import UIKit

import QuartzCore

let TipInCellAnimatorStartTransform:CATransform3D = {

let rotationDegrees: CGFloat = -15.0

let rotationRadians: CGFloat = rotationDegrees * (CGFloat(M_PI)/180.0)

let offset = CGPointMake(-20, -20)

var startTransform = CATransform3DIdentity

startTransform = CATransform3DRotate(CATransform3DIdentity,

rotationRadians, 0.0, 0.0, 1.0)

startTransform = CATransform3DTranslate(startTransform, offset.x, offset.y, 0.0)

return startTransform

}()

class TipInCellAnimator {

class func animate(cell:UITableViewCell) {

let view = cell.contentView

view.layer.transform = TipInCellAnimatorStartTransform

view.layer.opacity = 0.8

UIView.animateWithDuration(0.4) {

view.layer.transform = CATransform3DIdentity

view.layer.opacity = 1

}

}

}

注意,创建 startTransform 的代码现在放到了存储属性TipInCellAnimatorStartTransform 中。而且我们没有用定义 getter 方法的方式定义这个属性(这样做会导致每次调用getter 方法都创建一次 transform)。我们是通过一个闭包+()的方式给这个属性赋默认值的。一对空的圆括号表示强制调用这个闭包,闭包的返回值将传递给这个属性。这个细节在苹果的Swift 官方教程中“初始化”一章中讨论。请参考“用闭包或函数设置属性的默认值”。

有节制地使用动画

虽然动画的效果很好看,但却不能无节制地使用它。如果音效和动画的滥用曾经让你深受其害,那么你应该知道过度依赖特效所带来的恶果!

在这个项目中,只需在单元格第一次渲染的时候使用特效就行了——当表格从上到下滚动时。当表格从下往上滚时,单元格不需要使用特效。

我们需要存储哪些单元格已经显示过的,以便第二次显示时不使用特效。这里,我们使用了一个 Swift 字典对象。

打开MainViewController.swift 加入一个属性:


var didAnimateCell:[NSIndexPath: Bool] = [:]

定义了一个字典对象, key 为 NSIndexPaths 类型,值为 Bools 类型。然后修改 tableView(tableView:,willDisplayCell:, forRowAtIndexPath:) 方法为:


override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell,                          forRowAtIndexPath indexPath: NSIndexPath) {

if didAnimateCell[indexPath] == nil || didAnimateCell[indexPath]! == false {

didAnimateCell[indexPath] = true

TipInCellAnimator.animate(cell)

}

}

我们判断单元格的 index path 是否已经在didAnimateCell 字典中存在。如果不存在,说明是第一次显示这个单元格;那么我们就执行单元格动画并将 indexPath 设置到字典中。如果存在,什么都不做。

运行程序,上拉滚动表格,你将看到单元格动画:

时间: 2024-10-10 00:14:40

Swift 表视图动画教程: Drop-In Cards的相关文章

Swift 关闭视图的过度动画 eg:CollectionView ,TableView

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Menlo; color: #1e9421; background-color: #ffffff } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Menlo; color: #3e1e81; background-color: #ffffff } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; fo

表视图控制器(TableViewController)(二)

1 tableView的编辑模式 1.1 问题 表视图可以进入编辑模式,当进入编辑模式就可以进行删除.插入.移动单元等操作,本案例还是使用联系人界面学习如何进入编辑模式,以及进入编辑模式之后的删除.插入.移动等操作,如图-1所示: 图-1 1.2 方案 首先还是创建一个带导航的TRContactTableViewController对象做为根视图控制器. 其次创建一个TRContact类用于管理联系人信息,有两个NSString类型的属性分别为name和phoneNumber,本案例为了学习方便

15个快速学习苹果Swift编程语言的入门教程

要说今年最火的编程语言是什么.那就非Swift莫属了.当然最主要还是市场炒的比较热,加上官方Swift教程<The Swift Programming Language>在北航的大三学生发起在github上进行协同翻译获得了很高的人气,短短几天时间内<Swift中文版>第一版就发布.这真是不火不行了. Swift是苹果公司在WWDC2014上发布的全新开发语言.从演示视频及随后在appstore上线的标准文档看来,语法内容混合了OC,JS,Python,语法简单,使用方便,并可与O

Swift游戏开发实战教程(大学霸内部资料)

Swift游戏开发实战教程(大学霸内部资料) 试读下载地址:http://pan.baidu.com/s/1sj7DvQH 介绍:本教程是国内第一本Swift游戏开发专向资料. 本教程详细讲解记忆配对.太空侵略者.Simon记忆.迷你高尔夫.银河大战五个游戏的开发.在项目讲解同时,还着详细介绍了图形绘制.游戏引擎.音频引擎.用户交互.传感器等专向技术.最后,教程讲解苹果专用游戏框架Sprit Kit的使用.为了帮助读者充分了解实际开发,教程还详细讲解游戏开发的必备知识,如帐号绑定.发布游戏等内容

Apple Swift编程语言入门中文教程

Apple Swift编程语言入门教程 目录 1   简介 2   Swift入门 3   简单值 4   控制流 5   函数与闭包 6   对象与类 7   枚举与结构 1   简介 今天凌晨Apple刚刚发布了Swift编程语言,本文从其发布的书籍<The Swift Programming Language>中摘录和提取而成.希望对各位的iOS&OSX开发有所帮助. Swift是供iOS和OS X应用编程的新编程语言,基于C和Objective-C,而却没有C的一些兼容约束.S

表视图控制器(TableViewController)(三) 、 表视图搜索

1 乐库的设置界面 1.1 问题 tableView分为静态(static)和动态(dynamic),之前使用的都是动态的tableView,表视图的有多少分区.有多少行以及每一行显示的内容都不是固定的,都由数据模式来决定.而静态的tableView有多少分区.有多少行以及每一行显示的内容都是固定不变的. 静态tableView应用广泛,常用于各种应用软件的设置界面,本案例使用静态tableView完成乐库的设置界面,如图-1所示: 图-1 1.2 方案 由图-1可以看到该界面的显示内容是固定不

转---视图动画和坐标系介绍!

Core Animation基础 Core Animation利用了硬件加速和架构上的优化来实现快速渲染和实时动画.当视图的drawRect:方法首次被调用时,层会将描画的结果捕捉到一个位图中,并在随后的重画中尽可能使用这个缓存的位图,以避免调用开销很大的drawRect:方法.这个过程使Core Animation得以优化合成操作,取得期望的性能. Core Animation把和视图对象相关联的层存储在一个被称为层树的层次结构中.和视图一 样,层树中的每个层都只有一个父亲,但可以嵌入任意数量

The Swift Programming Language-官方教程精译Swift(6)控制流--Control Flow

Swift提供了类似C语言的流程控制结构,包括可以多次执行任务的for和while循环,基于特定条件选择执行不同代码分支的if和switch语句,还有控制流程跳转到其他代码的break和continue语句. 除了C里面传统的 for 条件递增循环,Swift 还增加了 for-in 循环,用来更简单地遍历数组(array),字典(dictionary),范围(range),字符串(string)和其他序列类型. Swift 的 switch 语句比 C 语言中更加强大.在 C 语言中,如果某个

Excel动画教程50例(一)

Excel动画教程50例(一) 1.自动筛选 2.在Excel中字符替换 3.在Excel中冻结行列标题 4.在Excel中为导入外部数据 5.在Excel中行列快速转换 6.共享Excel工作簿 7.在Excel中添加说明文字 8.在Excel中数据分列整理 9.在Excel中数据合并 10.在Excel中添加常用文件夹 11.在Excel中添加多个视图 12.在Excel中设置打印区域 13.在Excel中录制“宏” 14.在Excel中建立图表 15.在Excel中获取网络数据