关键帧动画CAKeyframeAnimation

来源:互联网 发布:学生信息管理系统java 编辑:程序博客网 时间:2024/06/06 05:30

 介绍关键帧动画之前先介绍一下什么是补间动画

 补间动画:两个值发生改变,中间产生的动画效果叫做部件动画

 关键帧动画与基础动画的区别:基础动画只能是某个属性的初始值到另一个值产生的动画效果

 关键帧动画支持多个值(values)或者一个路径(path

 关键帧动画的属性

 CAKeyframeAnimation

values:值的数组

path:值得路径

keyTimes:时间值(01

timingFunctions:速度控制的数组

calculationMode:动画样式

 kCAAnimationLinear 自定义控制动画的时间(线性)可以设置keyTimes

 kCAAnimationDiscrete 离散动画 没有任何补间动画使用keytimes@[@0.3,@0.5,@1.0];

 kCAAnimationPaced 节奏动画自动计算动画的运动时间

 kCAAnimationCubic 曲线动画需要设置timingFunctions

 kCAAnimationCubicPaced 节奏曲线动画自动计算

rotationMode:旋转的样式

 kCAAnimationRotateAuto 自动

 kCAAnimationRotateAutoReverse 自动翻转


具体代码:实现花瓣掉落的效果

#import "ViewController.h"


@interface ViewController ()



//背景

@property (nonatomic,strong) CALayer *layer;


//花瓣

@property (nonatomic,strong) CALayer *petalLayer;

@end


@implementation ViewController


- (void)viewDidLoad {

    [superviewDidLoad];

    self.view.backgroundColor = [UIColorblackColor];

    

    [self.view.layeraddSublayer:self.layer];

    [self.view.layeraddSublayer:self.petalLayer];

}


- (void)demo1{

    CAKeyframeAnimation *key = [CAKeyframeAnimationanimationWithKeyPath:@"position"];

    key.values =@[[NSValuevalueWithCGPoint:CGPointMake(100,50)],[NSValuevalueWithCGPoint:CGPointMake(200,150)],[NSValuevalueWithCGPoint:CGPointMake(300,450)]];

    

    key.removedOnCompletion =NO;

    key.fillMode =kCAFillModeBoth;

    key.duration =2;

//    kCAAnimationCubicPaced自动计算每个运动轨迹之间的补间动画的时间

    key.calculationMode =kCAAnimationCubicPaced;

//    旋转模式,使用的是paths这个属性,values没有效果

//    key.rotationMode = kCAAnimationRotateAutoReverse;

    [self.petalLayeraddAnimation:key forKey:@""];

}



- (void)demo2:(CGPoint)toPoint{

    CAKeyframeAnimation *key = [CAKeyframeAnimationanimationWithKeyPath:@"position"];

    

    UIBezierPath *path = [UIBezierPathbezierPath];

//    路径的起始点

    [path moveToPoint:self.petalLayer.position];

    [path addCurveToPoint:toPointcontrolPoint1:CGPointMake(100,100) controlPoint2:CGPointMake(200,200)];

    

    key.path = path.CGPath;

    

    key.removedOnCompletion =NO;

    key.fillMode =kCAFillModeBoth;

    key.duration =2;

    //    kCAAnimationCubicPaced自动计算每个运动轨迹之间的补间动画的时间

    key.calculationMode =kCAAnimationCubicPaced;

    //    旋转模式,使用的是paths这个属性,values没有效果

    key.rotationMode =kCAAnimationRotateAuto;

    [self.petalLayeraddAnimation:key forKey:@""];

}

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{

    [selfdemo2:[[touches anyObject]locationInView:self.view]];

    

}


- (CALayer *)petalLayer{

    if (_petalLayer) {

        return_petalLayer;

    }

    _petalLayer = [CALayerlayer];

    _petalLayer.position =CGPointMake(self.view.center.x,50);

    UIImage *image =[UIImageimageNamed:@"花瓣4"];

    _petalLayer.bounds =CGRectMake(0,0, image.size.width, image.size.height);

    _petalLayer.contents = (id)image.CGImage;

    

    return_petalLayer;

}


- (CALayer *)layer{

    if (_layer) {

        return_layer;

    }

    _layer = [CALayerlayer];

    _layer.position =CGPointMake(self.view.center.x,self.view.center.y+100);

    UIImage *image =[UIImageimageNamed:@"bgimage"];

    _layer.bounds =CGRectMake(0,0, image.size.width/2, image.size.height/2);

    _layer.contents = (id)image.CGImage;

    

    return_layer;

    

    

}




0 0
原创粉丝点击