美文网首页
layer动画属性总结

layer动画属性总结

作者: 温水煮青蛙a | 来源:发表于2018-01-03 18:07 被阅读0次

当你给一个 CALayer 添加动画的时候,动画其实并没有改变这个 layer 的实际属性。取而代之的,系统会创建一个原始 layer 的拷贝。在文档中,苹果称这个原始 layer 为 Model Layer ,而这个复制的 layer 则被称为 Presentation Layer 。 Presentation Layer 的属性会随着动画的进度实时改变,而 Model Layer 中对应的属性则并不会改变。这里就可以引出 removedOnCompletionfillMode 了。

removedOnCompletion 的官方解释是:

/* When true, the animation is removed from the render tree once its
 * active duration has passed. Defaults to YES. */
/ *当为真时,动画从渲染树中删除一次
*活动时间已经过去。默认值为YES。* /

也就是默认情况下系统会在 duration 时间后自动移除这个 CAKeyframeAnimation。当 remove 了某个动画,那么系统就会自动销毁这个 layer 的 Presentation Layer ,只留下 Model Layer 。 而前面提到 Model Layer 的属性其实并没有变化,所以也就有了你前面看到的结果,视图在一瞬间回到了动画的初始状态。要解决这种情况,你需要先把removedOnCompletion 设置为 no ,然后设置fillMode 为kCAFillModeForwards 。关于 fillMode ,它有四个值:
kCAFillModeRemoved 这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态。
kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态。
kCAFillModeBackwards 这个和 kCAFillModeForwards 是相对的,就是在动画开始前,你只要将动画加入了一个layer,layer便立即进入动画的初始状态并等待动画开始。你可以这样设定测试代码,将一个动画加入一个layer的时候延迟5秒执行。然后就会发现在动画没有开始的时候,只要动画被加入了 layer , layer 便处于动画初始状态, 动画结束后,layer 也会恢复到之前的状态。
kCAFillModeBoth 理解了上面两个,这个就很好理解了,这个其实就是上面两个的合成。动画加入后立即开始,layer便处于动画初始状态,动画结束后layer保持动画最后的状态。
calculationMode 设置是否匀速线性运动
默认是kCAAnimationLinear线性运动走直角
const kCAAnimationLinear//线性,默认
2 const kCAAnimationDiscrete//离散,无中间过程,但keyTimes设置的时间依旧生效,物体跳跃地出现在各个关键帧上
3 const kCAAnimationPaced//平均,keyTimes跟timeFunctions失效
4 const kCAAnimationCubic//平均,同上
5 const kCAAnimationCubicPaced//平均,同上

属性理解

duration 动画的时长
repeatCount 重复的次数。不停重复设置为 HUGE_VALF
repeatDuration 设置动画的时间。在该时间内动画一直执行,不计次数。
beginTime 指定动画开始的时间。从开始延迟几秒的话,设置为【CACurrentMediaTime() + 秒数】 的方式
timingFunction 设置动画的速度变化
autoreverses 动画结束时是否执行逆动画
fromValue 所改变属性的起始值
toValue 所改变属性的结束时的值
byValue 所改变属性相同起始值的改变量

