缘由

在浏览技术网站的时候,发现一款pagecontrol效果还蛮不错的。当打开地址后发现是用swift语言写的,苦笑。。。没关系嘛,咱们就来一步一步把它翻译为OC,顺便复习一下动画。原轮子地址TKRubberIndicator

效果

我们先来看一下效果:

是不是效果还挺好看的。接着我们来分析一下结构

分析

首先是UI部分

  • 一个背景条
  • 一个和背景同色的大球
  • 大球中间的红色小球
  • 四个黄色的小球

然后我们先把UI部分显示出来

CAShapeLayer *backgroundLayer = [CAShapeLayer layer]; //背景条

CAShapeLayer *bigBubbleLayer = [CAShapeLayer layer]; //同色的大球

CAShapeLayer *bubbleBackLayer = [CAShapeLayer layer]; //大球里面红色的球

for (int i = 0; i<numberOfPage-1; i++;) { //这里需要的小球数量==需要分页个数-一个大球

CAShapeLayer *bubbleLayer = [CAShapeLayer layer]; //黄色小球

}

然后我们分析一下动画

  • 判断当前需要移动的方向
  • 将大球缩放移动到index
  • 假如目前向右移动,将其当前位置和目标位置中间的小球依次向左移动,移动路径是一个半圆,同时缩放小球
  • 移动完成后小球抖动

方向判断:

CGPoint location = [ges locationInView:self]; //点击位置坐标获取

NSInteger index = (location.x-xPoint)/(bubbleW + offSet);  //(点击坐标-当前球坐标)/(球宽度+偏移量) 得到点击第几个小球

Direction direction = (index > currentIndex)?left:right;  // 通过点击位置和当前位置对比得到移动方向

大球移动动画

CAKeyframeAnimation *bigBubbleScale = [CAKeyframeAnimation animationWithKeyPath:@"transform"];  //大球缩放

[CATransation begin];

[CATransation setAnimationWithDuration:.2s];

bigBubbleLayer.position = newPosition;

bubbleBackLayer.position = newPosition;

[CATransition commit];

小球动画

for (int x=0; x<index-currentIndex; x++;) { //判断需要移动小球的个数

CAShapeLayer *bubbleLayer = self.bubbleLayers[index-x-1]; // 找出需要移动的小球

[bubbleLayer doAnimation]; // 做动画

动画1:

CAKeyframeAnimation *positionAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];  // 做半圆路径动画

positionAnimation.path = bezierPath.cgpath;

动画2:

CAKeyframeAnimation *transformAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform"];  // 做缩放动画

动画3:

CAKeyframeAnimation *shakeAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];  // 做抖动动画

最后,将新的位置通知出去,做其他操作

block(index); //index 新位置

最后

项目完整地址,CustomPageControl

转载请注明出处,谢谢。


林深不知归路 敢问几时休