缘起

这两天和 Ray 一起吃拉面的时候，除了关注那位可爱服务员之外，他还煞有介事的跟我讲 —— “我发现了一个超屌的设计师，balabala”，其实时至今日我已经不知道如何定义超屌的设计师这个概念了，就像超屌的开发者一样，这个问题探究到最后只会变成一句感叹——人类最屌竟然只能做成这个样子。

不过，还是捧捧 Ray 的场啦，我问道 “是何许人也？”

他拿过来几乎没有信号的 iPad 给我看，你看这个人，这个人，目光从 Safari 地址栏的 .cn 这个坑爹的后缀扫过后，赫然发现一个完全不知道的名字 Marcus Eckert 虽然不知道名字，但是接下来的内容绝对是如雷贯耳——Wide Sky。

这段留着你来点开上面的两个链接欣赏下。

个人英雄主义如果不是个人能力超强的话，往往会变成一个自我重伤的事情，但是很显然 Marcus Eckert 把这一点发挥到了极致， Meek for iOS 太震撼了。 所以按捺不住心中的激动，我对 Motion Graphics 展开了一番问道。

寻路

Motion Graphics 这个词我不久前第一次听说，当时是一米天给 CatchChat 做介绍动画的时候，跟我说他们是高大上的 MG，不过我的理解是怎么现在搞啥都得发明个名词来方便忽悠了，不过只要是好东西做做忽悠也没啥，但是此事也就这样没放在心上。

这次我借机好好研究了一下。

这里正好有一段关于 MG 是啥的 Youtube 视频，应该是某个专业做 MG 的团队出品的，质量一般般，不过我觉得是体现了绝大部分从业者对这个的理解。

所以我想了想，之前我应该也做过一个类似的东西，之前研究 Facebook POP 的时候，有个 Transform 的部分 正是异曲同工。

但是说实在的，探究 Motion Graphics 的过程是不愉快的，因为看得越多，越发现了大家在用那么几种相似的变换形式来来回折腾。这种体验相似于其它的行业，最顶尖的天才研究出来一些新式的效果，其他人抄袭个改进。但是想想如果人类最顶尖的想象力和效果就是这样了，还是很伤心的。

问道

Motion Graphics 在 AE 里做应该是相对简单的，不过 Marcus Eckert 用代码实现了这些效果，就让我很感动了，他自己也说，其实对他而言更多的是技术上的实验，所以我也思考了下如何从技术上实现这些效果。

Actually，动效无论是软件还是在动画里，用多了其实都会让人吐的。

好好，先聊聊 iOS 里怎么实现动效。

iOS 里的动效初探

简单的飞来飞去，大小改变什么的就很简单了，聊聊复杂的形变问题。

还好我之前玩过 Blender，我的思路第一个就是对 Bezier 曲线进行改变，这个就比较类似关键帧动画。

比如我们如何把多边形进行变形

先画五边形

    self.aPath = [UIBezierPath bezierPath];

    // Set the starting point of the shape.
    [self.aPath moveToPoint:CGPointMake(100.0, 0.0)];

    // Draw the path.
    [self.aPath addLineToPoint:CGPointMake(200.0, 40.0)];
    [self.aPath addLineToPoint:CGPointMake(160, 140)];
    [self.aPath addLineToPoint:CGPointMake(40.0, 140)];
    [self.aPath addLineToPoint:CGPointMake(0.0, 40.0)];
    [self.aPath closePath];

然后再搞一个变形后的曲线

    //B path

    self.bPath = [UIBezierPath bezierPath];

    // Set the starting point of the shape.
    [self.bPath moveToPoint:CGPointMake(0.0, 0.0)];

    // Draw the lines.
    [self.bPath addLineToPoint:CGPointMake(100.0, 40.0)];
    [self.bPath addLineToPoint:CGPointMake(120, 140)];
    [self.bPath addLineToPoint:CGPointMake(-10.0, 100.0)];
    [self.bPath addLineToPoint:CGPointMake(0.0, 40.0)];
    [self.bPath closePath];

