核心动画实现书本翻页效果加载动画

经常看到一些很好的动画加载视图,闲来无事就写了一个书本翻页样式的动画加载视图,核心技术是CALayer+CoreAnimation。项目源码地址:https://github.com/China131/JHLodingView.git 如果有所帮助,记得star哦?

正题如下:

创建一个单独的layer:

   /*        使用类方法创建CAlayer对象         */

      CALayer *  layer = [CALayer layer];

        

        /*        CATransform实际上是一个结构体 因此不能直接对内部元素直接赋值         */

        CATransform3D transform = layer.transform;

        

        /*        设置layer的立体效果值 m34为该值 渲染立体效果         */

        transform.m34 = 10.5/-2000;

        

        layer.transform = transform;

        

        /*        设置layer的背景颜色,注意是CGColor类型         */

        layer.backgroundColor = [k_COLOR_STOCK[_currentIndex%k_COLOR_STOCK.count] CGColor];

        

        /*        设置锚点,锚点即动画的中心点,默认为(二维环境)(0.5.0.5),分别表示X轴中点 Y轴中点         */

        layer.anchorPoint = CGPointMake(0, 0.5);

        

        layer.frame = CGRectMake(200, 100, 30, 45);

        

        /*        设置layer的中心点,相当于UIView对象的center熟悉         */

        layer.position = CGPointMake(K_IOS_WIDTH/2, K_IOS_HEIGHT/2-50);

        

        [self.layer addSublayer:layer];

创建翻页动画

  /*        创建翻页动画         */

    CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];

    

    /*        transform.rotation.y的动画开始值         */

    basic.fromValue  = @(-M_PI );

    

    /*        transform.rotation.y的动画结束值         */

    basic.toValue = @(0);

    

    /*        是否在动画结束后自动按照反向动画回归原状态         */

    basic.autoreverses = NO;

    

    /*        动画执行次数         */

    basic.repeatCount = 1;

    

    /*        动画时长         */

    basic.duration = 1.0;

    

    /*        动画填充模式         */

    basic.fillMode = kCAFillModeRemoved;

    /*        设置代理         */

    basic.delegate = self;

    [layer addAnimation:basic forKey:@"basc"];

 当按照上方法循环添加多个layer动画时,并间隔0.2s执行,就会有从左到右的翻页动画效果。如果想要更加完美,可以将这些layer添加到数组,在从左到右的动画完成后,给数组中的layer添加一个反向动画,即可实现来回的翻页动画。效果图如下:

                                     

 

转载于:https://www.cnblogs.com/ToBeTheOne/p/5636591.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值