CABasicAnimation 动画

CABasicAnimation用法

 

CABasicAnimation 自己只有三个property   fromValue  toValue  ByValue

当你创建一个 CABasicAnimation时,你需要通过-setFromValue和-setToValue来指定一个开始值和结束值。当你增加基础动画到层中的时候,它开始运行。当用属性做动画完成时,例如用位置属性做动画,层就会立刻返回到它的初始位置 

记住当你做动画时,你至少使用了 2 个对象。这些对象都是层本身,一个层或者层继承的对象,和在先前的例子中你分配给层的CABasicAnimation对象。因为你给动画对象设定了最后的值(目的地),但是并不意味着当动画完成的时候,层的属性就改变成了最后的值。当动画完成时,你必须显示的设定层的属性,这样动画结束后,你的层才能真正的到你设定的属性值上。

你可以简单的停止动画到你结束的点上,但是这仅仅是一个视觉效果。层实际的值仍然是一样的。要真的改变内部的值,就像刚才所说的你必须显示的设定那个属性。例如,显示的设定位置的属性,你需要在层中调用-setPosition方法。但是,这会造成一点问题。

如果你通过-set这个方法显示的设定了层属性的值,那么默认的动画将被执行,而非之前你设定的动画。在表 3-9 中演示了你设置位置的方法。注意到了,我们使用 position 已经创建了基础动画,但是我们在层上显示的调用了-setPosition方法,就覆盖了我们设定的动画,使我们设定的基础动画完全没用了。如果你使用了这个代码,你会看到虽然我们的层结束的时候放到了正确的位置,但是它使用的是默认的 0.25 秒,而非我们在动画里显示设定的 5 秒钟。 

1

2

3

4

CABasicAnimation *animation =

[CABasicAnimation animationWithKeyPath:@”position”]; [animation setFromValue:[NSValue valueWithPoint:startPoint]]; [animation setToValue:[NSValue valueWithPoint:endPoint]]; [animation setDuration:5.0];

[layer setPosition:endpoint];

[layer addAnimation:animation forKey:nil];

 因此现在问题出来了,你怎么能使用我们设定的动画呢?看表 3-9 的最后一行,注意到 forKey:这个参数是被设定为 nil。这就是为什么动画不能覆盖默认动画的原因。如果你改变最后一行为[layer addAnimation:animationforKey:@"position"],动画将会按照我们设定的时间工作。这告诉了层当需要做动画时,使用我们给关键路径指定的新动画。 

 

下面是一些继承的游泳的属性

Autoreverses

当你设定这个属性为 YES时,在它到达目的地之后,动画的返回到开始的值,代替了直接跳转到开始的值。

Duration
Duration 这个参数你已经相当熟悉了。它设定开始值到结束值花费的时间。期间会被速度的属性所影响。 RemovedOnCompletion
这个属性默认为 YES,那意味着,在指定的时间段完成后,动画就自动的从层上移除了。这个一般不用。

假如你想要再次用这个动画时,你需要设定这个属性为 NO。这样的话,下次你在通过-set方法设定动画的属性时,它将再次使用你的动画,而非默认的动画。

Speed

默认的值为 1.0.这意味着动画播放按照默认的速度。如果你改变这个值为 2.0,动画会用 2倍的速度播放。这样的影响就是使持续时间减半。如果你指定的持续时间为 6 秒,速度为 2.0,动画就会播放 3 秒钟---一半的持续时间。

BeginTime

这个属性在组动画中很有用。它根据父动画组的持续时间,指定了开始播放动画的时间。默认的是 0.0.组动画在下个段落中讨论“Animation Grouping”。

TimeOffset

如果一个时间偏移量是被设定,动画不会真正的可见,直到根据父动画组中的执行时间得到的时间都流逝了。

RepeatCount

默认的是 0,意味着动画只会播放一次。如果指定一个无限大的重复次数,使用 1e100f。这个不应该和 repeatDration属性一块使用。

RepeatDuration

这个属性指定了动画应该被重复多久。动画会一直重复,直到设定的时间流逝完。它不应该和 repeatCount 一起使用。 

 

 

下面这段英文摘自苹果官方文档，将的是fromValue  toValue  ByValue  怎么使用

The interpolation valuesare used as follows:

•  Both fromValue and toValue arenon-nil. Interpolatesbetween fromValue and toValue.

•  fromValue and byValue arenon-nil. Interpolatesbetween fromValue and(fromValue + byValue).

•  byValue and toValue arenon-nil. Interpolatesbetween (toValue - byValue)and toValue.

•  fromValue is non-nil. Interpolatesbetween fromValue andthe current presentation value of the property.

