动画学习 iOS

狂风中的少年 提交于 2020-01-19 10:21:00

CABasicAnimation——基本动画

 CABasicAnimation *moveAnimation = [CABasicAnimation animationWithKeyPath:@"position.y"];
    moveAnimation.duration = 0.8;//动画时间
    //动画起始值和终止值的设置
    moveAnimation.fromValue = @(imageView.center.x);
    moveAnimation.toValue = @(imageView.center.x-30);
    //一个时间函数,表示它以怎么样的时间运行
    moveAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    //按次数看什么时候结束
    moveAnimation.repeatCount = 5;
    //按时间看什么时候结束
    moveAnimation.repeatDuration = 2;
    moveAnimation.removedOnCompletion = YES;
    moveAnimation.fillMode = kCAFillModeForwards;
    //添加动画,后面有可以拿到这个动画的标识
    [imageView.layer addAnimation:moveAnimation forKey:@"可以拿到这个动画的Key值"];
    [self.view addSubview:imageView];

相关属性

keyPath :要改变的属性名称(传字符串)
fromValue:keyPath相应属性的初始值
toValue:keyPath相应属性的结束值
timingFunction:动画随时间运行的关系
在这里插入图片描述

timingFunction函数:

这部分的原文链接
指定定时函数,该定时函数定义动画对象随时间的速度。它描述了动画将如何在其持续时间的一个周期内进行,从而允许动画在其过程中改变速度。

ease 默认。动画以低速开始,然后加快,在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
linear 动画从头到尾的速度是相同的。

结束后图片的位置:

如果fillMode=kCAFillModeForwards同时removedOnComletion=NO,那么在动画执行完毕后,图层会保持显示动画执行后的状态。

它的协议: CAAnimationDelegate

  • animationDidStart: //开始时调用’
  • animationDidStop:finished: //结束时调用

CAKeyframeAnimation——关键帧动画

CAKeyframeAnimation *animaiton = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];
    NSArray *rotationVelues = @[@(M_PI_4), @(-M_PI_4), @(M_PI_4)];
    animaiton.values = rotationVelues;
    animaiton.rotationMode = kCAAnimationRotateAuto;  //方向
    animaiton.duration = 3.0f;
    animaiton.keyTimes = @[@0.2 ,@0.8 ,@1];
//    animaiton.path = bezierPath.CGPath;
    animaiton.repeatCount = HUGE_VALF;     //   #define    HUGE_VALF    1e50f
    [imageView.layer addAnimation:animaiton forKey:nil];

属性说明
values:上述的NSArray对象。里面的元素称为“关键帧”(keyframe)。动画对象会在指定的时间(duration)内,依次显示values数组中的每一个关键帧
path:可以设置一个CGPathRef、CGMutablePathRef,让图层按照路径轨迹移动。path只对CALayer的anchorPoint和position起作用。如果设置了path,那么values将被忽略
keyTimes:可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keyTimes中的每一个时间值都对应values中的每一帧。如果没有设置keyTimes,各个关键帧的时间是平分的
bezierPath:贝赛尔曲线路径,为动画提供一个动画移动的路线。

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!