简单的转菊花

1.初始化CAReplicatorLayer对象

  • 初始化复制层,设置位置,尺寸,颜色大小

    //1.初始化复制层
    CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];
    replicatorLayer.bounds = CGRectMake(0, 0, 200, 200);
    replicatorLayer.backgroundColor = [UIColor grayColor].CGColor;
    [self.view.layer addSublayer:replicatorLayer];
    
  • 创建原生图层,设置基本单位图层的大小,尺寸,颜色等

        //初始化原生子层
    CALayer *layer = [CALayer layer];
    layer.bounds = CGRectMake(0, 0, 10, 10);
    layer.cornerRadius = 5;
    layer.position = CGPointMake(100, 20);
    layer.backgroundColor = [UIColor blackColor].CGColor;
    [replicatorLayer addSublayer:layer];
    
Snip20160312_13.png
  • 给原生层添加动画

        //给原生子层添加动画
            CABasicAnimation *basic = [CABasicAnimation animation];
            basic.keyPath = @"transform.scale";
            basic.repeatCount = MAXFLOAT;//设置重复次数
            basic.autoreverses = YES;//设置动画的反弹效果
            basic.fromValue = @1;
            basic.toValue = @0.1;
            //动画时长
            CGFloat duration = 1;
            basic.duration = duration;
            [layer addAnimation:basic forKey:nil];
    
  • 设置复制层的子层数量,子层的形变位置等

        //子层数
            float count = 30;
            replicatorLayer.instanceCount = count;
            //一个单位图层动画时长为1 ,(从大到小,从小到大,2个阶段) ,延迟子层的延迟时间 = 动画总时长 / 总个数 * 2个阶段
            replicatorLayer.instanceDelay = duration / count * 2;
            replicatorLayer.instanceTransform = CATransform3DRotate(layer.transform, 2 * M_PI / count, 0, 0, 1);
    
Snip20160312_14.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 12,720评论 6 30
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 10,532评论 5 13
  • Core Animation Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,...
    45b645c5912e阅读 8,179评论 0 21
  • >复杂的组织都是专门化的 >Catharine R. Stimpson 到目前为止,我们已经探讨过`CALayer...
    夜空下最亮的亮点阅读 4,765评论 0 2
  • 图片折叠效果 1.如何制作图片折叠效果? `把一张图片分成两部分显示,上面一部分,下面一部分,折叠上面部分的内容。...
    Hevin_Chen阅读 3,434评论 0 1