CAAnimation总结

最新推荐文章于 2021-05-13 10:33:28 发布

dieyu4807

最新推荐文章于 2021-05-13 10:33:28 发布

阅读量106

点赞数

原文链接：http://www.cnblogs.com/Mike-Fighting/p/4800660.html

版权

我们通常所说的核心动画结构图如上，下面分别介绍对应的动画

1. 1）我们可以新建多个动画，然后将些动画放到数组中，让后将这个数组赋值给groupAnimation的animations

2）对goupAnimation做相应的配置，比如时间和重复次数

3）将动画加到layer层

具体例子如下：

    
    CABasicAnimation *xAni = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];
    xAni.toValue = @(1);
    CABasicAnimation *zAni = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    zAni.toValue = @(2);
    
    /*
     动画组(多个动画同时进行)
     */
    CAAnimationGroup *group = [CAAnimationGroup animation];
    //动画时间
    group.duration = 2.0;
    //设置动画对象
    group.animations = @[xAni,zAni];
    group.repeatCount = MAXFLOAT;
    //把动画组加到是视图的图层上
    [_greenView.layer addAnimation:group forKey:nil];

2.CATransition我们成为过渡动画，我们可以用它来实现页面的间绚丽的切换效果

创建CATransition对象，并且做基本的设置，如类型和时间；
根据不同的操作设定相应的subtype值；
将动画添加到Layer层；

具体的代码如下:

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    index = 1;
    
    
    [self.view addSubview:self.transitionView];
    [self addSwipeGestureRecognizer];
    
    
    
    
}

/**
 手势事件处理
 */
- (void)swipe:(UISwipeGestureRecognizer *)gesture
{
    //过渡动画
    CATransition *transition = [CATransition animation];
    //设置类型
    transition.type = @"cube";
    //动画时间
    transition.duration = 2;

    
    //判断方向
    //向右滑
    if (gesture.direction == UISwipeGestureRecognizerDirectionRight)
    {
        index--;
        //子类型
        transition.subtype =  kCATransitionFromLeft;
    }
    else
    {
        index++;
        
        transition.subtype =  kCATransitionFromRight;
    }
    
    //添加动画到层
    [_transitionView.layer addAnimation:transition forKey:nil];
    
    //修改图片
    _transitionView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%lu.jpg",(long)index]];
}

//添加轻扫手势
- (void)addSwipeGestureRecognizer
{
    UISwipeGestureRecognizer *swipeForLeft = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipe:)];
    //方向
    swipeForLeft.direction = UISwipeGestureRecognizerDirectionLeft;
    [_transitionView addGestureRecognizer:swipeForLeft];
    
    UISwipeGestureRecognizer *swipeForRight = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipe:)];
    swipeForRight.direction = UISwipeGestureRecognizerDirectionRight;
    [_transitionView addGestureRecognizer:swipeForRight];
}

//返回transitionView
- (CATransitionView *)transitionView
{
    if (!_transitionView)
    {
        _transitionView = [[CATransitionView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.width)];
        _transitionView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%lu.jpg",(long)index]];
        _transitionView.backgroundColor = [UIColor lightGrayColor];
        
    }
    
    return _transitionView;
}

其中：CATransition中type的值：

1 fade = 1, //淡入淡出

2 push, //推挤

3 reveal, //揭开

4 moveIn, //覆盖

5 cube, //立方体

6 suckEffect, //吮吸

7 oglFlip, //翻转

8 rippleEffect, //波纹

9 pageCurl, //翻页

10 pageUnCurl, //反翻页

11 cameraIrisHollowOpen, //开镜头

12 cameraIrisHollowClose, //关镜头

下面这个几个用在UIView的setAnimationTransition方法中

13 UIViewAnimationTransitionCurlDown, //下翻页

14 UIViewAnimationTransitionCurlUp, //上翻页

15 UIViewAnimationTransitionFlipFromLeft, //左翻转

16 UIViewAnimationTransitionFlipFromRight, //右翻转

3. 1 CAPropertyAnimation中的BasicAnimation,这个动画类似于UIKit中的动画，都是通过修改keyPath的值来产生的，只不过比那个动画要复杂，步骤同上，具体代码如下：

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    
    /**
     背景颜色动画
     */
    CABasicAnimation *basicAnimation = [CABasicAnimation
                                        animationWithKeyPath:@"backgroundColor"];
    basicAnimation.duration = 2;
    basicAnimation.toValue = (id)[UIColor greenColor].CGColor;
    //自动反转
    basicAnimation.autoreverses = YES;
    //循环次数
    basicAnimation.repeatCount = MAXFLOAT;
    
    [_imageView.layer addAnimation:basicAnimation forKey:nil];
    [self refresh];
    
}

/**
 圆角动画
 */
- (void)test1
{
    CABasicAnimation *basicAnimation = [CABasicAnimation
                                        animationWithKeyPath:@"cornerRadius"];
    basicAnimation.duration = 2;
    basicAnimation.toValue = @40;
    //自动反转
    basicAnimation.autoreverses = YES;
    //循环次数
    basicAnimation.repeatCount = MAXFLOAT;
    
    [_imageView.layer addAnimation:basicAnimation forKey:nil];
}

