1、简介
一个优秀的应用少不了多彩的动画效果
iOS提供了多种动画效果的实现,包括一般动画、核心动画等
2、简单动画
头尾式
// 头尾式动画实现动画效果非常简单,秩序要三步 // 头尾式动画只能实现简单的效果,如UIView的移动,颜色渐变等 // 1.开始动画 [UIView beginAnimations:nil context:nil]; // 2.设置动画时间 [UIView setAnimationDuration:3.0]; // 需要实现的动画效果 // 3.提交动画 [UIView commitAnimations];
Block式
// Block式动画只需要将需要实现的动画效果代码添加到Block块即可 [UIView animateWithDuration:0.5 animations:^{ // 需要实现的动画效果 }];
序列帧式
// 序列帧动画也叫电影式动画 // 利用电影的原理实现原理,将图片一张张的播放出来即可 // 序列帧动画只适合少量的图片的情况,大量图片会占用太多内存资源 // 创建存放图片的数组,以四张图片为例 NSMutableArray *imageArray = [NSMutableArray array]; for (int i=1; i<=4; i++) { UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"%02d",i]]; [imageArray addObject:image]; } // 创建显示图片的控件 UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(x, y, w, h)]; [self.view addSubview:imageView]; // 设置图片空间的图片数组 imageView.animationImages = imageArray; // 设置动画的时间,即播放一次所需要的时间 imageView.animationDuration = 5; // 设置动画的重复次数,默认为0,也就是无限循环 imageView.animationRepeatCount = 0; // 开始执行动画 [imageView startAnimating]; // 说明:使用序列帧动画可能需要判断动画执行的状态 // stopAnimating 停止播放 // isAnimating 是否正在播放
3、基础动画
// 基础动画主要是旋转、缩放、平移等动画效果 // iOS提供了CABasicAnimation类供我们使用 // 基础动画常用属性 // keyPath : 动画类型 // duration : 动画时间 // removedOnCompletion : 是否维持动画效果 // fillMode : 动画模式 // 1.translation // 动画对象 CABasicAnimation *animation = [CABasicAnimation animation]; // 动画类型 animation.keyPath = @"transform.translation"; /** * translation 整体平移 * * byValue 移动的距离 * * @param 125 x方向移动的距离 * @param 105 y方向移动的距离 */ animation.byValue = [NSValue valueWithCGPoint:CGPointMake(125, 105)]; // 执行时间 animation.duration = 1; // 是否保持动画执行后的效果 animation.removedOnCompletion = NO; // 动画模式 animation.fillMode = kCAFillModeForwards; // 向执行动画的图层添加动画 [self.imageView.layer addAnimation:animation forKey:nil]; // 2.position CABasicAnimation *animation = [CABasicAnimation animation]; animation.keyPath = @"position"; /** * position 整体平移 * * 坐标为view的中心移动后的坐标 * */ // 第一种形式,移动到某位置 // 以最初的位置为起点,移动相同的路径,包括距离和方向 // animation.toValue = [NSValue valueWithCGPoint:CGPointMake(0, 0)]; // 第二种形式,每次偏移量为 animation.byValue = [NSValue valueWithCGPoint:CGPointMake(10, 10)]; animation.duration = 1; animation.removedOnCompletion = NO; animation.fillMode = kCAFillModeForwards; [self.imageView.layer addAnimation:animation forKey:nil]; // 3.rotation CABasicAnimation *animation = [CABasicAnimation animation]; animation.keyPath = @"transform.rotation"; /** * rotation 同心旋转 * * @param M_PI_2 正数是向右旋转 */ animation.byValue = @(M_PI_2); animation.duration = 1; animation.removedOnCompletion = NO; animation.fillMode = kCAFillModeForwards; [self.imageView.layer addAnimation:animation forKey:nil]; // 4.bounds CABasicAnimation *animation = [CABasicAnimation animation]; animation.keyPath = @"bounds"; /** * bounds 以view中心为起始点改变大小 * * @param 0 设置值不起作用 * @param 0 设置值不起作用 * @param 60 改变之后的宽度 * @param 60 改变之后的高度 */ animation.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 60, 60)]; animation.duration = 1; animation.removedOnCompletion = NO; animation.fillMode = kCAFillModeForwards; [self.imageView.layer addAnimation:animation forKey:nil]; // 5.scale CABasicAnimation *animation = [CABasicAnimation animation]; animation.keyPath = @"transform.scale"; /** * scale 以view中心为起始点缩放 * * @param -0.5 缩小0.5倍 */ animation.byValue = @-0.5; animation.duration = 1; animation.removedOnCompletion = NO; animation.fillMode = kCAFillModeForwards; [self.imageView.layer addAnimation:animation forKey:nil];
4、转场动画
// 转场动画多用于视图的切换,即从一个视图过度到另一个视图,因此也叫做过度动画 // iOS提供CATransition实现转场动画效果 // 转场动画常用属性 // 动画类型 type // 动画时间 duration // 动画方向 subtype // 转场动画 CATransition *animation = [CATransition animation]; // 动画类型 animation.type = @"rippleEffect"; // 动画时间 animation.duration = 1; // 动画方向 animation.subtype = @"kCATransitionFromLeft"; // 添加动画 [self.imageView.layer addAnimation:animation forKey:nil];
5、关键帧动画
// 关键帧动画可以认为是某一个UIView按照一定的路线的移动 UIImageView *imageView = [[UIImageView alloc] init]; imageView.backgroundColor = [UIColor cyanColor]; imageView.layer.masksToBounds = YES; imageView.layer.cornerRadius = 15; imageView.bounds = CGRectMake(0, 0, 30, 30); imageView.center = CGPointMake(290, 190); [self.view addSubview:imageView]; // 创建帧动画对象 CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animation]; // 类型 keyAnimation.keyPath = @"position"; // 路径 // 优先级:path > values /* keyAnimation.values = @[[NSValue valueWithCGPoint:CGPointMake(290, 190)], [NSValue valueWithCGPoint:CGPointMake(160, 60)], [NSValue valueWithCGPoint:CGPointMake(30, 190)], [NSValue valueWithCGPoint:CGPointMake(160, 320)], [NSValue valueWithCGPoint:CGPointMake(290, 190)]]; */ // 时间 keyAnimation.duration = 1; // 节奏 keyAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; // 创建路径:保存绘图信息 CGMutablePathRef path = CGPathCreateMutable(); // 绘制图形 // ellipse 椭圆形 // 路径对象、NULL即可、椭圆形的外切四边形的frame CGPathAddEllipseInRect(path, NULL, CGRectMake(30, 60, 260, 260)); // 动画路径 keyAnimation.path = path; CFRelease(path); // 保存动画效果 keyAnimation.removedOnCompletion = NO; keyAnimation.fillMode = kCAFillModeForwards; // 添加动画 // 将动画添加到imageView所在的图层 [imageView.layer addAnimation:keyAnimation forKey:nil];
6、组动画
// 组动画就是将不同的动画效果同时执行的动画 // iOS提供了CAAnimationGroup实现组动画 // 组动画基本步骤 // 1.创建组动画对象 // 2.创建不同的动画效果 // 3.将不同的动画效果加入到组动画 // 4.添加动画到图层 UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(20, 20, 40, 40)]; imageView.backgroundColor = [UIColor orangeColor]; [self.view addSubview:imageView]; // 动画组 CAAnimationGroup *animationGroup = [CAAnimationGroup animation]; // 平移 CABasicAnimation *position = [CABasicAnimation animation]; position.keyPath = @"position"; position.toValue = [NSValue valueWithCGPoint:CGPointMake(160, 240)]; // 旋转 CABasicAnimation *rotation = [CABasicAnimation animation]; rotation.keyPath = @"transform.rotation"; rotation.toValue = @(M_PI); // 缩放 CABasicAnimation *scale = [CABasicAnimation animation]; scale.keyPath = @"transform.scale"; scale.toValue = @(1.5); // 时间 animationGroup.duration = 1; // 将动画添加到动画组 animationGroup.animations = @[position, rotation, scale]; // 添加动画组到图层 [imageView.layer addAnimation:animationGroup forKey:nil];