谈谈iOS中粘性动画以及果冻效果的实现

在最近做个一个自定义PageControl——KYAnimatedPageControl中，我实现了CALayer的形变动画以及CALayer的弹性动画，效果先过目：

先做个提纲：

第一个分享的主题是“如何让CALayer发生形变”，这个技术在我之前一个项目 ———— KYCuteView 中有涉及，也写了篇简短的实现原理博文。今天再举一个例子。

之前我也做过类似果冻效果的弹性动画，比如这个项目—— KYGooeyMenu。用到的核心技术是CAKeyframeAnimation，然后设置几个不同状态的关键帧，就能初步达到这种弹性效果。但是，毕竟只有几个关键帧，而且是需要手动计算，不精确不说，动画也不够细腻，毕竟你不可能手动创建60个关键帧。所以，今天的第二个主题是 —— “如何用阻尼振动函数创建出60个关键帧”，从而实现CALayer产生类似[UIView animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion] 的弹性动画。

正文。

如何让CALayer发生形变?

关键技术很简单：你需要用多条贝塞尔曲线 “拼” 出这个Layer。之所以这样做的原因不言而喻，因为这样方便我们发生形变。

比如 KYAnimatedPageControl 中的这个小球，其实它是这么被画出来的：

小球是由弧AB、弧BC、弧CD、弧DA 四段组成，其中每段弧都绑定两个控制点：弧AB 绑定的是 C1 、 C2;弧BC 绑定的是 C3 、 C4 .....

如何表达各个点?

首先，A、B、C、D是四个动点，控制他们动的变量是ScrollView的contentOffset.x。我们可以在-(void)scrollViewDidScroll:(UIScrollView *)scrollView中实时获取这个变量，并把它转换成一个控制在 0~1 的系数，取名为factor。

1

_factor = MIN(1, MAX(0, (ABS(scrollView.contentOffset.x - self.lastContentOffset) / scrollView.frame.size.width)));

假设A、B、C、D的最大变化距离为小球直径的2/5。那么结合这个0~1的系数，我们可以得出A、B、C、D的真实变化距离 extra 为：extra = (self.width * 2 / 5) * factor。当factor == 1时，达到最大形变状态，此时四个点的变化距离均为(self.width * 2 / 5)。

注意：根据滑动方向，我们还要根据是B点移动还是D点移动。

CGPoint pointA = CGPointMake(rectCenter.x ,self.currentRect.origin.y + extra); CGPoint pointB = CGPointMake(self.scrollDirection == ScrollDirectionLeft ? rectCenter.x + self.currentRect.size.width/2 : rectCenter.x + self.currentRect.size.width/2 + extra*2 ,rectCenter.y); CGPoint pointC = CGPointMake(rectCenter.x ,rectCenter.y + self.currentRect.size.height/2 - extra); CGPoint pointD = CGPointMake(self.scrollDirection == ScrollDirectionLeft ? self.currentRect.origin.x - extra*2 : self.currentRect.origin.x, rectCenter.y);

然后是控制点：

关键是要知道上图中A-C1 、B-C2、B-C3、C-C4....这些水平和垂直虚线的长度，命名为offSet。经过多次尝试，我得出的结论是：

当offSet设置为 直径除以3.6 的时候，弧线能完美地贴合成圆弧。我隐约感觉这个 3.6 是必然，貌似和360度有某种关系，或许通过演算能得出 3.6 这个值的必然性，但我没有尝试。

因此，各个控制点的坐标:

CGPoint c1 = CGPointMake(pointA.x + offset, pointA.y); CGPoint c2 = CGPointMake(pointB.x, pointB.y - offset); CGPoint c3 = CGPointMake(pointB.x, pointB.y + offset); CGPoint c4 = CGPointMake(pointC.x + offset, pointC.y); CGPoint c5 = CGPointMake(pointC.x - offset, pointC.y); CGPoint c6 = CGPointMake(pointD.x, pointD.y + offset); CGPoint c7 = CGPointMake(pointD.x, pointD.y - offset); CGPoint c8 = CGPointMake(pointA.x - offset, pointA.y);

有了终点和控制点，就可以用UIBezierPath 中提供的方法 - (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2; 画线段了。

重载CALayer的- (void)drawInContext:(CGContextRef)ctx;方法,在里面画图案：

- (void)drawInContext:(CGContextRef)ctx{ ....//在这里计算每个点的坐标 UIBezierPath* ovalPath = [UIBezierPath bezierPath]; [ovalPath moveToPoint: pointA]; [ovalPath addCurveToPoint:pointB controlPoint1:c1 controlPoint2:c2]; [ovalPath addCurveToPoint:pointC co