动画的微妙之处

本文讲解贝塞尔曲线一部分的使用技巧

nice 标签功能的进化版,先上图,Gif

概念

贝塞尔曲线(The Bézier Curves),是一种在计算机图形学中相当重要的参数曲线(2D,3D的称为曲面)。

在iOS开发中,我们使用UIBezierPath来绘制贝塞尔曲线的。

UIBezierPath 对象是 CGPathRef 数据类型的封装,如果是基于矢量形状的,都用直线和曲线段去创建,我们使用直线段去创建矩形和多边形,使用曲线段去创建弧(arc),圆或者其他复杂的曲线形状。
每一段都包括一个或者多个点,绘图命令定义如何去诠释这些点。
每一个直线段或者曲线段的结束的地方是下一个的开始的地方。
每一个连接的直线或者曲线段的集合成为SubPath
一个 UIBezierPath 对象定义一个完整的路径包括一个或者多个 SubPaths

创建和使用一个Path对象的过程是分开的。创建 path 是第一步,包含一下步骤:

  • 创建一个 UIBezierPath 对象。
  • 使用方法 moveToPoint: 去设置初始线段的起点。
  • 添加 line 或者 curve 去定义一个或者多个 SubPaths
  • 改变 UIBezierPath 对象跟绘图相关的属性。

我们可以设置 stroked path 的属性 lineWidth 和 lineJoinStyle,也可以设置 filled path 的属性 usesEvenOddFillRule。

当创建 Path,我们应该相对于原点(0,0)管理 Path 上面的点,这样我们在随后就可以很容易的移动 Path 了。为了绘制 Path 对象,我们要用到 stroke 和 fill 方法,这些方法在 Current Graphic Context 下渲染 Path 的 line 和 curve 段。

抽象

有时候在理解动画过程中,我会无从下手,于是乎,我摸索了一个符合自己的方法,就是把动画的步骤分开后进行抽象化。

在这个演示里面我是如何抽象的呢?

分两部分

  • 直线(可以多段)

千万不要着迷,任何简洁的控件你都去绘制,有些可以用图片解决的,尽量用图片来解决。

在你对贝塞尔曲线的概念有一定了解之后,应该能用伪代码进行实现抽象出来的可视化内容了。

move to point  
add line  
add line  
draw circle  
add line  
close  

能想象得到是什么吗?从一个点开始,绘制一条直线,再绘制一条直线,然后画一个圆,最后绘制一条直线,闭合路径。

构建

从零碎的伪代码进行完善实现代码,一步一步的构建出动画模型。

UIBezierPath *path = [UIBezierPath new];  
[path moveToPoint:CGPointMake(20, 200)];
[path addLineToPoint:CGPointMake(100, 100)];
[path addLineToPoint:CGPointMake(200, 100)];
[path addArcWithCenter:CGPointMake(200 + 5, 100) radius:5 startAngle:M_PI endAngle:(M_PI- 0.1 / 180 * M_PI ) clockwise:YES];
[path addLineToPoint:CGPointMake(100, 100)];
[path closePath];

layer.path = path.CGPath;  

封装

对构建好的动画模型进行封装,提供方便的API和样式控制参数。

@class XHBranchLayer;

typedef void(^XHBranchLayerAnimationCompletion)(BOOL finished, XHBranchLayer *branchLayer);

@interface XHBranchLayer : CAShapeLayer

@property (nonatomic, assign) XHBranchLayerDirection direction;

@property (nonatomic, assign) CGPoint startPoint;
@property (nonatomic, assign) CGPoint midPoint;
@property (nonatomic, assign) CGPoint endPoint;

@property (nonatomic, assign) CGFloat radius;
@property (nonatomic, assign) CGFloat toValue;
@property (nonatomic, assign) NSTimeInterval pathDuration;

- (void)animationDelay:(NSTimeInterval)delay
            completion:(XHBranchLayerAnimationCompletion)completion;

@end

组合

通过封装好的动画模型组合成最终动画效果。

Demo的源码, -_-点我

下一期:认真审视自己走过的路

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

曾宪华

阿里无线技术专家、业余产品经理,我的微信:15915895880

Guangzhou「廣州」 https://github.com/xhzengAIB