• iOS开发核心动画之动画


    一. 核心动画简述

    1. Core Animation是直接作用在CALayer上的,并非UIView,因此核心动画的本质是修改图层的某个属性

    2. 核心动画继承结构

    3. transform的相关属性


    二. 核心动画

    基础动画 : CABaseicAnimation

      帧动画 : CAKeyframeAnimation

      组动画 : CAAnimationGroup

    转场动画 : CATransition


    1. 基础动画(CABaseicAnimation)

    1> 创建动画

    1. CABasicAnimation *anim = [CABasicAnimation animation];

    2> 更改属性

    1. anim.keyPath = @"transform.scale";
    2. anim.toValue = @0.5;

    3> 动画相关属性

    1. // 告诉动画完成的时候不要移除
    2. anim.removedOnCompletion = NO;
    3. // 保存动画最前面的效果.
    4. anim.fillMode = kCAFillModeForwards;

    4> 将动画添加到图层上

    1. [_redView.layer addAnimation:anim forKey:nil];


    5> 动画执行次数

    1. anim.repeatCount = MAXFLOAT;

    6> 设置动画反转(怎么去怎么回)

    1. anim.autoreverses = YES;

    7> 动画执行时长

    1. anim.duration = 0.25;

    2. 帧动画(CAKeyframeAnimation)

    1> 创建帧动画

    1. CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];

    2> 设置动画属性(如旋转)

    1. 设置动画属性为旋转
    2. anim.keyPath = @"transform.rotation";
    3. 设置属性值为多个属性
    4. anim.values = @[@(angle2radio(-5)),@(angle2radio(5)),@(angle2radio(-5))];

    3> 设置动画次数

    1. 设置动画执行次数
    2. anim.repeatCount = MAXFLOAT;

    4> 添加动画

    1. [_imageView.layer addAnimation:anim forKey:nil];

    帧动画可以设置根据路径做移动

    创建路径

    1. 创建路径
    2. UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 50, 100, 100)];
    3. [path addLineToPoint:CGPointMake(200, 500)];

    把路径设置为动画的属性

    1. anim.path = path.CGPath;

    3. 组动画 (CAAnimationGroup)

    多组动画中有相同的属性,可以将这些动画加入到动画中,统一设置相关属性

    1. // 组动画
    2. - (void)groupAnimation
    3. {
    4.    // 组动画
    5.    CABasicAnimation *anim1 = [CABasicAnimation animation];
    6.    anim1.keyPath = @"position.y";
    7.    anim1.toValue = @500;
    8.    
    9.    CABasicAnimation *anim2 = [CABasicAnimation animation];
    10.    anim2.keyPath = @"transform.scale";
    11.    anim2.toValue = @0.5;
    12.    
    13.    CAAnimationGroup *group = [CAAnimationGroup animation];
    14.    group.animations = @[anim1, anim2];
    15.    group.removedOnCompletion = NO;
    16.    group.fillMode = kCAFillModeForwards;
    17.    
    18.    [self.testView.layer addAnimation:group forKey:nil];
    19. }

    4. 转场动画 (CATransition)

    1> 创建转场动画

    1. CATransition *anim = [CATransition animation];

    2> 设置转场类型

    1. anim.type = @"cube";
    2. anim.duration = 1; // 持续时间

    3> 设置转场的方向

    1. anim.subtype = kCATransitionFromLeft;

    4> 设置动画的开始位置

    1. anim.startProgress = 0.5;

    5> 设置动画的结束位置

    1. anim.endProgress  =0.8;

    6> 添加动画

    1. [_imageV.layer addAnimation:anim forKey:nil];

    要执行动画的代码称为转场代码.

    转场动画要和转场代码写在同一个方法当中才有动画效果.


    5. UIView进行转场动画

    1. [UIView transitionWithView:self.imageV duration:1 options:UIViewAnimationOptionTransitionFlipFromRight animations:^{
    2.    转场代码
    3. } completion:^(BOOL finished) {
    4.    动画执行完毕时调用.
    5. }];

    使用UIView转场的类型比较少.


    6. 转场动画的过度效果

    类型字符串

     效果说明
    关键字 方向 

    fade

    交叉淡化过渡

    Yes

    push

    新视图把旧视图推出去 

    Yes

    moveIn

    新视图移到旧视图上面

    Yes

    reveal

    将旧视图移开,显示下面的新视图

    Yes

    cube

    立方体翻滚效果 



    oglFlip

    上下左右翻转效果



    suckEffect

    收缩效果,如一块布被抽走

    No NO

    rippleEffect

     水滴效果No NO
     pageCurl  向上翻页效果

    pageUnCurl

     向下翻页效果

    cameraIrisHollowOpen 相机镜头打开效果No NO
    cameraIrisHollowClose

    相机镜头关闭效果 


     NO


  • 相关阅读:
    @Autowired和@Resource的区别是什么?
    关于事务,事务的特性,spring事务的传播特性
    Java 用Freemarker完美导出word文档(带图片)
    关于 MySQL查询当天、本周,本月,上一个月的数据
    js如何使用radio
    Freemarker提供了3种加载模板目录的方法
    190707Python-MySQL
    190707Python-RabbitMQ
    190707select和selector模块
    4、kubernetes资源清单快速入门190625
  • 原文地址:https://www.cnblogs.com/Xfsrn/p/5000355.html
Copyright © 2020-2023  润新知