UIView *aView0 = [[UIView alloc] initWithFrame:CGRectMake(150, 100, 50, 50)];
    [self.view addSubview:aView0];
    aView0.backgroundColor = [UIColor purpleColor];
    
    //旋转动画
    //transform.rotation 默认围绕z轴
    CAKeyframeAnimation *animation11 = [CAKeyframeAnimation animation];
    animation11.keyPath = @"transform.rotation.z";
    animation11.values = @[@0, @(M_PI*2)];
    animation11.duration = 5;
    animation11.repeatCount = MAXFLOAT;
    animation11.calculationMode = kCAAnimationCubic;
    animation11.removedOnCompletion = NO;
    animation11.fillMode = kCAFillModeForwards;
    [aView0.layer addAnimation:animation11 forKey:nil];

    //缩放动画
    CAKeyframeAnimation *animation11 = [CAKeyframeAnimation animation];
    animation11.keyPath = @"transform.scale";
    animation11.values = @[@1.0,@1.2,@0.9,@1.15,@0.95,@1.05,@1.0];
    animation11.duration = 5;
    animation11.repeatCount = MAXFLOAT;
    animation11.calculationMode = kCAAnimationCubic;
    [aView0.layer addAnimation:animation11 forKey:nil];

    //位移动画 设置偏移距离
    CAKeyframeAnimation *animation11 = [CAKeyframeAnimation animation];
    animation11.keyPath = @"transform.translation.x";
    animation11.values = @[@1, @-100.0,@110];
    animation11.duration = 5;
    animation11.repeatCount = 1;
    animation11.calculationMode = kCAAnimationCubic;
    animation11.removedOnCompletion = NO;
    animation11.fillMode = kCAFillModeForwards;
    [aView0.layer addAnimation:animation11 forKey:nil];

// 位移动画   设置 运动坐标点
    CAKeyframeAnimation *animation11 = [CAKeyframeAnimation animation];
    animation11.keyPath = @"transform.translation";
    animation11.values = @[@(CGPointMake(0, 0)),@(CGPointMake(100, 200)), @(CGPointMake(50, 200))];
    animation11.duration = 1;
    animation11.repeatCount = 1;
    animation11.calculationMode = kCAAnimationLinear;//这里是线性 如果转弯的话不会飘;

    /*
     const kCAAnimationLinear//线性,默认
     2 const kCAAnimationDiscrete//离散,无中间过程,但keyTimes设置的时间依旧生效,物体跳跃地出现在各个关键帧上
     3 const kCAAnimationPaced//平均,keyTimes跟timeFunctions失效
     4 const kCAAnimationCubic//平均,同上
     5 const kCAAnimationCubicPaced//平均,同上
     */
    animation11.autoreverses = NO;
    animation11.removedOnCompletion = NO;
    animation11.fillMode = kCAFillModeForwards;
    [aView0.layer addAnimation:animation11 forKey:nil];

    //设置 透明度
    CAKeyframeAnimation *animation11 = [CAKeyframeAnimation animation];
    animation11.keyPath = @"opacity";
    animation11.values = @[@1.0, @0.7, @0.4, @0.8, @0.1, @0.5, @0.2];
    animation11.duration = 2;
    animation11.repeatCount = 1;
    animation11.calculationMode = kCAAnimationCubic;
    animation11.autoreverses = NO;
    animation11.removedOnCompletion = NO;
    animation11.fillMode = kCAFillModeForwards;
    [aView0.layer addAnimation:animation11 forKey:nil];

    //圆角
    CAKeyframeAnimation *animation11 = [CAKeyframeAnimation animation];
    animation11.keyPath = @"cornerRadius";
    animation11.values = @[@0, @20, @25, @25, @0, @25];
    animation11.duration = 2;
    animation11.repeatCount = 1;
    animation11.calculationMode = kCAAnimationCubic;
    animation11.autoreverses = NO;
    animation11.removedOnCompletion = NO;
    animation11.fillMode = kCAFillModeForwards;
    [aView0.layer addAnimation:animation11 forKey:nil];


    //边框宽度
    CAKeyframeAnimation *animation11 = [CAKeyframeAnimation animation];
    animation11.keyPath = @"borderWidth";
    animation11.values = @[@0, @20, @10, @0, @10];
    animation11.duration = 2;
    animation11.repeatCount = 1;
    animation11.calculationMode = kCAAnimationCubic;
    animation11.autoreverses = NO;
    animation11.removedOnCompletion = NO;
    animation11.fillMode = kCAFillModeForwards;
    aView0.layer.borderColor = [UIColor redColor].CGColor;
    [aView0.layer addAnimation:animation11 forKey:nil];
    
    
    //bounds大小
    CAKeyframeAnimation *animation11 = [CAKeyframeAnimation animation];
    animation11.keyPath = @"bounds";
    animation11.values = @[@(CGRectMake(0, 0, 50, 50)), @(CGRectMake(0, 0, 100, 120)), @(CGRectMake(0, 0, 70, 50))];
    animation11.duration = 2;
    animation11.repeatCount = 1;
    animation11.calculationMode = kCAAnimationCubic;
    animation11.autoreverses = NO;
    animation11.removedOnCompletion = NO;
    animation11.fillMode = kCAFillModeForwards;
    [aView0.layer addAnimation:animation11 forKey:nil];
    
    //位移动画  设置点
    CAKeyframeAnimation *animation11 = [CAKeyframeAnimation animation];
    animation11.keyPath = @"position";
    animation11.values = @[[NSValue valueWithCGPoint:CGPointMake(150, 100)],[NSValue valueWithCGPoint:CGPointMake(300, 300)],[NSValue valueWithCGPoint:CGPointMake(300, 200)]];
    animation11.duration = 2;
    animation11.repeatCount = 1;
    animation11.calculationMode = kCAAnimationLinear;//这里是线性 如果转弯的话不会飘
    animation11.autoreverses = NO;
    animation11.removedOnCompletion = NO;
    animation11.fillMode = kCAFillModeForwards;
    [aView0.layer addAnimation:animation11 forKey:nil];