那么先画出 A path

    CAShapeLayer *shape = [CAShapeLayer layer];
    shape.drawsAsynchronously = YES;
    shape.frame = self.view.bounds;
    shape.path = self.aPath.CGPath;
    shape.lineWidth = 3.0f;
    shape.lineCap = kCALineCapRound;
    shape.lineJoin = kCALineJoinRound;
    shape.strokeColor = [UIColor whiteColor].CGColor;
    shape.fillColor = [UIColor redColor].CGColor;
    [self.view.layer addSublayer:shape];

接下来要做的就是加入个动画让 A path 变成 B path

    CABasicAnimation * pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
    pathAnimation.fromValue = (id)[self.aPath CGPath];
    pathAnimation.toValue = (id)[self.bPath CGPath];
    pathAnimation.duration = 0.5f;
    pathAnimation.autoreverses = NO;
    pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [shape addAnimation:pathAnimation forKey:@"animationKey"];

    shape.path = self.bPath.CGPath;

Build Run 一下就可以发生这个渐变动画了，瞬间有小学时候玩 Flash 的感觉有木有。 timingFunction 可以经过复杂的定义实现一个比较生动的动画。

通过 addQuadCurveToPoint 这个也可以实现控制点方式对形状进行控制，也可以写一个函数进行 Path 的 Smooth 的操作。这方面我们已经有先行者做了尝试 https://github.com/Petrakeas/outlineDEMO

同时我也给 PNChart 0.6 版本加入了一个实时更新数据的功能，用的就是这个方法。

动效物理效果进阶

之后我又发现了一位先驱

这效果看起来非常高大上，但是知道原理后又不是那么神奇。

    [self.bPath moveToPoint:CGPointMake(0.0, 0.0)];
    [self.bPath addQuadCurveToPoint:CGPointMake(0.0, ScreenHeight)
                  controlPoint:CGPointMake(100.0, ScreenHeight/2.0)];

通过 addQuadCurveToPoint 增加控制点，然后添加一个 Dummy 的 UIView 跟随控制点，在释放的时候给 Dummy 一个 Spring 的 Animation 即可，或者使用 UIDynamic 增加一个高空坠落的效果。使用 CADisplayLink 同步 Path 和 Dummy View 的数值。

在 Ray 提到波纹没有像 Android L 里面那样跟手之后，我想到确实有个可以改进的地方，就是在移动手指的时候 controlPoint 的 Y 坐标可以跟随手的位置进行变动，这样波纹的尖端就会和手一直。

动效果冻效果

那么随着进一步探索，又找到一位复制 Skype 的果冻菜单效果的先驱。

实现的原理也是一样的，不过是创建两个 Dummy View ，你可以研究下这篇文章。

后来作者创建了一个独立的库 https://github.com/fastred/AHKBendableView

有兴趣的话可以研究下，实现的方式就更加复杂了，不过原理还是一样的。

        let path = UIBezierPath()
        path.moveToPoint(CGPoint(x: 0, y: 0))
        path.addQuadCurveToPoint(CGPoint(x: width, y: 0),
            controlPoint:CGPoint(x: width / 2.0, y: 0 + bendableOffset.vertical))
        path.addQuadCurveToPoint(CGPoint(x: width, y: height),
            controlPoint:CGPoint(x: width + bendableOffset.horizontal, y: height / 2.0))
        path.addQuadCurveToPoint(CGPoint(x: 0, y: height),
            controlPoint: CGPoint(x: width / 2.0, y: height + bendableOffset.vertical))
        path.addQuadCurveToPoint(CGPoint(x: 0, y: 0),
            controlPoint: CGPoint(x: bendableOffset.horizontal, y: height / 2.0))
        path.closePath()

使用 CADisplayLink 同步 bendableOffset 和 Dummy View 的移动。

再续前缘

研究到这里，回想 Marcus Eckert 的工作，觉得越发碉堡，如果要在三维空间实现这些效果，那么还要再去搞 OpenGL，不禁为此觉得潸然泪下，无论是工程师还是设计师，局限于自己的领域是无法做出极具创造性的工作的。

望着窗外广州大道的车灯，被雨夜的风吹的更清醒一点了。