6.4-添加边缘效果

径向渐变使您能够在圆圈中绘制有趣的边缘效果。 看图6-8所示的效果。 它是一个表达正弦波的渐变。 但是，它只绘制在圆的边缘，路径的中心保持不变。

图6-8基于正弦的梯度仅应用于圆的边缘。

示例6-2使用非直观的方法来实现这种效果，演示了一种有趣的应用渐变的方法。 正弦函数仅压缩到渐变的最后25％。 因为渐变是从中心向外径向绘制的，所以仅在边缘出现阴影效果。

实施例6-2绘制延迟的径向渐变

InterpolationBlock block = ^CGFloat (CGFloat percent)
{
	CGFloat skippingPercent = 0.75;
	if (percent < skippingPercent) return 0;
	CGFloat scaled = (percent - skippingPercent) *
		(1 / (1 - skippingPercent));
	return sinf(scaled * M_PI);
};

Gradient *gradient =[Gradient gradientUsingInterpolationBlock: block
	between: WHITE_LEVEL(0, 0) and: WHITE_LEVEL(0, 1)];

CGContextDrawRadialGradient(UIGraphicsGetCurrentContext(),
	gradient.gradient, center, 0, center, dx, 0);

您可以使用此效果仅在边缘应用缓动(easing)，如图6-9所示。 插值块压缩缓动(easing)函数，仅在经过一定百分比之后应用它，在这种情况下为径向距离的50％：

InterpolationBlock block = ^CGFloat (CGFloat percent)
{
	CGFloat skippingPercent = 0.5;
	if (percent < skippingPercent) return 0;
	CGFloat scaled = (percent - skippingPercent) *
		(1 / (1 - skippingPercent));
	return EaseIn(scaled, 3);
};

延迟缓动(easing)出现在图6-9右侧的图表中。 上升在0.5之后开始。 正如你可以看到，上升是相当渐进的。 你直到大约0.75位置才真正看到变暗的效果。

图6-9这个透明到黑色的径向渐变从大约中心的一半开始绘制。 插值函数的曲线图示出了缓和(easing)直到半径距离已经过去才开始，大部分颜色在径向距离的大约75％之后添加。

基本缓和(Easing)背景

（假如）说你正在寻找一个很好的圆形按钮效果。 图6-2中所示的基本径向结果对于您可能太(spherical)，而图6-9中的延迟效果可能太(flat)。 渐变功能，结果，产生一个非常好的按钮基础（效果），如图6-10所示。

图6-10此ease-in径向功能从中心施加到边缘，为圆形按钮提供简单的基础（效果）。

内插块很简单，如下：

InterpolationBlock block = ^CGFloat (CGFloat percent)
{
	return EaseIn(percent, 3);
};

您将看到本章后面再次使用此方法在按钮基础上构建“发光”中心。

---

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