美文网首页
动画学习篇(一)

动画学习篇(一)

作者: 我叫王可可 | 来源:发表于2017-09-13 20:57 被阅读0次

    动画学习

    一、基础知识

    层次图

    CAAnimation是所有动画类的父类,它是一个抽象类,不能够直接使用应该使用它的子类

    动画类

    类的说明

    1. 能用的动画类只有 4 个子类
    • CABasicAnimation

    • CAKeyframeAnimation

    • CATransition

    • CAAnimationGroup

       ①CABasicAnimation
       通过设定起始点,终点,时间,动画会沿着你这设定点进行移动。可以看做特殊的CAKeyFrameAnimation
       ②CAKeyframeAnimation
       Keyframe顾名思义就是关键点的frame,你可以通过设定CALayer的始点、中间关键点、终点的frame,时间,动画会沿你设定的轨迹进行移动
       ③CAAnimationGroup
        Group也就是组合的意思,就是把对这个Layer的所有动画都组合起来。
       ④CATransition
       这个就是苹果帮开发者封装好的一些动画
      

    二、CABasicAnimation

    • 常见属性:

        duration: 动画持续时间
        repeatCount: 动画重复次数
        repeatDuration: 设置动画的时间,在该段时间内动画一直执行,不记次数
        timingFunction: 动画的变化速度
        fillMode: 动画在开始和结束时的动作,默认只是kCAFillModeRemoved
        beginTime: 设置动画开始执行时间
        autoreverses: 动画结束时是否执行逆动画
        fromValue: 所改变属性的起始值
        toValue: 所改变属性的起始值
      

    一些常用的aniamtionWithKeyPath的值

    说明 使用形式
    transform.translation 平移变换 @(100)
    transform.translation.x 沿x轴平移 @(100)
    transform.translation.y 沿y轴平移 @(100)
    transform.scale 比例转化 @(0.8)
    transform.scale.x 宽的比例 @(0.8)
    transform.scale.y 高的比例 @(0.8)
    transform.rotation.x 围绕x轴旋转 @(M_PI)
    transform.rotation.y 围绕y轴旋转 @(M_PI)
    transform.rotation.z 围绕z轴旋转 @(M_PI)
    position 位置改变 [NSValue valueWithCGPoint(100,100)]
    opacity 透明度 @(0.7)
    backgroundColor 背景颜色的变化 [UIColor redColor].CGColor
    bounds 大小的变化,中心点不变 [NSValue valueWithCGSize:CGSizeMake(50, 50)]
    contents 内容变化,比如UIImageView的图片 [UIImage imageNamed:@"123.png"].CGImage

    下面实现一个简单的位移动画

    CABasicAnimation *positionAniamtion = [CABasicAnimation animationWithKeyPath:@"transform.translation.x"];//沿x轴位移
    positionAniamtion.fromValue = @100;
    positionAniamtion.toValue = @150;
    positionAniamtion.duration = 2.0;
    positionAniamtion.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    //动画完成后不删除
    positionAniamtion.removedOnCompletion = NO;
    //保持最新的状态
    positionAniamtion.fillMode = kCAFillModeForwards;
    [self.myView.layer addAnimation:positionAniamtion forKey:@"positionAniamtion"];
    

    三、CAKeyframeAnimation

    CAKeyframeAnimation是核心动画里面的帧动画,它提供了按照指定的一串值进行动画,好像拍电影一样的一帧一帧的效果
    1、属性说明

    values: 许多值组成的的数组用来进行动画的,只有在path属性值为nil的时候才有作用
    path:  路径,可以指定一个路径,让动画沿着这个指定的路径执行
    keyTimes:设置关键帧对应的时间点,范围:0-1。如果没有设置该属性,则每一帧的时间平分。
    cacluationMode:  计算模式,主要针对的是每一帧的内容为一个坐标点的情况
    rotationMode:  旋转样式
    

    附上代码:

    CAKeyframeAnimation *ani = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddEllipseInRect(path, NULL, CGRectMake(130, 200, 100, 100));
    ani.path = path;
    CGPathRelease(path);
    ani.duration = 2.0;
    ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    ani.repeatCount = MAXFLOAT;
    ani.removedOnCompletion = NO;
    ani.fillMode = kCAFillModeForwards;
    [self.myView.layer addAnimation:ani forKey:nil];
    

    四、CATransition

    主要用于转场动画从一个场景以动画的形式过渡到另一个场景

    1、属性说明

    • type: 转场动画的类型,一个自定义的转场动画中指定的过滤器属性

       type的enum值:
       kCATransitionFade    渐变
       kCATransitonMoveIn   覆盖
       kCATransitionPush    推出
       kCATransitionReveal  揭开
      

    还有一些私有动画属性,不推荐使用,私有动画类型的值有cube、suckEffect、oglFlip、rippleEffect、pageCurl、pageUnCurl等等

    附上代码:

    CATransition *ani = [CATransition animation];
    ani.type = kCATransitionFade;//过渡动画的类型
    ani.subtype = kCATransitionFromTop;//过渡动画的方向
    ani.duration = 1.5;
    ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    ani.repeatCount = MAXFLOAT;
    ani.removedOnCompletion = NO;
    ani.fillMode = kCAFillModeForwards;
    self.myView.backgroundColor = [UIColor redColor];
    [self.myView.layer addAnimation:ani forKey:nil];
    
    • subtype: 转场动画将要去往的方向

      subtype的enum值:
      kCATransitionFromRight   从右边
      kCATransitionFromLeft    从左边
      kCATransitionFromTop     从顶部
      kCATransitionFromBottom  从底部
      
    • startProgress: 开始的位置进度

    • endPrograss: 结束的位置进度

    系统API 效果 是否支持方向
    KCATransitionFade 淡出效果
    KCATransitionMoveIn 淡出效果
    KCATransitionPush 新视图移动到旧视图上
    KCATransitionFade 新视图退出旧视图
    KCATransitionReveal 移开旧视图显示新视图
    cube 淡出效果
    suckEffect 撕日历的效果
    oglFlip 翻转180°效果
    rippleEffect 涟漪效果
    pageCurl 向外翻书效果
    pageUnCurl 向内翻书效果
    Transform3D的一些方法

    1.偏移量的设置

    CATransform3DMakeTranslation(x,y,z)
    

    2.缩放的设置

    CATransform3DMakeScale(x,y,z)
    

    3.旋转设置

    CATransform3DMakeRotation(angle,x,y,z)
    

    4.叠加设置

    CATransform3DMakeRotate(transform3D,angle,x,y,z)
    

    transfrom3D 经过变换之后的 上述几个返回的都是transfrom3D类型的

    相关文章

      网友评论

          本文标题:动画学习篇(一)

          本文链接:https://www.haomeiwen.com/subject/ftgfsxtx.html