/**
 刷新动画
 */
- (void)refresh
{
    /**
     基本动画
     */
    CABasicAnimation *basicAnimation = [CABasicAnimation
                                        animationWithKeyPath:@"transform.rotation.z"];
    basicAnimation.duration = 2;
    //byValue和toValue的区别，前者是在当前的位置上增加多少，后者是到指定的位置。
    basicAnimation.toValue = @(M_PI * 2);
    basicAnimation.repeatCount = MAXFLOAT;
    
    //添加动画
    [_imageView.layer addAnimation:basicAnimation forKey:nil];
}

常用的KeyPath如下：

rotation.x/y/z scale.x/y/z translation.x/y/z

opacity = 透明度

margin

zPosition

backgroundColor 背景颜色

cornerRadius 圆角

borderWidth

bounds

contents

contentsRect

hidden

mask

masksToBounds

opacity

position

shadowColor

shadowOffset

shadowOpacity

shadowRadius

3.2 关键帧动画可以让动画在几个点上移动，或者在某个区域内部移动，这些移动的速度也是可调节的，实现步骤如下：

创建path
创建CAKeyframeAnimation,将path赋值给.path
设置CAKeyFramAnimation的其它属性
在layer层添加动画并且释放path 利用Create,Copy,Retain创建的对象也需要手动释放

具体的实现代码如下：

- (void)viewDidLoad {

[super viewDidLoad];

// Do any additional setup after loading the view, typically from a nib.

_v = [[UIView alloc] initWithFrame:CGRectMake(20, 40, 20, 20)];

_v.backgroundColor = [UIColor redColor];

//_v.layer.cornerRadius = 10;

_v.layer.position = CGPointMake(20, 40);

[self.view addSubview:_v];

[self pointMove];

}

/**

移动根据指定的path

- (void)circleMove

{

Create,Copy,Retain 也需要手动释放。

CGMutablePathRef path = CGPathCreateMutable();

CGPathAddEllipseInRect(path, NULL, CGRectMake(30, 50, 300, 300));

CAKeyframeAnimation *keyframeAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];

keyframeAnimation.duration = 3;

//设置路径

keyframeAnimation.path = path;

//重复次数

keyframeAnimation.repeatCount = MAXFLOAT;

// calculationMode 是控制关键帧动画时间的另一种方法。我们通过将其设置为 kCAAnimationPaced，让 Core Animation 向被驱动的对象施加一个恒定速度，不管路径的各个线段有多长。

keyframeAnimation.calculationMode = kCAAnimationPaced;

//添加动画

[_v.layer addAnimation:keyframeAnimation forKey:@"circleMove"];

//释放

CGPathRelease(path);

//停止动画

dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{

[_v.layer removeAnimationForKey:@"circleMove"];

});

}

根据指定的关键部分移动

- (void)pointMove

{

/**

关键帧动画

CAKeyframeAnimation *keyframeAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];

//设置时间

keyframeAnimation.duration = 2;

//自动反转(原路返回)

keyframeAnimation.autoreverses = YES;

//移动的关键点

keyframeAnimation.values = @[

[NSValue valueWithCGPoint:CGPointMake(20, 40)],

[NSValue valueWithCGPoint:CGPointMake(200, 400)],

[NSValue valueWithCGPoint:CGPointMake(200, 60)],

[NSValue valueWithCGPoint:CGPointMake(100, 160)]

];

timingFunction ：动画的运动轨迹，用于变化起点和终点之间的差值计算,形象点说它决定了动画运行的节奏,比如是

　　　　　　　　　　　　　　　　　均匀变化(相同时间变化量相同)还是先快后慢,先慢后快还是先慢再快再慢.

　　　　　　　　　　　　　　 * 动画的开始与结束的快慢,有五个预置分别为(下同):

　　　　　　　　　　　　　　　　　　 * kCAMediaTimingFunctionLinear 线性,即匀速

　　　　　　　　　　　　　　　　　　 * kCAMediaTimingFunctionEaseIn 先慢后快

　　　　　　　　　　　　　　　　　　 * kCAMediaTimingFunctionEaseOut 先快后慢

　　　　　　　　　　　　　　　　　　* kCAMediaTimingFunctionEaseInEaseOut 先慢后快再慢

　　　　　　　　　　　　　　　　　　* kCAMediaTimingFunctionDefault 实际效果是动画中间比较快.

keyframeAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

//添加动画

[_v.layer addAnimation:keyframeAnimation forKey:nil];

}

转载于:https://www.cnblogs.com/Mike-Fighting/p/4800660.html

dieyu4807

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CAAnimation总结

我们通常所说的核心动画结构图如上，下面分别介绍对应的动画1. 1）我们可以新建多个动画，然后将些动画放到数组中，让后将这个数组赋值给groupAnimation的animations 2）对goupAnimation做相应的配置，比如时间和重复次数 3）将动画加到layer层具体例子如下： CABasicAnimation ...
复制链接

扫一扫