Tree on Chen

如何使用UIBezierPath实现一个弹性视图动画

Wed, 02 Dec 2015 18:53:51 +0000

原文：Elastic view animation, or how I built DGElasticPullToRefresh 原作者 @gontovnik

DGElasticPullToRefresh 展示了如何实现一个弹性效果。效果如下图所示：

开发环境： Xcode 7 Swift 2.0

要求：开发者至少对 UIBezierPath 和 UIGestureRecognizer 有一定的了解.

理解业务逻辑

你可能从上面的效果图上可以看到一些端倪，这个动画中我们主要使用到了UIBezierPath来实现上面这种效果。我们首先创建一个贝塞尔曲线路径的CAShapeLayer，然后当你的手指在屏幕上移动的时候我们将移动所有的控制点来呈现动画。每一个控制点会使用一个可见的UIView来表示。下面有几张图来演示它们是如何工作的，我将所有的控制点标识成了红色：

第二章图片中将每个表示控制点的 View 的变量名称标记出来了，如L3，L2等。

当你的手指释放的时候，我们就播放Spring动画，让所有的控制点向其初始位置以一定的回弹效果移动。当所有的视图在动画播放过程中，我们需要时刻计算并我们的贝塞尔曲线（每一帧都进行计算）。因此，我们准备使用CADisplayLink，CADisplayLink在主循环中运行而且每一帧都会去执行指定的方法。

A CADisplayLink object is a timer object that allows your application to synchronize its drawing to the refresh rate of the display. - Apple doc

让我们开始Code吧~

Build

创建一个单视图控制器，然后将下面这些代码粘贴到viewController.swift文件的类声明中。

// MARK: -
// MARK: Vars

private let minimalHeight: CGFloat = 50.0
private let shapeLayer = CAShapeLayer()

// MARK: -

override func loadView() {
 super.loadView()

 shapeLayer.frame = CGRect(x: 0.0, y: 0.0, width: view.bounds.width, height: minimalHeight)
 shapeLayer.backgroundColor = UIColor(red: 57/255.0, green: 67/255.0, blue: 89/255.0, alpha: 1.0).CGColor
 view.layer.addSublayer(shapeLayer)

 view.addGestureRecognizer(UIPanGestureRecognizer(target: self, action: "panGestureDidMove:"))
}

// MARK: -
// MARK: Methods

func panGestureDidMove(gesture: UIPanGestureRecognizer) {
 if gesture.state == .Ended || gesture.state == .Failed || gesture.state == .Cancelled {

 } else {
 shapeLayer.frame.size.height = minimalHeight + max(gesture.translationInView(view).y, 0)
 }
}

override func preferredStatusBarStyle() -> UIStatusBarStyle {
 return .LightContent
}

以上代码中，我们做的工作主要有以下几点：

Objective-C中Category的一点东西

Mon, 14 Sep 2015 15:36:07 +0000

Objective-C中的分类（category）是一种编译时的手段，其允许我们通过给某个已知类添加方法来扩充该类的一种方式。当然这其中是有限制的，就是不能给已知类添加新的实例变量。

如下代码展示：

类MyClass为一个简单的类，其中有实例方法 -print

#import <Foundation/Foundation.h>
@interface MyClass : NSObject

- (void)print;

@end

#import "MyClass.h"
@implementation MyClass

- (void)print
{
 NSLog(@"MyClass...");
}

@end

我们向为MyClass再添加一个方法Hello，那我们就可以用分类的方法实现，我们为其添加分类MyAddition1和MyAddition2，如下所示：

#import "MyClass.h"
@interface MyClass (MyAddition1)

@property (nonatomic, copy) NSString *name;
- (void)hello;
@end

#import "MyClass+MyAddition1.h"

@implementation MyClass (MyAddition1)

- (void)hello
{
 NSLog(@"hello!!!");
}

@end

其中MyAddition为分类的名称，而文件名字约定俗成用“类名+扩展名”的形式。这样，我们就能够为MyClass类添加hello方法了，如下调用：

#import "MyClass+MyAddition1.h"

int main() {
 //...
 MyClass my = [MyClass new];
 [my hello];
 //...
}

Category 的使用场景主要有以下几种：

需求变更，需要为已知类添加方法；
将类的不同模块实现划分: a)具体可以将类的实现分开到不同的文件里面； b)将不同功能的分类文件交由不同的开发者实现；
想为Apple基础类库添加自己需要的方法，实际上和1相似；

