CodeV

7.7-构建行军蚁效果

发表于

您刚刚阅读的display link技术也支持常规绘图更新。您可以使用这种方法进行许多动画效果。 例如，图7-8显示了一个常见的“行进蚂蚁”显示效果。 在这个界面中，浅灰色线条动画，围绕矩形选择区行进。 最初由Bill Atkinson为MacPaint在旧式Macintosh系列上开发，它被命名为蚂蚁行进的想法。 该演示使用户能够轻松区分选择区的边缘。

图7-8

图7-8通过随着时间推移每个虚线形成“行军蚂蚁”的选择区动画。

示例7-4提供了一个drawRect:实现，绘制了行进蚂蚁效果。 它计算与当前实际时间相关的虚线偏移量，并描边您提供的路径。 虽然图7-8使用了一个矩形，但您可以在任何路径形状中使用此代码。

该方法旨在用于在界面上展开的清晰，轻量的视图。这使您可以将您的选择演示区与您的GUI的其余部分分开，您可以根据需要轻松隐藏或删除。

它使用一个12点长虚线和3点短间隙。 重要的是，它使用系统时间而不是任何特定的计数器建立其动画偏移量。 这可以确保display link中的任何故障（通常由高计算开销引起）不会影响每次刷新时的放置，并且动画将以您指定的速度进行。

有两个时间因素在这里起作用。第一个是刷新率。它控制drawRect:方法的触发以请求可视（部分）更新的频率。 第二个控制模式偏移。 这指定了虚线模式在什么程度上移动，并独立于系统时间计算。

为了动画，示例7-4计算一个阶段。 这就是UIBezierPath类（并且更重要的是它的底层Quartz CGPath）用于提供虚线偏移量。 相位可以是正的（通常为逆时针运动）或负（顺时针），并指定开始绘制的图案的距离。 这个例子使用一个15点长的模式。每15点，虚线恢复原来的位置。

要计算偏移量，此方法应用一个称为secondsPerFrame的因子。 示例7-4周期是每四分之三秒。 您可以调整此时间以减少或增加模式的速度。

示例7-4显示前进蚂蚁

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// The drawRect: method is called each time the display
// link fires. That's because calling setNeedsDisplay
// on the view notifies the system that the view contents
// need redrawing on the next drawing cycle.

- (void) drawRect:(CGRect)rect
{
	CGContextRef context = UIGraphicsGetCurrentContext();
	CGContextClearRect(context, rect);
	
	CGFloat dashes[] = {12, 3};
	CGFloat distance = 15;
	CGFloat secondsPerFrame = 0.75f; // Adjust as desired

	NSTimeInterval ti = [NSDate
		timeIntervalSinceReferenceDate] / secondsPerFrame;
	
	BOOL goesCW = YES;
	CGFloat phase = distance * (ti - floor(ti)) *
		(goesCW ? -1 : 1);
	[path setLineDash:dashes count:2 phase:phase];
	[path stroke:3 color:WHITE_LEVEL(0.75, 1)];
}

本文翻译自《iOS Drawing Practical UIKit Solutions》作者：Erica Sadun，翻译：Cheng Dong。如果觉得本书不错请购买支持正版:亚马逊购买传送门，本书所有源代码可在GitHub上下载。译者虽然力求做到信，达，雅，但是由于时间仓促加之译者水平十分有限，文中难免会出现不正确，不准确，词不达意，难于理解的地方，还望各位批评指正，共同进步，谢谢。转载请注明出处。