关于Loading动画一些探究

关于Loading动画一些探究_第1张图片
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上就可以实现了

你可能感兴趣的:(关于Loading动画一些探究)