但是分类的使用目前也有需要注意的地方：

Category可以访问原有类的实例变量，但不能添加实例变量；
Category中实现和原有类中相同签名的方法时，会覆盖原有类的方法；

但是这两点均可以通过其他方式实现：

为分类添加实例变量

为分类添加实例变量主要通过关联对象的方法。如下所示：

#import "MyClass.h"
@interface MyClass (MyAddition1)

@property (nonatomic, copy) NSString *name;

@end

#import "MyClass+MyAddition1.h"
#import <objc/objc-runtime.h>

@implementation MyClass (MyAddition1)

- (void)setName:(NSString *)name {
 objc_setAssociatedObject(self, "key", name, OBJC_ASSOCIATION_COPY);
}

- (NSString *)name {
 NSString *name = objc_getAssociatedObject(self, "key");
 return name;
}

@end

如果调用被分类覆盖掉的原方法

实际上，通过查看Objc runtime源码可以获知，分类方法并不是绝对意义上的覆盖原有类的方法，只是在调用的时候调用顺序导致而已，这涉及到Objc runtime的一些内容。

理解Objective-C运行时

Mon, 07 Sep 2015 17:55:33 +0000

Objective-C 运行时对于刚刚踏入 Cocoa/Objective 世界的人是很容易忽略的 Objective-C 语言的特性之一。原因就是尽管 Objective-C 是一门几个小时之内入门的语言，但是投身 Cocoa 的新手们会花费大量时间在 Cocoa 框架中，试图搞清楚他到底是怎么工作的。我觉得每个开发者都应该对其有深入的了解，明白一些内部的实现细节，而不仅仅只知道代码 [target doMethodWith:var] 会被编译器转换成 objc_msgSend(target,@selector(doMethodWith:),var1); 而已。了解 Objective-C 运行时的原理有助于你对 Objective-C 语言有更深入的理解，清楚你得 App 是怎么运行的。我觉得这对无论是 Mac/iPhone 新手或者老手都会有所帮助。

[TOC]

Objective-C运行时是开源的

Objective-C 运行时是开源的，你可以随时从 Apple 获取到。实际上查看 Objective-C 运行时源码是我搞清楚这个语言是怎么运作的首选方法，而不是去查看和它相关的苹果文档。你可以到这里下载到运行时的源码（截止到译者翻译的时候，最新版本的文件是objc4-647.tar.gz）。

动态 Vs. 静态

Objective-C 是一门动态的面向对象语言，这意味着它可以将编译链接时决定的事情推迟到运行时进行。这就给了你很大的灵活性，你可以按照自己的需要重定向消息到适当的对象上，你甚至可以交换方法实现（译者注：method swizzling，方法调配，开发者常用此技术向原有实现中添加新功能）。而运行时可以使对象明白自己可以响应哪些消息，不能响应哪些消息（译者注：introspect 内省），并正确的派发消息。

译者注：内省（introspection）是面向对象语言和环境的一个强大特性，Objective-C和Cocoa在这个方面尤其的丰富。内省是对象揭示自己作为一个运行时对象的详细信息的一种能力。这些详细信息包括对象在继承树上的位置，对象是否遵循特定的协议，以及是否可以响应特定的消息。NSObject协议和类定义了很多内省方法，用于查询运行时信息，以便根据对象的特征进行识别。

参考: Objective-C 的 Introspection

我们将这些特征和C语言进行对比来看，在C中，你从main()函数开始，然后按顺序从上往下写你的代码逻辑或者执行函数方法。C结构体是无法将请求转发到其他目标对象来执行方法的。你很可能写了如下类似的代码：

#include < stdio.h >

int main(int argc, const char **argv[]) {
 printf("Hello World!");
 return 0;
}

编译器解析、优化然后将优化后的代码转换成如下的汇编语言：

.text
 .align 4,0x90
 .globl _main
_main:
Leh_func_begin1:
 pushq %rbp
Llabel1:
 movq %rsp, %rbp
Llabel2:
 subq $16, %rsp
Llabel3:
 movq %rsi, %rax
 movl %edi, %ecx
 movl %ecx, -8(%rbp)
 movq %rax, -16(%rbp)
 xorb %al, %al
 leaq LC(%rip), %rcx
 movq %rcx, %rdi
 call _printf
 movl $0, -4(%rbp)
 movl -4(%rbp), %eax
 addq $16, %rsp
 popq %rbp
 ret