•  toValue is non-nil. Interpolatesbetween the current value of keyPath in the target layer’spresentation layer andtoValue.

•  byValue is non-nil. Interpolates betweenthe current value of keyPath in the target layer’spresentation layer and that value plus byValue.

•  All propertiesare nil. Interpolatesbetween the previous value of keyPath in the target layer’spresentation layer and the current value of keyPath in thetarget layer’s presentation layer.

其他的方法还是属性等都是继承而来的

我们可以通过animationWithKeyPath键值对的方式来改变动画

animationWithKeyPath的值：

transform.scale = 比例轉換

    transform.scale.x = 闊的比例轉換

    transform.scale.y = 高的比例轉換

    transform.rotation.z = 平面圖的旋轉

    opacity = 透明度

    margin

    zPosition

    backgroundColor    背景颜色

    cornerRadius    圆角

    borderWidth

    bounds

    contents

    contentsRect

    cornerRadius

    frame

    hidden

    mask

    masksToBounds

    opacity

    position

    shadowColor

    shadowOffset

    shadowOpacity

    shadowRadius

 

下面是一些例子

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

    CABasicAnimation *pulse = [CABasicAnimation animationWithKeyPath:@"transform.scale"];

    pulse.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];

    pulse.duration = 0.5 + (rand() % 10) * 0.05;

    pulse.repeatCount = 1;

    pulse.autoreverses = YES;

    pulse.fromValue = [NSNumber numberWithFloat:.8];

    pulse.toValue = [NSNumber numberWithFloat:1.2];

    [self.ui_View.layer addAnimation:pulse forKey:nil];

 

// bounds

  

CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"bounds"];

    anim.duration = 1.f;

    anim.fromValue = [NSValue valueWithCGRect:CGRectMake(0,0,10,10)];

    anim.toValue = [NSValue valueWithCGRect:CGRectMake(10,10,200,200)];

    anim.byValue  = [NSValue valueWithCGRect:self. ui_View.bounds];

//    anim.toValue = (id)[UIColor redColor].CGColor;

//    anim.fromValue =  (id)[UIColor blackColor].CGColor;

     

    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    anim.repeatCount = 1;

    anim.autoreverses = YES;

     

    [ui_View.layer addAnimation:anim forKey:nil];

//cornerRadius

  

    CABasicAnimation *anim2 = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];

    anim2.duration = 1.f;

    anim2.fromValue = [NSNumber numberWithFloat:0.f];

    anim2.toValue = [NSNumber numberWithFloat:20.f];

    anim2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    anim2.repeatCount = CGFLOAT_MAX;

    anim2.autoreverses = YES;

     

    [ui_View.layer addAnimation:anim2 forKey:@"cornerRadius"];

 

//contents

  

CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"contents"];

    anim.duration = 1.f;

    anim.fromValue = (id)[UIImage imageNamed:@"1.jpg"].CGImage;

    anim.toValue = (id)[UIImage imageNamed:@"2.png"].CGImage;

//    anim.byValue  = (id)[UIImage imageNamed:@"3.png"].CGImage;

//    anim.toValue = (id)[UIColor redColor].CGColor;

//    anim.fromValue =  (id)[UIColor blackColor].CGColor;

     

    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    anim.repeatCount = CGFLOAT_MAX;

    anim.autoreverses = YES;

     

    [ui_View.layer addAnimation:anim forKey:nil];

 

 

  

[ui_View.layer setShadowOffset:CGSizeMake(2,2)];

    [ui_View.layer setShadowOpacity:1];

    [ui_View.layer setShadowColor:[UIColor grayColor].CGColor];

//

    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"shadowColor"];

    anim.duration = 1.f;

    anim.toValue = (id)[UIColor redColor].CGColor;

    anim.fromValue =  (id)[UIColor blackColor].CGColor;

     

    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    anim.repeatCount = CGFLOAT_MAX;

    anim.autoreverses = YES;

     

    [ui_View.layer addAnimation:anim forKey:nil];

     

    CABasicAnimation *_anim = [CABasicAnimation animationWithKeyPath:@"shadowOffset"];

    _anim.duration = 1.f;

    _anim.fromValue = [NSValue valueWithCGSize:CGSizeMake(0,0)];

    _anim.toValue = [NSValue valueWithCGSize:CGSizeMake(3,3)];

     

    _anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    _anim.repeatCount = CGFLOAT_MAX;

    _anim.autoreverses = YES;

     

    [ui_View.layer addAnimation:_anim forKey:nil];

     

     

    CABasicAnimation *_anim1 = [CABasicAnimation animationWithKeyPath:@"shadowOpacity"];

    _anim1.duration = 1.f;

    _anim1.fromValue = [NSNumber numberWithFloat:0.5];

    _anim1.toValue = [NSNumber numberWithFloat:1];

     

    _anim1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    _anim1.repeatCount = CGFLOAT_MAX;

    _anim1.autoreverses = YES;

     

    [ui_View.layer addAnimation:_anim1 forKey:nil];

     

     

     

    CABasicAnimation *_anim2 = [CABasicAnimation animationWithKeyPath:@"shadowRadius"];

    _anim2.duration = 1.f;

    _anim2.fromValue = [NSNumber numberWithFloat:10];

    _anim2.toValue = [NSNumber numberWithFloat:5];

     

    _anim2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    _anim2.repeatCount = CGFLOAT_MAX;

    _anim2.autoreverses = YES;

     

    [ui_View.layer addAnimation:_anim2 forKey:nil];

 下面是一些应用

 

