谈谈iOS中粘性动画以及果冻效果的实现选读.docx

网址： 谈谈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?