Leh_func_end1:
 .cstring
LC:
 .asciz "Hello World!"

然后将其和C库链接生成可执行文件。相比之下，Objective-C语言整个过程和上面类似，不过代码的产生依赖Objective-C运行时的具体表现（译者注：运行时按照不同情况，生成不同的代码吧）。当我们刚接触Objective-C语言的时候，我们可能被告知像如下代码

我们是如何创建iOS版的Guillotine菜单动画的

Tue, 01 Sep 2015 15:52:07 +0000

原文：How We Created Guillotine Menu Animation for iOS 原作者 @johnsundell

你是否曾经有过这样的疑问？为什么app中几乎是清一色的侧边栏（sidebar），为什么不把它做成topBar或者bottomBar，甚至cornerBar呢？

本文将要谈到的就是当前导航条动画的一个新趋势。

动画很有趣，但更重要的是能发挥很大的作用，它们可以改变你思考问题的方式，使得你的产品更好用并提升的app整体的用户体验。接下来我们将要展示的是设计师Vitaly Rubtsov的一个非常棒的点子：

“每个设计师都有那么一刻感到无聊。因为几乎所有（对动画）的完善修补、裁剪以及规格设定都给他们留下了很少发挥想象的余地。而每当这些时候，我就会驱使自己打开Adobe After Effects软件然后创作一些比较有趣的东西。

当我开始想我要创建一个什么东西的时候，我突然有个想法，通常侧边栏都从屏幕左侧划出，同时将所有的内容都移动到右侧位置。这种传统侧边栏的实现方式太过无聊了。那如果我们将侧边栏变成上边栏会怎么样呢？它从页面的上方掉落然后以一种特别的方式呈现，听起来很棒不是吗？“

Vitaly设计的topBar动画由我们的iOS开发工程师Maksym Lazebnyi使用swift语言实现，并且开发者给了它一个很有趣的名字—— Guillotine Menu。

by Makssym Lazebnyi

实际上，我们的iOS团队见到过很多实现这种动画效果的方法。我们选择了其中一种方式实现，这种方式允许开发者在Storyboard中以任何方式自定义菜单。

为了实现我们的转场动画（transitioning animation），我们创建了一个UIStoryboardSegue的子类和一个自定义动画管理器（custom animation controller）。基本上这就是你实现该动画所需要做的全部工作，除非你想让它更炫酷。当然我们也确实想这样做，因此还创建了一些辅助的类。

整体上，你需要三个类以及一个UIView的扩展类来创建这个动画，如下所示：

GuillotineMenuSegue. 该类是继承自UIStoryboardSegue类。我们使用它来模态显示菜单，并实现由 GuillotineMenuTransitionAnimation类控制的呈现动画。 GuillotineMenuSegue允许你为菜单添加透明度，当然本文并没有做这个工作。
GuillotineMenuTransitionAnimation. 该类是为了自定义呈现 GuillotineMenuViewController 类中视图的动画所用。
GuillotineMenuViewController. 该类是一个UIViewController的子类，存放菜单视图所用。

除此之外，我们还为UIView添加了扩展方法以便能为子视图添加约束来更好的适应父视图。

接下来，我们逐一对每一个类进行阐述。

GuillotineMenuSegue

这个类中没有什么特别的地方，我只提及一些关键点。

在该类重载的init方法中，我们检查目标视图控制器（destination view controller）是否遵守GuillotineAnimationProtocol 协议（该协议我们后面会讲到）。在重载的perform方法中我们将self设置成一个过渡动画的代理。

在代理方法 animationControllerForPresentedController 中我们使用关联对象将GuillotineMenuSegue的实例对象（self）关联到具体的将要呈现的视图控制器中，这样当menu view controller呈现在屏幕上的时候，segue实例不会被销毁。（译者注：代码如下）

