关于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上就可以实现了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335

推荐阅读更多精彩内容

  • 图层的几个坐标系 对于iOS来说,坐标系的(0,0)点在左上角,就是越往下,Y值越大。越往右,X值越大。 一个图层...
    LeeMystique阅读 16,664评论 1 53
  • 关于图层的几个坐标系。对于ios来说,坐标系的(0,0)点在左上角,就是越往下,Y值越大。越往右,X值越大。一个图...
    petry阅读 1,886评论 0 3
  • 本人处于学习写的这篇文章,有不足之处望多多指教。我是看了这了这篇文章,(相信大家恨到很多类似的版本的)然后再加自己...
    seanward阅读 2,001评论 0 5
  • 仿射变换 AffineTransform,在iOS中他的实现类是CGAffineTransform和CATrans...
    UILabelkell阅读 3,721评论 1 8
  • 原本以为没有交集就可以永远忘记,可是我却无法将你从我的脑海中淡化。 你可知道,原本枯燥乏味的英语课因为你的存在而变...
    貂蝉有点美阅读 303评论 2 0