几个可以用来实现热门APP应用PATH中menu效果的几个方法

 

+(CABasicAnimation *)opacityForever_Animation:(float)time ／／永久闪烁的动画

 

{

 

    CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"opacity"];

 

    animation.fromValue=[NSNumber numberWithFloat:1.0];

 

    animation.toValue=[NSNumber numberWithFloat:0.0];

 

    animation.autoreverses=YES;

 

    animation.duration=time;

 

    animation.repeatCount=FLT_MAX;

 

    animation.removedOnCompletion=NO;

 

    animation.fillMode=kCAFillModeForwards;

 

    returnanimation;

 

}

 

  

 

+(CABasicAnimation *)opacityTimes_Animation:(float)repeatTimes durTimes:(float)time; ／／有闪烁次数的动画

 

{

 

    CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"opacity"];

 

    animation.fromValue=[NSNumber numberWithFloat:1.0];

 

    animation.toValue=[NSNumber numberWithFloat:0.4];

 

    animation.repeatCount=repeatTimes;

 

    animation.duration=time;

 

    animation.removedOnCompletion=NO;

 

    animation.fillMode=kCAFillModeForwards;

 

    animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

 

    animation.autoreverses=YES;

 

    return animation;

 

}

 

  

 

+(CABasicAnimation *)moveX:(float)time X:(NSNumber *)x ／／横向移动

 

{

 

    CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"transform.translation.x"];

 

    animation.toValue=x;

 

    animation.duration=time;

 

    animation.removedOnCompletion=NO;

 

    animation.fillMode=kCAFillModeForwards;

 

    returnanimation;

 

}

 

  

 

+(CABasicAnimation *)moveY:(float)time Y:(NSNumber *)y ／／纵向移动

 

{

 

    CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"transform.translation.y"];

 

    animation.toValue=y;

 

    animation.duration=time;

 

    animation.removedOnCompletion=NO;

 

    animation.fillMode=kCAFillModeForwards;

 

    returnanimation;

 

}

 

  

 

+(CABasicAnimation *)scale:(NSNumber *)Multiple orgin:(NSNumber *)orginMultiple durTimes:(float)time Rep:(float)repeatTimes ／／缩放

 

{

 

    CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"transform.scale"];

 

    animation.fromValue=orginMultiple;

 

    animation.toValue=Multiple;

 

    animation.duration=time;

 

    animation.autoreverses=YES;

 

    animation.repeatCount=repeatTimes;

 

    animation.removedOnCompletion=NO;

 

    animation.fillMode=kCAFillModeForwards;

 

    returnanimation;

 

}

 

  

 

+(CAAnimationGroup *)groupAnimation:(NSArray *)animationAry durTimes:(float)time Rep:(float)repeatTimes ／／组合动画

 

{

 

    CAAnimationGroup *animation=[CAAnimationGroup animation];

 

    animation.animations=animationAry;

 

    animation.duration=time;

 

    animation.repeatCount=repeatTimes;

 

    animation.removedOnCompletion=NO;

 

    animation.fillMode=kCAFillModeForwards;

 

    returnanimation;

 

}

 

  

 

+(CAKeyframeAnimation *)keyframeAniamtion:(CGMutablePathRef)path durTimes:(float)time Rep:(float)repeatTimes ／／路径动画

 

{

 

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

 

    animation.path=path;

 

    animation.removedOnCompletion=NO;

 

    animation.fillMode=kCAFillModeForwards;

 

    animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

 

    animation.autoreverses=NO;

 

    animation.duration=time;

 

    animation.repeatCount=repeatTimes;

 

    returnanimation;

 

}

 

  

 

+(CABasicAnimation *)movepoint:(CGPoint )point ／／点移动

 