- (id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source
{
 // 将segue示例self关联到将要呈现的试图控制器presented中，这样确保presented生命周期内segue实例不会被释放
 objc_setAssociatedObject(presented, &key, self, OBJC_ASSOCIATION_RETAIN_NONATOMIC);

 return [[GuillotineTransitionAnimation alloc] initWithMode:AnimationModePresentation];
}

GuillotineMenuTransitionAnimation

所有的动画处理逻辑都在这个类中实现。

起初我们考虑使用 animateWithDuration usingSpringWithDamping & initialSprintVelocity方法，但是当我们认真考虑这个动画之后我们改变了主意。我们需要实现的菜单动画中，当菜单从上方掉落之后，需要和父视图的左侧边界发生碰撞，产生碰撞效果。而上面方法中的回弹效果会穿过左边界（spring through the border of the superview），因此我们放弃了这个实现方式，转而采用了UIDynamicAnimator。

[28] Implement strStr()

Fri, 21 Aug 2015 09:14:17 +0000

题目：28. Implement strStr()

Implement strStr().

Returns the index of the first occurrence of needle in haystack, or -1 if needle is not part of haystack.

题意：

该题目就是实现strstr()函数，该函数C语言原型如下：返回字符串str1在str2中的位置。

extern char *strstr(char *str1, const char *str2);

解法：

暴力求解法

最直接的实现方式就是暴力求解法，如下代码所示，

class Solution {
 public:
 int strStr(string haystack, string needle) {
 return bruth(haystack, needle);
 }

 private:
 int bruth(string text, string pattern) {
 int M = pattern.length();
 int N = text.length();
 if (M == 0) return 0;
 if (N == 0) return -1;
 for (int i = 0; i <= N - M; ++i) {
 int j = 0;
 for (; j < M; ++j) {
 if (text.at(i + j) != pattern.at(j))
 break;
 }
 if (j == M) return i;
 }
 return -1;
 }
}

在最坏的情况下，暴力子字符串查找算法在长度为N的文本中查找长度为M的模式字符串需要O(NM)次字符串比较。

我们可以将上面的实现方法进行一定的修改，让大家能看到i指针的回退，如下代码所示，当i指针指向字符和j指向字符发生失配，i便会回退j个位置（此时j是失配前模式串的匹配项个数），同时j指向模式串的第一个位置。该段代码和上面代码其实是等效的。

class Solution {
public:
 int strStr(string haystack, string needle) {
 return bruth(haystack, needle);
 }

private:
 int bruth(string text, string pattern) {
 int M = pattern.length();
 int N = text.length();
 if (M == 0) return 0;
 if (N == 0) return -1;
 int i = 0;
 int j = 0;
 for (; i < N && j < M; ++i) {
 if (text.at(i) == pattern.at(j)) j++;
 else { i -= j; j = 0; }
 }
 if (j == M) return i - M;
 else return -1;
 }
}

那我们就可以很明显的看到，当模式串中j指向位置字符不匹配的时候，其实前面通过匹配我们已经获知了一部分文本的情况，因此如果能够利用这一部分已知的情况来加大模式串移动的有效性。KMP算法就是利用字符串匹配失效之前部分匹配的这个有用信息，通过保持文本指针不回退，仅有效移动模式字符串的位置来进行有效查找的。

[257] Binary Tree Paths

Tue, 18 Aug 2015 16:28:26 +0000

题目：257. Binary Tree Paths

Given a binary tree, return all root-to-leaf paths. For example, given the following binary tree: 1 /
2 3
5 All root-to-leaf paths are: [“1->2->5”, “1->3”]

题意：

难度不大，考察树的遍历

解法：

C++版本实现方法：

 /**
 * Definition for a binary tree node.
 * struct TreeNode {
 * int val;
 * TreeNode *left;
 * TreeNode *right;
 * TreeNode(int x) : val(x), left(NULL), right(NULL) {}
 * };
 */
 class Solution {
 public:
 vector<string> binaryTreePaths(TreeNode* root)
 {
 vector<string> results;
 visitTreeNode(root, "", results);
 return results;
 }

 private:
 void visitTreeNode(TreeNode* node, string path, vector<string>& result)
 {
 if(node == nullptr) return;
 if (!path.empty())
 {
 path += "->";
 }
 path += int2Str(node->val);

 if (node->left == nullptr && node->right == nullptr)
 {
 result.push_back(path);
 }
 else
 {
 if (node->left != nullptr)
 {
 visitTreeNode(node->left, path, result);
 }
 if (node->right != nullptr)
 {
 visitTreeNode(node->right, path, result);
 }
 }
 }

 std::string int2Str(int nValue)
 {
 ostringstream ss;
 ss << nValue;
 return ss.str();
 }
 }