DevSupportiOS画图与动画移动开发

CABasicAnimation使用总结

2015-10-27  本文已影响34353人  懒得起名的伊凡

实例化

使用方法animationWithKeyPath:对 CABasicAnimation进行实例化，并指定Layer的属性作为关键路径进行注册。

//围绕y轴旋转
CABasicAnimation *transformAnima = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];

设定动画

设定动画的属性和说明

属性 说明
duration 动画的时长
repeatCount 重复的次数。不停重复设置为 HUGE_VALF
repeatDuration 设置动画的时间。在该时间内动画一直执行，不计次数。
beginTime 指定动画开始的时间。从开始延迟几秒的话，设置为【CACurrentMediaTime() + 秒数】 的方式
timingFunction 设置动画的速度变化
autoreverses 动画结束时是否执行逆动画
fromValue 所改变属性的起始值
toValue 所改变属性的结束时的值
byValue 所改变属性相同起始值的改变量 
transformAnima.fromValue = @(M_PI_2);
transformAnima.toValue = @(M_PI);
transformAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
transformAnima.autoreverses = YES;
transformAnima.repeatCount = HUGE_VALF;
transformAnima.beginTime = CACurrentMediaTime() + 2;

防止动画结束后回到初始状态

只需设置removedOnCompletion、fillMode两个属性就可以了。

transformAnima.removedOnCompletion = NO;
transformAnima.fillMode = kCAFillModeForwards;

解释：为什么动画结束后返回原状态？
首先我们需要搞明白一点的是，layer动画运行的过程是怎样的？其实在我们给一个视图添加layer动画时，真正移动并不是我们的视图本身，而是 presentation layer 的一个缓存。动画开始时 presentation layer开始移动，原始layer隐藏，动画结束时，presentation layer从屏幕上移除，原始layer显示。这就解释了为什么我们的视图在动画结束后又回到了原来的状态，因为它根本就没动过。

这个同样也可以解释为什么在动画移动过程中，我们为何不能对其进行任何操作。

所以在我们完成layer动画之后，最好将我们的layer属性设置为我们最终状态的属性，然后将presentation layer 移除掉。

添加动画

[self.imageView.layer addAnimation:transformAnima forKey:@"A"];

需要注意的两点

fillMode属性的理解

该属性定义了你的动画在开始和结束时的动作。默认值是 kCAFillModeRemoved。

取值的解释

Animation Easing的使用

也即是属性timingFunction值的设定，有种方式来获取属性值

（1）使用方法functionWithName:

这种方式很简单，这里只是简单说明一下取值的含义：

(2)使用方法functionWithControlPoints: : : :实现，这个之后再说，占个坑先。

其他的一些设置属性

使用总结

例子（移动动画实现）

直接上代码

CABasicAnimation *positionAnima = [CABasicAnimation animationWithKeyPath:@"position.y"];
positionAnima.duration = 0.8;
positionAnima.fromValue = @(self.imageView.center.y);
positionAnima.toValue = @(self.imageView.center.y-30);
positionAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
positionAnima.repeatCount = HUGE_VALF;
positionAnima.repeatDuration = 2;
positionAnima.removedOnCompletion = NO;
positionAnima.fillMode = kCAFillModeForwards;

[self.imageView.layer addAnimation:positionAnima forKey:@"AnimationMoveY"];

组合动画的实现

CABasicAnimation *positionAnima = [CABasicAnimation animationWithKeyPath:@"position.y"];
positionAnima.fromValue = @(self.imageView.center.y);
positionAnima.toValue = @(self.imageView.center.y-30);
positionAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];


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.animations = @[positionAnima,transformAnima];

[self.imageView.layer addAnimation:animaGroup forKey:@"Animation"];

动画开始和结束时的事件

为了获取动画的开始和结束事件，需要实现协议

positionAnima.delegate = self;

代理方法实现

//动画开始时
- (void)animationDidStart:(CAAnimation *)anim
{
    NSLog(@"开始了");
}

//动画结束时
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    //方法中的flag参数表明了动画是自然结束还是被打断,比如调用了removeAnimationForKey:方法或removeAnimationForKey方法，flag为NO，如果是正常结束，flag为YES。
    NSLog(@"结束了");
}

其实比较重要的是有多个动画的时候如何在代理方法中区分不同的动画
两种方式

方式一：

如果我们添加动画的视图是全局变量，可使用该方法。
添加动画时，我们使用了

[self.imageView.layer addAnimation:animaGroup forKey:@"Animation"];

所以，可根据key来区分不同的动画

//动画开始时
- (void)animationDidStart:(CAAnimation *)anim
{
    if ([anim isEqual:[self.imageView.layer animationForKey:@"Animation"]]) {
        NSLog(@"动画组执行了");
    }
}

Note:把动画存储为一个属性然后再回调中比较，用来判定是哪个动画是不可行的。应为委托传入的动画参数是原始值的一个深拷贝，不是同一个值

方式二

添加动画的视图是局部变量时，可使用该方法
添加动画给动画设置key-value对

[positionAnima setValue:@"PositionAnima" forKey:@"AnimationKey"];

[transformAnima setValue:@"TransformAnima" forKey:@"AnimationKey"];

所以，可以根据key中不同的值来进行区分不同的动画

//动画结束时
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    if ([[anim valueForKey:@"AnimationKey"]isEqualToString:@"PositionAnima"]) {
        NSLog(@"位置移动动画执行结束");
    }
    else if ([[anim valueForKey:@"AnimationKey"]isEqualToString:@"TransformAnima"]){
        NSLog(@"旋转动画执行结束");
    }
}

解决循环引用问题

由于CAAnimation的delegate使用的strong类型，


所以在全局变量如下设置时会产生循环引用的情况

self.animation.delegate = self;//可通过复用dealloc方法来验证

解决方案

//.h
#import <UIKit/UIKit.h>

@interface AnimationDelegate : NSObject

@end

//.m
#import "AnimationDelegate.h"

@implementation AnimationDelegate

- (void)animationDidStart:(CAAnimation *)anim
{
    NSLog(@"Animation Start");
}

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    NSLog(@"Animation Stop");
}

- (void)dealloc
{
    NSLog(@"Delegate Dealloc");
}

@end

使用方式

self.animation.delegate = [[AnimationDelegate alloc]init];

self.animation.delegate = [YYWeakProxy proxyWithTarget:self];

一些常用的animationWithKeyPath值的总结

值 说明 使用形式
transform.scale 比例转化 @(0.8)
transform.scale.x 宽的比例 @(0.8)
transform.scale.y 高的比例 @(0.8)
transform.rotation.x 围绕x轴旋转 @(M_PI)
transform.rotation.y 围绕y轴旋转 @(M_PI)
transform.rotation.z 围绕z轴旋转 @(M_PI)
cornerRadius 圆角的设置 @(50)
backgroundColor 背景颜色的变化 (id)[UIColor purpleColor].CGColor
bounds 大小，中心不变 [NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];
position 位置(中心点的改变) [NSValue valueWithCGPoint:CGPointMake(300, 300)];
contents 内容，比如UIImageView的图片 imageAnima.toValue = (id)[UIImage imageNamed:@"to"].CGImage;
opacity 透明度 @(0.7)
contentsRect.size.width 横向拉伸缩放 @(0.4)最好是0~1之间的
上一篇 下一篇

猜你喜欢

热点阅读