{

 

    CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"transform.translation"];

 

    animation.toValue=[NSValue valueWithCGPoint:point];

 

    animation.removedOnCompletion=NO;

 

    animation.fillMode=kCAFillModeForwards;

 

    returnanimation;

 

}

 

  

 

+(CABasicAnimation *)rotation:(float)dur degree:(float)degree direction:(int)direction repeatCount:(int)repeatCount ／／旋转

 

{

 

    CATransform3D rotationTransform  = CATransform3DMakeRotation(degree, 0, 0,direction);

 

    CABasicAnimation* animation;

 

    animation = [CABasicAnimation animationWithKeyPath:@"transform"];

 

  

 

animation.toValue= [NSValue valueWithCATransform3D:rotationTransform];

 

    animation.duration= dur;

 

animation.autoreverses= NO;

 

    animation.cumulative= YES;

 

    animation.removedOnCompletion=NO;

 

    animation.fillMode=kCAFillModeForwards;

 

    animation.repeatCount= repeatCount;

 

animation.delegate= self;

 

  

 

returnanimation;

 

}

 

 

 

 

 

 

 

 

 

 

AnimationPause

 

@implementation AnimationViewController

@synthesize controlButton;

@synthesize image;

 

- (void)dealloc

{

    [imagerelease];

   [controlButton release];

    [superdealloc];

}

 

- (void)didReceiveMemoryWarning

{

   // Releases the view if it doesn't have asuperview.

   [superdidReceiveMemoryWarning];

    

   // Release any cached data, images, etc thataren't in use.

}

 

- (void)addAnimations

{

  //让图片来回移动

   CABasicAnimation *translation = [CABasicAnimationanimationWithKeyPath:@"position"];

    translation.fromValue= [NSValuevalueWithCGPoint:CGPointMake(24,240)];

    translation.toValue= [NSValuevalueWithCGPoint:CGPointMake(320-24,240)];

//    translation.toValue=[NSValuevalueWithCATransform3D:CATransform3DMakeRotation(3.1415, 0, 0, 1.0)];//翻转效果

//   translation.toValue = [NSNumber numberWithDouble:1.5];//缩放效果

   translation.duration =2;//动画持续时间

   translation.repeatCount =HUGE_VALF;//动画重复次数

   translation.autoreverses =YES;//是否自动重复

    

   //让图片来回转动

   CABasicAnimation *rotation = [CABasicAnimationanimationWithKeyPath:@"transform.rotation.z"];

   //kCAMediaTimingFunctionLinear 表示时间方法为线性，使得足球匀速转动

    rotation.timingFunction = [CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionLinear];

    rotation.toValue = [NSNumbernumberWithFloat:4 * M_PI];

    rotation.duration =2;

    rotation.repeatCount =HUGE_VALF;

    rotation.autoreverses =YES;

    

    [image.layeraddAnimation:rotationforKey:@"rotation"];

    [image.layeraddAnimation:translationforKey:@"translation"];

}

 

#pragma mark - Viewlifecycle

- (void)viewDidLoad

{

    [super viewDidLoad];

    [self addAnimations];

}

 

 

- (void)viewDidUnload

{

    [selfsetImage:nil];

    [self setControlButton:nil];

    [super viewDidUnload];

}

 

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation

{

   // Return YES for supported orientations

    return (interfaceOrientation ==UIInterfaceOrientationPortrait);

}

 

//暂停layer上面的动画

- (void)pauseLayer:(CALayer*)layer

{

   CFTimeIntervalpausedTime = [layer convertTime:CACurrentMediaTime()fromLayer:nil];

    layer.speed =0.0;

    layer.timeOffset = pausedTime;

}

 

//继续layer上面的动画

- (void)resumeLayer:(CALayer*)layer

{

    CFTimeInterval pausedTime = [layertimeOffset];

    layer.speed =1.0;

    layer.timeOffset =0.0;

    layer.beginTime =0.0;

    CFTimeInterval timeSincePause = [layerconvertTime:CACurrentMediaTime()fromLayer:nil] -pausedTime;

    layer.beginTime = timeSincePause;

}

 

- (void)pauseSoccer

{

    isPause =YES;

    [controlButton setTitle:@"continue"forState:UIControlStateNormal];

    [selfpauseLayer:image.layer];

}

 

- (void)resumeSoccer

{

    isPause =NO;

    [controlButton setTitle:@"pause" forState:UIControlStateNormal];

    [self resumeLayer:image.layer];

}

 

- (IBAction)clickControlButton:(id)sender {

    if (isPause) {

       [selfresumeSoccer];

    }else{

       [selfpauseSoccer];

    }

}

@end