IOS-动画Animation
2015-07-28 18:26
369 查看
iOS Animation详解
本篇只要讲解iOS中动画的使用.Animtion主要分为两类:UIView动画和CoreAnimation动画。
UIView动画有UIView属性动画,UIViewBlock动画,UIViewTransition动画。
而CoreAnimation动画主要通过CAAnimation和CALayer,常用的有CABasicAnimation,CAKeyframeAnimation,CATransition,CAAnimationGroup.
UIView动画
UIView属性动画CGRect viewRect = CGRectMake(10,10,200,200); self.myView= [[UIView alloc] initWithFrame:viewRect]; self.myView.backgroundColor = [UIColor whiteColor]; [self.view addSubview:self.myView]; //1 准备动画 //参数1: 动画的作用, 任意字符串,用来区分多个动画, 参数二: 传递参数用 nil:OC中使用 [UIView beginAnimations:@"changeSizeAndColor" context:nil]; //在准备动画的时候可以设置动画的属性 [UIView setAnimationDuration:0.7]; [UIView setAnimationDelegate:self]; [UIView setAnimationWillStartSelector:@selector(startAnimation)]; [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];//动画的曲线 [UIView setAnimationRepeatCount:2]; [UIView setAnimationRepeatAutoreverses:YES];//动画往返执行, 必须设置动画的重复次数 //2 修改view的属性, 可以同时修改多个属性 注意:不是所有的属性都可以修改的(只有frame, center, bounds, backgroundColor, alpha, transform 可以修改) self.myView.frame = CGRectMake(110, 100, 100, 100); self.myView.backgroundColor = [UIColor colorWithRed:arc4random() % 256 / 255.0 green:arc4random() % 256 / 255.0 blue:arc4random() % 256 / 255.0 alpha:0.5]; //3 提交并执行动画 [UIView commitAnimations];
Block动画
Block动画的实质是对UIView动画的封装第一种
[UIView animateWithDuration:2 animations:^{ self.myView.backgroundColor = [UIColor orangeColor]; }];
第二种
[UIView animateWithDuration:2 animations:^{ self.myView.backgroundColor = [UIColor orangeColor]; } completion:^(BOOL finished) { //finished判断动画是否完成 if (finished) { NSLog(@"finished"); } }];
第三种
[UIView animateWithDuration:2 delay:1 options:UIViewAnimationOptionCurveEaseInOut animations:^{ // 设置要修改的View属性 self.myView.backgroundColor = [UIColor orangeColor]; } completion:^(BOOL finished) { //finished判断动画是否完成 if (finished) { NSLog(@"finished"); } }];
下面是AnimationOptionCurve参数:
UIViewAnimationOptionTransitionNone = 0 << 20, // default UIViewAnimationOptionTransitionFlipFromLeft = 1 << 20, UIViewAnimationOptionTransitionFlipFromRight = 2 << 20, UIViewAnimationOptionTransitionCurlUp = 3 << 20, UIViewAnimationOptionTransitionCurlDown = 4 << 20, UIViewAnimationOptionTransitionCrossDissolve = 5 << 20, UIViewAnimationOptionTransitionFlipFromTop = 6 << 20, UIViewAnimationOptionTransitionFlipFromBottom = 7 << 20,
CoreAnimation动画
Core Animation是一组非常强大的动画处理API,使用它能做出非常绚丽的动画效果,而且往往是事半功倍,使用它需要添加QuartzCore .framework和引入对应的框架CABasicAnimation基本动画
CABasicAnimation基本动画没有真正的修改属性值
初始化UIView的layer
CGRect viewRect = CGRectMake(50,100,200,200); self.myView= [[UIView alloc] initWithFrame:viewRect]; self.myView.backgroundColor = [UIColor whiteColor]; self.myView.layer.cornerRadius = 100;//设置圆角, 参数是内切圆的半径, 若想画一个圆, 前提是view必须是正方形, 参数应该是view边长的一半 self.myView.layer.borderWidth = 5;//设置描边的宽度 self.myView.layer.borderColor = [UIColor orangeColor].CGColor;//设置描边的颜色(UIView上的颜色使用的是UIColor, CALayer上使用的颜色是CGColor) self.myView.layer.shadowOffset = CGSizeMake(50, 100);//设置阴影的偏移量 width影响水平偏移(正右负左), height影响垂直偏移(正下负上) self.myView.layer.shadowColor = [UIColor redColor].CGColor;//阴影的偏移的颜色 self.myView.layer.shadowOpacity = 0.5;//阴影的不透明度, 取值范围(0 ~ 1), 默认是0, 就是透明的 [self.view addSubview:self.myView];
动画方法:
//1 创建并指定要修改的属性 // KeyPath:CAlayer的属性名, 不是所有的属性都可以, 只有在头文件中出现animatable的属性才可以, 可以修改属性的属性, 例如:bounds.size CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"bounds"]; [basic setDuration:0.7]; //2 修改属性值 basic.fromValue = [NSValue valueWithCGRect:CGRectMake(0, 0, self.myView.bounds.size.width, self.myView.bounds.size.height)]; basic.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 300, 300)]; //3 添加动画 //key做区分动画用 [self.myView.layer addAnimation:basic forKey:@"changColor"];
CAKeyframeAnimation关键帧动画
示例1,和上面的动画一样
//1 创建动画 CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animationWithKeyPath:@"bounds"]; [keyFrame setDuration:2]; //2 修改属性 keyFrame.values = @[[NSValue valueWithCGRect:CGRectMake(0, 0, self.myView.bounds.size.width, self.myView.bounds.size.height)], [NSValue valueWithCGRect:CGRectMake(0, 0, 250, 250)], [NSValue valueWithCGRect:CGRectMake(0, 0, 300, 300)]]; //keyTimes:值代表了出现动画的时刻, 值得范围是0~1, 值必须是递增的, keyTimes和values是一一对应的 keyFrame.keyTimes = @[@(0.4), @(0.6), @(1)]; //3 添加动画 [self.myView.layer addAnimation:keyFrame forKey:@"keyFrame"];
示例2,改变颜色
CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"]; [keyFrame setDuration:3]; keyFrame.values = @[(id)[UIColor redColor].CGColor, (id)[UIColor orangeColor].CGColor, (id)[UIColor yellowColor].CGColor, (id)[UIColor greenColor].CGColor, (id)[UIColor blueColor].CGColor]; keyFrame.keyTimes = @[@(0.3), @(0.5), @(0.6), @(0.7), @(0.9)]; [self.myView.layer addAnimation:keyFrame forKey:nil];
CATransaction 过度动画
//1 创建 CATransition *transition = [CATransition animation]; [transition setDuration:2]; //2 设置过度样式 transition.type = kCATransitionReveal;//控制样式 transition.subtype = kCATransitionFromTop;//控制方向 //添加动画 [self.myView.layer addAnimation:transition forKey:nil];
CAAnimationGroup 组动画
//1 创建并指定要修改的属性 // KeyPath:CAlayer的属性名, 不是所有的属性都可以, 只有在头文件中出现animatable的属性才可以, 可以修改属性的属性, 例如:bounds.size // CALayer CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"bounds"]; [basic setDuration:2]; //2 修改属性值 basic.fromValue = [NSValue valueWithCGRect:CGRectMake(0, 0, self.myView.bounds.size.width, self.myView.bounds.size.height)]; basic.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 300, 300)]; CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"]; [keyFrame setDuration:2]; keyFrame.values = @[(id)[UIColor redColor].CGColor, (id)[UIColor orangeColor].CGColor, (id)[UIColor yellowColor].CGColor, (id)[UIColor greenColor].CGColor, (id)[UIColor blueColor].CGColor]; //keyTimes中的第一个值是0, 不能修改 keyFrame.keyTimes = @[@(0.3), @(0.5), @(0.6), @(0.7), @(0.9)]; // 创建 //当group动画的时长 > 组中所有动画的最长时长, 动画的时长以组中最长的时长为准 //当group动画的时长 < 组中所有动画的最长时长, 动画的时长以group的时长为准 //最合适: group的时长 = 组中所有动画的最长时长 CAAnimationGroup *group = [CAAnimationGroup animation]; [group setDuration:10]; //设置组动画 group.animations = @[basic, keyFrame]; //添加动画 [self.myView.layer addAnimation:group forKey:nil];
//**平移动画** CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"position"]; // 动画持续1秒 anim.duration =1; //因为CGPoint是结构体,所以用NSValue包装成一个OC对象 anim.fromValue = [NSValue valueWithCGPoint:CGPointMake(50, 50)]; anim.toValue = [NSValue valueWithCGPoint:CGPointMake(100, 100)]; //通过MyAnim可以取回相应的动画对象,比如用来中途取消动画 [layer addAnimation:anim forKey:@"MyAnim"]; //**缩放动画** CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"]; //没有设置fromValue说明当前状态作为初始值 //宽度(width)变为原来的2倍,高度(height)变为原来的1.5倍 anim.toValue = [NSValuevalueWithCATransform3D:CATransform3DMakeScale(2, 1.5, 1)]; anim.duration = 1; [layer addAnimation:anim forKey:nil]; /**/旋转动画** CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"]; //这里是以向量(1, 1, 0)为轴,旋转π/2弧度(90°) //如果只是在手机平面上旋转,就设置向量为(0, 0, 1),即Z轴 anim.toValue = [NSValuevalueWithCATransform3D:CATransform3DMakeRotation(M_PI_2, 1, 1, 0)]; anim.duration = 1; [layer addAnimation:anim forKey:nil];
UIImageView的帧动画
UIImageView可以让一系列的图片在特定的时间内按顺序显示 .
相关属性解析:
animationImages:要显示的图片(一个装着UIImage的NSArray) . animationDuration:完整地显示一次animationImages中的所有图片所需的时间 . animationRepeatCount:动画的执行次数(默认为0,代表无限循环)
相关方法解析:
- (void)startAnimating; 开始动画 . - (void)stopAnimating; 停止动画 . - (BOOL)isAnimating; 是否正在运行动画.
重点内容
参考文档
http://www.pocketdigi.com/20150105/1413.html
/article/7083289.html
/article/3488014.html
相关文章推荐
- 终于理解POST请求和批量获取数据
- IOS的ARC导致内存泄露的几种情况和具体解决方案
- iOS 之选择器(Selector)
- iOS 将崩溃Log日志重定向输出到文件中保存
- Xcode 配置文件 xcconfig 使用实践
- iOS中ARC内部原理
- iOS正则表达式(二)
- IOS:Warning: Attempt to dismiss from view controller <xxxxxxxxxController: 0x15bd67f0> while a prese
- iOS省市区字典封装
- IOS编程常用字体
- iOS事件机制(一)
- iOS- xib(nib) 的重用(在有些情况下有利于加快项目功能的实现)
- [iOS]调用layoutSubViews方法(有的时候为啥会调用2遍)
- iOS 应用程序的生命周期详解
- iOS中IMP指针的运用
- IOS- 得到系统版本
- iOS多态
- iOS开发使用nib进行界面设计并跳转
- iOS—修改AFNetworking源文件可接收text/plain的方法
- IOS-写文件到本地