核心动画 -- CAKeyframeAnimation

来源:互联网 发布:产品网络推广方案 编辑:程序博客网 时间:2024/05/16 01:51

在上一篇介绍的CABasicAnimation 中可以简单实现一个位置到另外一个位置的动画。但是在现实开发中这个基础动画并不能解决一些动画,如位置连续变动,图片渐入渐出等。所以本篇文章介绍另外一个动画类:CAKeyframeAnimation也叫关键帧动画。它可以实现某一属性按照一串的数值进行动画,有点类似动态图。

下面介绍CAKeyframeAnimation的两个常用属性:

1、values
它可以设置一组关键帧的值,让图层按照这些值动起来。

CAKeyframeAnimation *keyframeAnimation = [CAKeyframeAnimation animation];keyframeAnimation.keyPath = @"position";NSValue *v1 = [NSValue valueWithCGPoint:CGPointMake(0, 0)];NSValue *v2 = [NSValue valueWithCGPoint:CGPointMake(150, 0)];NSValue *v3 = [NSValue valueWithCGPoint:CGPointMake(150, 150)];NSValue *v4 = [NSValue valueWithCGPoint:CGPointMake(0, 150)];//设置动画路线keyframeAnimation.values = @[v1, v2, v3, v4];//动画持续时间  每帧动画执行时长 = 总时长/(总帧数-1)keyframeAnimation.duration = 2.0;//设置每帧动画的时长(和duration配合用), 并且第一个必须是0.0,最后一个必须是1.0;所以第一帧动画时长为(0.5-0.0)*duration,后面以此类推。//keyframeAnimation.keyTimes = @[@(0.0),@(0.5), @(0.7), @(1.0)];//动画执行结束保持最后状态keyframeAnimation.fillMode = kCAFillModeForwards;keyframeAnimation.removedOnCompletion = NO;//设置YES 则动画执行结束后会原路返回再执行一遍//keyframeAnimation.autoreverses = YES;[self.myView.layer addAnimation:keyframeAnimation forKey:nil];

2、path

CAKeyframeAnimation *keyframeAnimation = [CAKeyframeAnimation animation];keyframeAnimation.keyPath = @"position";CGMutablePathRef pathRef = CGPathCreateMutable();CGPathMoveToPoint(pathRef, NULL, 50, 100);CGPathAddCurveToPoint(pathRef, NULL, 50, 200, 150, 300, 200, 200);CGPathAddCurveToPoint(pathRef, NULL, 150, 300, 250, 400, 350, 350);//设置曲线动画  keyframeAnimation.path = pathRef;//动画持续时间  每帧动画执行时长 = 总时长/(总帧数-1)keyframeAnimation.duration = 2.0;//设置动画执行节奏keyframeAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];/* 动画执行速度   kCAMediaTimingFunctionLinear  匀速   kCAMediaTimingFunctionEaseIn  渐入   kCAMediaTimingFunctionEaseOut  渐出   kCAMediaTimingFunctionEaseInEaseOut 渐入渐出 中间快   kCAMediaTimingFunctionDefault 默认*///动画执行结束保持最后状态keyframeAnimation.fillMode = kCAFillModeForwards;keyframeAnimation.removedOnCompletion = NO;[self.redView.layer addAnimation:keyframeAnimation forKey:nil];

这里写图片描述

0 0
原创粉丝点击