蓝懿 iOS 动画Animation

iOS Animation详解

本篇只要讲解iOS中动画的使用. Animtion主要分为两类：UIView动画和CoreAnimation动画。 UIView动画有UIView属性动画，UIViewBlock动画，UIViewTransition动画。而CoreAnimation动画主要通过CAAnimation和CALayer，常用的有CABasicAnimation,CAKeyframeAnimation,CATransition,CAAnimationGroup.

UIView动画

UIView属性动画

<code class="hljs" objectivec="">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];</code>

Block动画

Block动画的实质是对UIView动画的封装

第一种

<code class="hljs" objectivec=""> [UIView animateWithDuration:2 animations:^{

self.myView.backgroundColor = [UIColor orangeColor];

}];</code>

第二种

<code class="hljs" objectivec=""> [UIView animateWithDuration:2 animations:^{

self.myView.backgroundColor = [UIColor orangeColor];

} completion:^(BOOL finished) {

//finished判断动画是否完成

if (finished) {

NSLog(@finished);

}

}];</code>

第三种

<code class="hljs" objectivec=""> [UIView animateWithDuration:2 delay:1 options:UIViewAnimationOptionCurveEaseInOut animations:^{

// 设置要修改的View属性

self.myView.backgroundColor = [UIColor orangeColor];

} completion:^(BOOL finished) {

//finished判断动画是否完成

if (finished) {

NSLog(@finished);

}

}];</code>

下面是AnimationOptionCurve参数：

<code class="hljs" haskell=""> 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,</code>

CoreAnimation动画

Core Animation是一组非常强大的动画处理API,使用它能做出非常绚丽的动画效果,而且往往是事半功倍,使用它需要添加QuartzCore .framework和引入对应的框架

CABasicAnimation基本动画

CABasicAnimation基本动画没有真正的修改属性值

初始化UIView的layer

<code avrasm="" class="hljs"> 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];</code>

动画方法：

<code avrasm="" class="hljs"> //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];

</code>

CAKeyframeAnimation关键帧动画

示例1，和上面的动画一样

<code avrasm="" class="hljs"> //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]; </code>

示例2，改变颜色

<code class="hljs" objectivec=""> 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];</code>

CATransaction 过度动画

<code class="hljs" oxygene=""> //1 创建

CATransition *transition = [CATransition animation];

[transition setDuration:2];

//2 设置过度样式

transition.type = kCATransitionReveal;//控制样式

transition.subtype = kCATransitionFromTop;//控制方向

//添加动画

[self.myView.layer addAnimation:transition forKey:nil];</code>

CAAnimationGroup 组动画

<code class="hljs" objectivec=""> //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];</code>

<code class="hljs" objectivec="">//**平移动画**

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];</code>

UIImageView的帧动画

1 2	`<code> UIImageView可以让一系列的图片在特定的时间内按顺序显示 .` `</code>`

蓝懿 iOS 动画Animation

iOS Animation详解

UIView动画

Block动画

CoreAnimation动画

UIImageView的帧动画

蓝懿 iOS 动画Animation的相关文章

#在蓝懿iOS学习的日子#

蓝懿 iOS一周学习总结

蓝懿IOS绘图Quartz2D练习

蓝懿 ios的一周学习总结刘国斌老师

蓝懿IOS学习图片编辑器

#蓝懿ios学习的日子#2015年10月12鈤

蓝懿iOS，刘国斌iOS

蓝懿IOS学习SQL数据库

iOS 动画Animation - 5：UIBezier