//组合动画
//位置在y周平移
CABasicAnimation *positionAnima = [CABasicAnimation animationWithKeyPath:@"position.y"];
    positionAnima.fromValue = @(bgImageView.center.y);
    positionAnima.toValue = @(bgImageView.center.y-30);
    positionAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    //相对y周旋转
    CABasicAnimation *transformAnima = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
    transformAnima.fromValue = @(0);
    transformAnima.toValue = @(M_PI);
    transformAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    //组合动画类
    CAAnimationGroup *animaGroup = [CAAnimationGroup animation];
    animaGroup.duration = 2.0f;
    animaGroup.fillMode = kCAFillModeForwards;
    animaGroup.removedOnCompletion = NO;
    animaGroup.autoreverses = YES;
    animaGroup.repeatCount = CGFLOAT_MAX;
//添加组合动画
    animaGroup.animations = @[positionAnima,transformAnima];
    //添加到实现动画对象的layer
    [bgImageView.layer addAnimation:animaGroup forKey:@"Animation"];

相关文章

  • layer动画属性总结

    当你给一个 CALayer 添加动画的时候,动画其实并没有改变这个 layer 的实际属性。取而代之的,系统会创建...

  • iOS隐式动画机制

    Core Animation通常对 CALayer 的所有属性(可动画的属性)做动画,在改变layer层一些属性的...

  • iOS核心动画

    一、关于核心动画的介绍 1、核心动画作用于layer层, layer有两个属性Position和achroPoin...

  • layer动画总结

    layer的属性 条形 波浪 波纹 翻转 画圆圈 动的三角形 网格动画 转圈动画

  • Framer学习记录之第一个十条

    一、layer有一个属性叫做animate,用来做动画,直接加在layer的名字上,例如layerB.animat...

  • 属性动画学习使用总结

    Android 属性动画总结 属性动画的优点 属性动画的使用步骤 实例化属性动画对象 设置属性动画的时长 启动属性...

  • CALayer的隐式动画

    我们修改layer属性时默认会有动画。动画使用CABasicAnimation对象,持续0.25。默认会产生隐式动...

  • 第六篇:UIView block动画

    在开始学习Core Animation提供的layer的隐式动画和layer的显式动画之前,我们先来总结一下UIV...

  • ios动画学习

    1、默认的Layer都是有隐式的动画的,修改属性会产生动画的效果,而UIView设置属性的时候不会产生动画的效果,...

  • iOS:核心动画和UIView动画

    记住:核心动画都是假象(核心动画作用在layer上)原因:不能改变layer的真实属性的值展示的位置和实际的位置不...

网友评论

      本文标题:layer动画属性总结

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