如何实现如图中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上就可以实现了