iOS常用动画示例

CAAnimation
provides the basic support for the CAMediaTiming and CAAction protocols. You do not create instance of CAAnimation: to animate Core Animation layers or SceneKit objects, create instances of the concrete subclasses CABasicAnimation, CAKeyframeAnimation, CAAnimationGroup, or CATransition.

1.CABasicAnimation

/**
 位移动画
 */
- (void)positinoAnimation{
    CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath:@"position"];
    animation.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, HEIGHT/2)];
    animation.toValue = [NSValue valueWithCGPoint:CGPointMake(WIDTH, HEIGHT/2)];
    animation.duration = 1.0f;
    [self.centerView.layer addAnimation:animation forKey:@"positionAnimation"];
//@"positionAnimation"移除动画时的标识符
}

Super_Yuan.gif

/**
 透明度
 */
- (void)opacityAnimation{
    CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    animation.fromValue = [NSNumber numberWithFloat:0.1f];
    animation.toValue = [NSNumber numberWithFloat:1.0f];
    animation.duration = 1.0f;
    [self.centerView.layer addAnimation:animation forKey:@"opacityAnimation"];
}

Super_Yuan.gif

/**
 缩放
 */
- (void)scalaAnimation{
    CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    animation.fromValue = [NSNumber numberWithFloat:0.2f];
    animation.toValue = [NSNumber numberWithFloat:2.0f];
    animation.duration = 1.0f;
    [self.centerView.layer addAnimation:animation forKey:@"scalaAnimation"];
}

Super_Yuan.gif

/**
 旋转
 */
- (void)rotationAnimation{
    CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    animation.toValue = [NSNumber numberWithFloat:M_PI];
    animation.duration = 1.0f;
    [self.centerView.layer addAnimation:animation forKey:@"rotationAnimation"];
}

Super_Yuan.gif

/**
 背景色
 */
- (void)backgroundColorAnimation{
    CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];
    animation.toValue = (__bridge id _Nullable)([UIColor blackColor].CGColor);
    animation.duration = 1.0f;
    [self.centerView.layer addAnimation:animation forKey:@"backgroundColorAnimation"];
}

Super_Yuan.gif

一些常用的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.8)
contentsRect.size.width	横向拉伸缩放	@(0.4)最好是0~1之间的

2.CAKeyframeAnimation

/**
 关键帧
 */
- (void)keyFrameAnimation{
    CAKeyframeAnimation * animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    NSValue *value0 = [NSValue valueWithCGPoint:CGPointMake(0, 0)];
    NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(0, HEIGHT)];
    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(WIDTH, HEIGHT)];
    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(WIDTH, 0)];
    NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(WIDTH/2, 0)];
    NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(WIDTH*2, HEIGHT/2)];
    animation.values = @[value0, value1, value2, value3, value4, value5];
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];//设置动画的节奏
    animation.duration = 2.0f;
    [self.centerView.layer addAnimation:animation forKey:@"keyFrameAnimation"];
}

Super_Yuan.gif

/**
 path动画
 */
- (void)pathAnimation{
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(WIDTH/2-100, HEIGHT/2-100, 200, 200)];
    animation.path = path.CGPath;
    animation.duration = 2.0f;
    [self.centerView.layer addAnimation:animation forKey:@"pathAnimation"];
}

Super_Yuan.gif

/**
 抖动动画
 */
- (void)shakeAnimation{
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];//在这里@"transform.rotation"==@"transform.rotation.z"
    NSValue *value1 = [NSNumber numberWithFloat:-M_PI/180*4];
    NSValue *value2 = [NSNumber numberWithFloat:M_PI/180*4];
    NSValue *value3 = [NSNumber numberWithFloat:-M_PI/180*4];
    animation.values = @[value1,value2,value3];
    //重复次数
    animation.repeatCount = MAXFLOAT;
    [self.centerView.layer addAnimation:animation forKey:@"shakeAnimation"];
}

Super_Yuan.gif

3.CAAnimationGroup

/**
 同时执行的动画组
 */
- (void)groupAnimation1{
    //位移
    CABasicAnimation * animation1 = [CABasicAnimation animationWithKeyPath:@"position"];
    animation1.fromValue = [NSValue valueWithCGPoint:self.view.center];
    animation1.toValue = [NSValue valueWithCGPoint:CGPointMake(40, self.view.center.y)];
    //缩放
    CABasicAnimation * animation2 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    animation2.fromValue = [NSNumber numberWithFloat:0.3f];
    animation2.toValue = [NSNumber numberWithFloat:1.0f];
    
    CAAnimationGroup * groupAnimation = [CAAnimationGroup animation];
    groupAnimation.animations = @[animation1, animation2];
    groupAnimation.duration = 2.0f;
    [self.centerView.layer addAnimation:groupAnimation forKey:@"groupAnimation1"];
}

Super_Yuan.gif

/**
 *  顺序执行的组动画
 */
-(void)groupAnimation2{
    CFTimeInterval currentTime = CACurrentMediaTime();
    //位移动画
    CABasicAnimation *anima1 = [CABasicAnimation animationWithKeyPath:@"position"];
    anima1.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, HEIGHT/2-75)];
    anima1.toValue = [NSValue valueWithCGPoint:CGPointMake(WIDTH/2, HEIGHT/2-75)];
    anima1.beginTime = currentTime;
    anima1.duration = 1.0f;
    anima1.fillMode = kCAFillModeForwards;
    anima1.removedOnCompletion = NO;
    [self.centerView.layer addAnimation:anima1 forKey:@"aa"];
    
    //缩放动画
    CABasicAnimation *anima2 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    anima2.fromValue = [NSNumber numberWithFloat:0.8f];
    anima2.toValue = [NSNumber numberWithFloat:2.0f];
    anima2.beginTime = currentTime+1.0f;
    anima2.duration = 1.0f;
    anima2.fillMode = kCAFillModeForwards;
    anima2.removedOnCompletion = NO;
    [self.centerView.layer addAnimation:anima2 forKey:@"bb"];
    
    //旋转动画
    CABasicAnimation *anima3 = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
    anima3.toValue = [NSNumber numberWithFloat:M_PI*4];
    anima3.beginTime = currentTime+2.0f;
    anima3.duration = 1.0f;
    anima3.fillMode = kCAFillModeForwards;
    anima3.removedOnCompletion = NO;
    [self.centerView.layer addAnimation:anima3 forKey:@"cc"];
}

Super_Yuan.gif

未完待续.....