iOS动画--进阶(一)

字数 785阅读 1662

优秀的动画来源于设计,优秀的设计来源于灵感和动效的积累。我们不是设计师,但可以积累动画的基础。在动画的进阶部分,我们先积累一些与动画相关的知识。

  • 贝塞尔曲线
  • CAShapeLayer、CAReplicatorLayer

贝塞尔曲线

Bezier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线.主要有起始点、终止点(也称锚点)、控制点这几个概念。通过调整控制点,贝塞尔曲线的形状会发生变化。

一阶贝塞尔曲线(线段):

一阶公式

一阶贝塞尔曲线

二阶贝塞尔曲线(抛物线):

二阶公式

二阶贝塞尔曲线

三阶贝塞尔曲线:

三阶公式

三阶贝塞尔曲线

三阶以上的贝塞尔曲线在iOS开发中使用较少,这里不再赘述。在iOS中使用UIBezierPath来实现贝塞尔曲线。
贝塞尔曲线能描述动画的轨迹,但是UIBezierPath不具有显示的功能。所以下面我们还需要了解iOS负责View显示的CALayer。


CAShapeLayer

CAShapeLayer继承自CALayer,是一个通过矢量图形( 非bitmap) 来绘制的图层类。

CALayer在被初始化时是需要给一个frame值的(一般等于view的bounds值),本身有形状的,且为矩形。
CAShapeLayer需通过CGPath 来定义想要绘制的形状,因此常与UIBezierPath配合使用。

与使用 Core Graphics 直接向 CALayer 的内容中绘制一个路径(- drawLayer: inContext:)相比,使用 CAShapeLayer 有以下优点:

  • 渲染快:CAShapeLayer 使用了硬件加速,绘制图层较快。
  • 内存消耗少: CAShapeLayer 不需要创建寄宿图形(CALayer需要),内存消耗少。
  • 不会被图层边界剪裁掉: CAShapeLayer 可以在边界之外绘制,因此图层路径不会被剪裁掉.
  • 不会出现像素化:使用CAShapeLayer 做 3D 变换时,由于无寄宿图所以不会出现像素化问题。

CAReplicatorLayer

CAReplicatorLayer可以复制自己子层的layer,并且复制的出来的layer和原来的子layer拥有相同的动效。


实践比理论更加易懂,下面就以例子来续动画的话题。

环形进度条

效果
效果

进度条的构成为进度环和底色环。


进度条构成

两个环的实现依赖于以上所讲的贝塞尔曲线和CAShapeLayer。
首先,使用贝塞尔曲线描绘底色环的路径

UIBezierPath *path=[UIBezierPath bezierPathWithArcCenter:CGPointMake(50,50) 
                                                  radius:25 
                                                  startAngle:CATDegreesToRadians(_startAngle)                              
                                                  endAngle:CATDegreesToRadians(_endAngle) 
                                                  clockwise:YES];

然后将其赋予CAShapeLayer的path属性,最后将其加入self.layer显示

    _trackLayer=[CAShapeLayer layer];
    _trackLayer.frame=self.bounds;
    _trackLayer.fillColor = [UIColor clearColor].CGColor;
    _trackLayer.strokeColor = _curveBgColor.CGColor;
    _trackLayer.lineCap = kCALineCapRound;
    _trackLayer.path=path.CGPath;
    [self.layer addSublayer:_trackLayer];

进度环的实现与底色环相近,并结合CATransaction实现动画

    [CATransaction begin];
    [CATransaction setDisableActions:!animated];
    [CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
    [CATransaction setAnimationDuration:1];
    _progressLayer.strokeEnd=progress;
    [CATransaction commit];

具体实现见工程:CATCurveProgressView


雷达图(咻一咻、波纹)

效果
效果

雷达图的实现分为三个步骤,首先利用CAShapeLayer创建脉冲层(pulseLayer,就是一个圈圈...)

  _pulseLayer = [CAShapeLayer layer];
  _pulseLayer.frame = self.layer.bounds;
  _pulseLayer.path = [UIBezierPath bezierPathWithOvalInRect:_pulseLayer.bounds].CGPath;
  _pulseLayer.fillColor = [UIColor blueColor].CGColor;

然后使用CAReplicatorLayer复制多个脉冲层

  _replicatorLayer = [CAReplicatorLayer layer];
  _replicatorLayer.frame = self.bounds;
  _replicatorLayer.instanceCount = 6;
  _replicatorLayer.instanceDelay = 1.5;
  [_replicatorLayer addSublayer:self.pulseLayer];

最后加上透明度与大小的动画,来实现雷达的效果

CABasicAnimation *scaleAnima = [CABasicAnimation animationWithKeyPath:@"transform"];
scaleAnima.fromValue = [NSValue valueWithCATransform3D:CATransform3DScale(CATransform3DIdentity, 0.0, 0.0, 0.0)];
scaleAnima.toValue = [NSValue valueWithCATransform3D:CATransform3DScale(CATransform3DIdentity, 1.0, 1.0, 0.0)];
       
_opacityAnima = [CABasicAnimation animationWithKeyPath:@"opacity"];
_opacityAnima.fromValue = @(0.3);
_opacityAnima.toValue = @(0.0);

_animaGroup = [CAAnimationGroup animation];
_animaGroup.animations = @[self.opacityAnima, scaleAnima];
_animaGroup.duration = 9;
_animaGroup.autoreverses = NO;
_animaGroup.repeatCount = HUGE;

[self.pulseLayer addAnimation:self.animaGroup forKey:@"groupAnimation"];

具体实现见工程:CATRadarView

进阶部分的首篇就先到这了,咱们下一篇见。

推荐阅读更多精彩内容