前言
- 前段时间看到一个挺有趣的动画效果，于是就想着实现一下，顺便练下手，这里是第一篇教程，介绍了启动动画的制作，示例代码放在这里，完整的demo会在最后一篇教程放出
动画引擎的选择
- 使用Facebook开源的pop以及iOS自带的CoreAnimation
实现指示牌开始阶段的动画
实现思路是使用一个CALayer作为容器，也就是containerLayer，在容器当中再放置两个layer，一个矩形rectLayer与一个三角形triLayer组成一个指示牌，形变的动画由容器内部的layer来执行，而位移的动画由containerLayer来执行
-
具体的代码如下：
- (void)initRectLayer{ self.rectLayer = [CALayer layer]; self.rectLayer.backgroundColor = [UIColor colorWithWhite:1 alpha:1].CGColor; self.rectLayer.position = CGPointMake(self.containerLayer.frame.size.width/2, self.containerLayer.frame.size.height/4); self.rectLayer.bounds = CGRectMake(0, 0, 24, 30); self.rectLayer.cornerRadius = 2.f; [self.containerLayer addSublayer:self.rectLayer]; } - (void)initTriLayer{ self.triLayer = [CAShapeLayer layer]; [self.containerLayer addSublayer:self.triLayer]; UIBezierPath *bottomBezierPath = [UIBezierPath bezierPath]; self.triLayer.position = CGPointMake(self.containerLayer.frame.size.width/2-20, self.containerLayer.frame.size.height/70); [bottomBezierPath moveToPoint:CGPointMake(0, 28)]; [bottomBezierPath addLineToPoint:CGPointMake(40, 28)]; [bottomBezierPath addLineToPoint:CGPointMake(20, 50)]; [bottomBezierPath closePath]; self.triLayer.path = bottomBezierPath.CGPath; self.triLayer.fillColor = [UIColor whiteColor].CGColor; } - (void)initContainerLayer{ self.containerLayer = [CALayer layer]; self.containerLayer.position = CGPointMake(self.worksheetView.frame.size.width/2, self.worksheetView.frame.size.height/2); self.containerLayer.bounds = CGRectMake(0, 0, 60, 60); self.containerLayer.backgroundColor = [UIColor clearColor ].CGColor; [self.worksheetView.layer addSublayer:self.containerLayer]; } - (void)rectLayerAnimation{ POPBasicAnimation *topScaleAnim = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerSize]; topScaleAnim.toValue = [NSValue valueWithCGSize:CGSizeMake(40, 25)]; topScaleAnim.duration = 1; POPBasicAnimation *topPositionAnim = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPosition]; topPositionAnim.toValue = [NSValue valueWithCGPoint:CGPointMake(24, 40)]; topPositionAnim.duration = 0.5; POPBasicAnimation *topCornerAnim = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerCornerRadius]; topCornerAnim.toValue = @3.f; topCornerAnim.duration = 0.5; POPSpringAnimation *shakeAnim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerRotation]; shakeAnim.toValue = @(0.5); shakeAnim.springBounciness = 20; [self.rectLayer pop_addAnimation:topScaleAnim forKey:@"IndiReadyStyleTopScaleAnim"]; [self.rectLayer pop_addAnimation:topCornerAnim forKey:@"IndiReadyStyleTopCornerAnim"]; } - (void)triLayerAnimation{ POPBasicAnimation *bottonScaleAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerScaleXY]; bottonScaleAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(0.25, 0.25)]; bottonScaleAnimation.duration = 0.5; POPBasicAnimation *bottonPosition1stAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPosition]; bottonPosition1stAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(self.worksheetView.frame.size.width/2-50, self.worksheetView.frame.size.height/2-50)]; bottonPosition1stAnimation.duration = 0.5; POPBasicAnimation *bottonPositionAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPosition]; bottonPositionAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(self.triLayer.position.x + 15, self.triLayer.position.y+19)]; bottonPositionAnimation.duration = 0.5; [self.triLayer pop_addAnimation:bottonScaleAnimation forKey:@"IndiReadyStyleBottomScaleAnim"]; [self.triLayer pop_addAnimation:bottonPositionAnimation forKey:@"IndiReadyStyleBottomPositionYAnim"]; } - (void)containerLayerAnimation{ CGPoint originPoint = self.containerLayer.position; POPCustomAnimation *customAnimation = [POPCustomAnimation animationWithBlock:^BOOL(id target, POPCustomAnimation *animation) { self.containerLayer.position = CGPointMake(self.containerLayer.position.x - 3, self.containerLayer.position.y - 3); BOOL downSwitch; if (self.containerLayer.position.x - originPoint.x <= -80) { downSwitch = YES; } if (downSwitch) { self.containerLayer.position = CGPointMake(self.containerLayer.position.x, self.containerLayer.position.y+10); } if (self.containerLayer.position.y >= originPoint.y + 41) { return NO; }else{ return YES; } }]; [self.containerLayer pop_addAnimation:customAnimation forKey:@"IndiReadyStyleOutSizeLayerAnim"]; }
实现开始阶段圆变成线的效果
这里实际上分成两个阶段，一个由实心圆开始变化，从实心圆开始变化成一个圆环最后消失；消失的一瞬间替换成贝塞尔曲线，后面就是对贝塞尔曲线进行操纵了
-
先说从实心圆变成圆环的效果，这个只需要借助pop对圆的borderwidth属性进行动画便可，非常简单
- (void)innerCircleLayerAnimation{ POPBasicAnimation *circleLayerBorderWidthAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerBorderWidth]; circleLayerBorderWidthAnimation.toValue = @(2); circleLayerBorderWidthAnimation.duration = 1.f; [self.innerCircleLayer pop_addAnimation:circleLayerBorderWidthAnimation forKey:@"IndiReadyStyleInnerLayerBorderWidthAnim"]; } -
接下来是圆变成线的效果，消失之后的圆环会被贝塞尔曲线所取代，实际上是由四段贝塞尔曲线拼接成的圆，只要画出贝塞尔曲线几个关键的变形状态便可以使用CoreAnimation来制作过渡的变化效果，最终实现效果如下：
需要画出贝塞尔曲线展开过程的两个关键状态，一个是展开到一半的状态，另一个是完全展开成一条直线的状态
-
展开成一半的贝塞尔曲线效果如图：
-
展开成一条直线效果如图：
-
关键的代码如下：
- (void)initFancyPath{ self.outSizeRectLayer = [CALayer layer]; self.outSizeRectLayer.position = CGPointMake(self.worksheetView.frame.size.width/2,self.worksheetView.frame.size.height/2); self.outSizeRectLayer.bounds = CGRectMake(0, 0, 100, 100); self.outSizeRectLayer.backgroundColor = [UIColor clearColor].CGColor; [self.worksheetView.layer addSublayer:self.outSizeRectLayer]; CGFloat originX = self.containerLayer.bounds.origin.x; CGFloat originY = self.containerLayer.bounds.origin.y; CGFloat originWidth = 100; CGFloat originHeight = 100; self.rectCenter = CGPointMake(originX + originWidth/2, originY + originHeight/2); CGFloat extraX = 0; CGFloat extraY = 0; CGFloat offset = originWidth / 3.6; self.pointA = CGPointMake(self.rectCenter.x + extraX, originY + extraY); self.pointB = CGPointMake(originX + originWidth + extraX, self.rectCenter.y + extraY); self.pointC = CGPointMake(self.rectCenter.x + extraX, originY + originHeight + extraY); self.pointD = CGPointMake(originX + extraX, self.rectCenter.y + extraY); self.pointE = CGPointMake(self.rectCenter.x + extraX, originY + extraY); self.c1 = CGPointMake(self.pointA.x + offset, self.pointA.y); self.c2 = CGPointMake(self.pointB.x, self.pointB.y - offset); self.c3 = CGPointMake(self.pointB.x, self.pointB.y + offset); self.c4 = CGPointMake(self.pointC.x + offset, self.pointC.y); self.c5 = CGPointMake(self.pointC.x - offset, self.pointC.y); self.c6 = CGPointMake(self.pointD.x, self.pointD.y + offset); self.c7 = CGPointMake(self.pointD.x, self.pointD.y - offset); self.c8 = CGPointMake(self.pointA.x - offset, self.pointA.y); self.fancyLine = [UIBezierPath bezierPath]; self.fancyShape = [CAShapeLayer layer]; [self.fancyLine moveToPoint: self.pointA]; [self.fancyLine addCurveToPoint:self.pointB controlPoint1:self.c1 controlPoint2:self.c2]; [self.fancyLine addCurveToPoint:self.pointC controlPoint1:self.c3 controlPoint2:self.c4]; [self.fancyLine addCurveToPoint:self.pointD controlPoint1:self.c5 controlPoint2:self.c6]; [self.fancyLine addCurveToPoint:self.pointE controlPoint1:self.c7 controlPoint2:self.c8]; [self.fancyLine closePath]; self.fancyShape.path = self.fancyLine.CGPath; self.fancyShape.position = CGPointMake(self.rectCenter.x, self.rectCenter.y); self.fancyShape.bounds = CGPathGetBoundingBox(self.fancyShape.path); self.fancyShape.strokeColor = [UIColor blackColor].CGColor; self.fancyShape.fillColor = [UIColor clearColor].CGColor; self.fancyShape.lineWidth = 3.0; [self.outSizeRectLayer addSublayer:self.fancyShape]; } - (void)bezierPathAnimation{ CGPoint pointAm = CGPointMake(self.pointA.x + 90, self.pointA.y); CGPoint pointEm = CGPointMake(self.pointE.x - 90, self.pointE.y); CGPoint pointBm = CGPointMake(self.pointB.x, self.pointB.y); CGPoint pointDm = CGPointMake(self.pointD.x, self.pointD.y); CGPoint c1m = CGPointMake(self.c1.x + 20, self.c1.y + 10); CGPoint c2m = CGPointMake(self.c2.x, self.c2.y + 10); CGPoint c7m = CGPointMake(self.c7.x, self.c7.y + 10); CGPoint c8m = CGPointMake(self.c8.x - 20, self.c8.y + 10); UIBezierPath *crazyPath = [UIBezierPath bezierPath]; [crazyPath moveToPoint:pointAm]; [crazyPath addCurveToPoint:pointBm controlPoint1:c1m controlPoint2:c2m]; [crazyPath addCurveToPoint:self.pointC controlPoint1:self.c3 controlPoint2:self.c4]; [crazyPath addCurveToPoint:pointDm controlPoint1:self.c5 controlPoint2:self.c6]; [crazyPath addCurveToPoint:pointEm controlPoint1:c7m controlPoint2:c8m]; self.fancyShape.path = crazyPath.CGPath; CABasicAnimation *morph = [CABasicAnimation animationWithKeyPath:@"path"]; morph.duration = 0.3; morph.delegate = self; morph.toValue = (id)crazyPath; [self.fancyShape addAnimation:morph forKey:nil]; } - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{ CGPoint pointAfin = CGPointMake(self.pointA.x + self.worksheetView.frame.size.width/2 - 10, self.pointA.y + 100); CGPoint pointBfin = CGPointMake(self.pointB.x, self.pointB.y + 50); CGPoint pointCfin = CGPointMake(self.pointC.x,self.pointC.y); CGPoint pointDfin = CGPointMake(self.pointD.x, self.pointD.y + 50); CGPoint pointEfin = CGPointMake(self.pointE.x - self.worksheetView.frame.size.width/2 + 10, self.pointE.y + 100); CGPoint c1fin = CGPointMake(self.c1.x + 100, self.c1.y + 100); CGPoint c2fin = CGPointMake(self.c2.x + 80, self.c2.y + 50 + 100/3.6); CGPoint c3fin = CGPointMake(self.c3.x - 5, self.c3.y + 50 - 100/3.6); CGPoint c4fin = CGPointMake(self.c4.x, self.c4.y); CGPoint c5fin = CGPointMake(self.c5.x, self.c5.y); CGPoint c6fin = CGPointMake(self.c6.x + 5, self.c6.y + 50 - 100/3.6); CGPoint c7fin = CGPointMake(self.c7.x - 80, self.c7.y + 50 + 100/3.6); CGPoint c8fin = CGPointMake(self.c8.x - 100, self.c8.y + 100); UIBezierPath *lineFinalPath = [UIBezierPath bezierPath]; [lineFinalPath moveToPoint:pointAfin]; [lineFinalPath addCurveToPoint:pointBfin controlPoint1:c1fin controlPoint2:c2fin]; [lineFinalPath addCurveToPoint:pointCfin controlPoint1:c3fin controlPoint2:c4fin]; [lineFinalPath addCurveToPoint:pointDfin controlPoint1:c5fin controlPoint2:c6fin]; [lineFinalPath addCurveToPoint:pointEfin controlPoint1:c7fin controlPoint2:c8fin]; self.fancyShape.path = lineFinalPath.CGPath; CABasicAnimation *morph = [CABasicAnimation animationWithKeyPath:@"path"]; morph.duration = 0.3; morph.toValue = (id)lineFinalPath; [self.fancyShape addAnimation:morph forKey:nil]; } 曲线的坐标计算借助了一个外接矩形进行辅助定位
ok，第一篇教程就到此结束了，第二篇将介绍下载过程指示牌移动的动画