关于Loading动画一些探究

BC9A9B1A-778E-4432-A1EE-3B57276642FA.png

如何实现如图中Loading动画？
需要用到SX轴缩放、复制子层动画等动画原理
CATransform3DCATransform3DMakeTranslation (CGFloat tx, CGFloat ty, CGFloattz)

tx：X 轴偏移位置，往下为正数。

ty：Y 轴偏移位置，往右为正数。

tz：Z 轴偏移位置，往外为正数。

对于 tz 来说，值越大，那么图层就越往外（接近屏幕），值越小，图层越往里（屏幕里）。

CATransform3D CATransform3DTranslate (CATransform3D t, CGFloat tx, CGFloat ty, CGFloat tz);

t：就是上一个函数。其他的都一样。就可以理解为：函数的叠加，效果的叠加。

CATransform3D CATransform3DMakeScale(CGFloat sx, CGFloat sy, CGFloat sz);

sx：X 轴缩放，代表一个缩放比例，一般都是 0 --- 1 之间的数字。

sy：Y 轴缩放。

下面是实现的转圈动画代码

#pragma mark 转圈动画
- (void)animation {
    animationImageView.frame = CGRectMake(15,15, 10, 10);
    //imageView.backgroundColor = [UIColor colorWithRed:0.463 green:0.337 blue:0.439 alpha:1.000];
    animationImageView.backgroundColor = [UIColor whiteColor];
    /** 圆角*/
    animationImageView.layer.cornerRadius = 5;
    /** 是指视图上的子视图,如果超出父视图的部分就截取掉*/
    animationImageView.layer.masksToBounds = YES;
    /** SX轴缩放，代表一个缩放比例，一般都是 0 --- 1 之间的数字。
     SY轴缩放。
     SZ整体比例变换时，也就是m11（sx）== m22（sy）时，若m33（sz）>1，图形整体缩小，若0<1，图形整体放大，若m33（sz）<0，发生关于原点的对称等比变换。*/
    animationImageView.layer.transform = CATransform3DMakeScale(0.01, 0.01, 0.01);
    
    CGFloat count = 14.0;
    /** 复制子层动画延迟时长*/
    replicatorLayer.instanceDelay =1.0 / count;
    /** 子层总数(包括原生子层)*/
    replicatorLayer.instanceCount = count;
    /** 复制子层形变(不包括原生子层)，每个复制子层都是相对上一个*/
    replicatorLayer.instanceTransform = CATransform3DMakeRotation((M_PI * 2) / count, 0, 0, 1.0);
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    /** 持续时间*/
    animation.duration = 1;
    animation.repeatCount = MAXFLOAT;
    //    animation.autoreverses = YES;
    //从原大小变小时,动画 回到原状时不要动画
    animation.fromValue = @(1);
    animation.toValue = @(0.01);
    [animationImageView.layer addAnimation:animation forKey:nil];
}

可以通过 X，Y，Z 轴同时变化，来旋转图像。

CATransform3D CATransform3DRotate (CATransform3D t, CGFloat angle,CGFloat x, CGFloat y, CGFloat z);

t：就是上一个函数。其他的都一样。就可以理解为：函数的叠加，效果的叠加。

CATransform3D CATransform3DInvert (CATransform3D t);翻转效果。

二、完成上面只做到了第一步，如何复制多个转圈的圆呢

这里需要用到CAReplicatorLayer；
可以复制子层的layer,设置重心然后重用

/** 设置转圈的进度 **/
- (void)setupCircleProgress {
    /** CAReplicatorLayer可以复制自己子层的layer,并且复制的出来的layer和原来的子layer拥有相同的动效*/
    // 可以理解成为一个复制的货吧
    replicatorLayer = [CAReplicatorLayer layer];
    
    replicatorLayer.bounds = CGRectMake(0, 0, 10, 10);
    
    /** 视图相对于父视图的重心位置*/
    replicatorLayer.position = CGPointMake(progressView.frame.size.width/2,progressView.frame.size.height/2);
    
    /** 是否开启三维空间效果*/
    replicatorLayer.preservesDepth = YES;
    replicatorLayer.hidden = YES;
    
    [replicatorLayer addSublayer:animationImageView.layer];
    [progressView.layer addSublayer:replicatorLayer];
}

最后需要你调整合适的Frame 把Layer层添加到你需要的View上就可以实现了