zoukankan      html  css  js  c++  java
  • 核心动画中的动画组和转场动画

    动画组 CAAnimationGroup


    上篇博客http://blog.csdn.net/cocoarannie/article/details/10413301介绍了核心动画中的基本动画(CABasicAnimation)和关键帧动画(CAKeyframeAnimation),还有一个比较常用的就是动画组(CAAnimationGroup)

    所谓的动画组就是将一些动画组合起来给layer使其的动画更丰富灵活。
    它很简单,就是为其animations属性赋值一个动画数组。

    - (void)demoAnimationGroup
    {
        static NSString * const kCAPostionKeyPath = @"position";
        static NSString * const kCAOpacityKeyPath = @"opacity";
        static NSString * const kCARotationKeyPath = @"transform.rotation";
        static NSString * const kCAScaleKeyPath = @"transform.scale";
        
        UIBezierPath *path = [UIBezierPath bezierPath];
        [path moveToPoint:_demoView.layer.position];
        [path addCurveToPoint:CGPointMake(260, 400) controlPoint1:CGPointMake(0, 460) controlPoint2:CGPointMake(320, 0)];
        
        //路径动画
        CAKeyframeAnimation *posAnimation = [CAKeyframeAnimation animationWithKeyPath:kCAPostionKeyPath];
        posAnimation.path = path.CGPath;
        posAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
        
        //透明度动画
        CABasicAnimation *opaAnimation = [CABasicAnimation animationWithKeyPath:kCAOpacityKeyPath];
        opaAnimation.duration = 2.0f;
        opaAnimation.toValue = @(0.3f);
        opaAnimation.autoreverses = YES;
        
        //旋转动画
        CABasicAnimation *rotAnimation = [CABasicAnimation animationWithKeyPath:kCARotationKeyPath];
        rotAnimation.duration = 2.0f;
        rotAnimation.toValue = @(M_PI);
        rotAnimation.autoreverses = YES;
        
        //缩放动画
        CABasicAnimation *scaAnmaiton = [CABasicAnimation animationWithKeyPath:kCAScaleKeyPath];
        scaAnmaiton.duration = 2.0f;
        scaAnmaiton.toValue = @(1.5f);
        scaAnmaiton.autoreverses = YES;
        
        //设置动画组
        CAAnimationGroup *group = [CAAnimationGroup animation];
        group.animations = @[posAnimation, opaAnimation, rotAnimation, scaAnmaiton];
        group.duration = 4.0f;
        group.removedOnCompletion = NO;
        group.fillMode = kCAFillModeForwards;
        
        [_demoView.layer addAnimation:group forKey:nil];
    }

    这个动画组对demoView的layer加入了一些同时进行的动画,比如双控制点的贝塞尔路径,透明度的渐隐渐明,旋转以及缩放等。


    CATransition


    转场动画几乎在所有的APP上都能遇见,经常用于视图控制器的切换或者单视图控制器的页面切换等,也可以在自定义UIStoryboardSegue中来加入动画效果。

    它也是CAAnimation的子类,能为图层提供移出屏幕和移入的动画效果。
    其常用属性为

    type 过渡类型
    subtype 过渡类型的子类型,方向设置

    其中过渡类型有很多,最初有四个版本,后来又加入了一些,以字符串形式设置。

    最初的四个:fade,push,moveIn,reveal
    以后加入的效果则更加丰富和炫目,有 cube, oglFlip, suckEffect, rippleEffect, pageCurl, pageUnCurl, cameraIrisHollowOpen, cameraIrisHollowClose。

    - (void)viewTransition
    {
        static NSString * const kCATransitionTypeFlip = @"oglFlip";     //翻页效果
        
        CATransition *transition = [CATransition animation];
        transition.type = kCATransitionTypeFlip;
        transition.subtype = kCATransitionFromRight;
        transition.duration = 1.5f;
        [_transitionOrangeView.layer addAnimation:transition forKey:nil];
        
        [self.view performSelector:@selector(sendSubviewToBack:) withObject:_transitionOrangeView afterDelay:1.0f];
    }

    这个方法简单的实现了view翻页的效果,当然目前控制器的根view只有一个subview,所以使用sendSubviewToBack的方法后显示的还是这个view,但是看到了动画效果。

    现在UIView的转场动画有了更方便的类方法
    + transitionWithView:duration:options:animations:completion:
    + transitonFromView:toView:duration:options:completion:

    这两个方法参数加入了苹果推荐的块代码,也让转场动画都在一个方法中进行处理,也对动画结束进行了处理,更加方便易用。

    - (void)anotherTransition
    {
        _transitionBlueView = [[UIView alloc] initWithFrame:self.view.bounds];
        _transitionBlueView.backgroundColor = [UIColor blueColor];
        
        [UIView transitionFromView:_transitionOrangeView
                            toView:_transitionBlueView
                          duration:1.0f
                           options:UIViewAnimationOptionTransitionCrossDissolve   
                        completion:nil];
    }

    代码很简洁和易读。
    不过要注意的一点是,这里的参数并不是很多,而且我并没有对蓝色视图通过addSubview加载到self.view中,也没有对橘色视图进行removeFromSuperview,这些方法都封装在这个类方法中隐式进行了。


    Demo示例点击打开链接




    以上为本篇博客全部内容,欢迎指正和交流。转载请注明出处~
  • 相关阅读:
    C#--web中上传图片与浏览
    win通过ssh访问virtualbox虚拟中的debian
    【转】win10中下载安装mysql5.7
    [转发]centos7利用crontab定时检测杀死cpu使用率超过80%的进程
    MySQL 重要参数 innodb_flush_log_at_trx_commit 和 sync_binlog
    查询正在执行的sql语句
    php图片等比例缩放
    excel 导入 sqlserver 字符串被截取为255长度解决方案
    查询阻塞的sql
    centos7安装mariadb10遇到的问题解决
  • 原文地址:https://www.cnblogs.com/suncoolcat/p/3292135.html
Copyright © 2011-2022 走看看