目标
掌握 CoreAnimation 常用工具类
了解 iPhone 产品设计流程
掌握产品设计原型软件
1、掌握 Core Animation 常用工具类
Core Animation 于 UIKit动画之间一个关键区别在于 Core Animation 有多个专门的类处理动画。一个动画类,定义了特定动画的独特属性,使用这些类,可以将整个图层作为动画或进行切换,也可以只对图层d特定属性进行动画。
常用动画类:
CABasicAnimation 简单的为图层的属性提供修改。 很多图层的属性修改默认会执行这个动画类。比如大小,透明度,颜色等属性
CAKeyframeAnimation 支持关键帧动画,你可以指定的图层属性的关键路径动画,包括动画的每个阶段的价值,以及关键帧时间和计时功能的一系列值。在 动画运行是,每个值被特定的插入值替代
CATransitionAnimation 整个图层切换,提供了一个图层变化的过渡效果,它能影响图层的整个内容。 动画进行的时候淡入淡出(fade)、推(push)、显露(reveal)图层的内容。
CAAnimationGroup 允许一系列动画效果组合在一起,并行显示动画
自定义动画的步骤:
1、创建一个新的 CAAnimation 子类对象
2、定义动画的属性
3、将动画赋予一个图层,iOS 就会自动在一个单独线程中处理动画
例子:
//创建动画类对象
CABasicAnimation*anim = [CABasicAnimationanimation];
//设置动画属性的结束值
anim.toValue= (id)[UIColor blueColor].CGColor;
//设置动画的时长 1 秒
anim.duration= 1;
//设置动画自动反转,最后变回原样
anim.autoreverses=YES;
//添加动画到图层中,指定这个动画修改那个属性
[self.view.layer addAnimation:anim forKey:@"backgroundColor"];
#import"DemoCAView.h"
#import<QuartzCore/QuartzCore.h>
//使用新建的类,专门管理动画
@implementation DemoCAView
//设置动画所需要的图层组件
- (void)setupInstanceVariables{
ball = [[UIView alloc] initWithFrame:CGRectMake(20, 40, 20, 20)];
ball.backgroundColor = [UIColor blackColor];
box = [[UIView alloc] initWithFrame:CGRectMake(20, 80, 200, 200)];
box.backgroundColor = [UIColor redColor];
[self addSubview:box];
[self addSubview:ball];
}
//Demo1
- (void)animateColors{
//设置动画转换的类型type = reveal
CATransition *trans = [CATransition animation];
trans.type = kCATransitionReveal;
trans.subtype = kCATransitionFromLeft;
trans.duration = .5;
//在图层上面添加动画,指明 key = :@"transition"
[box.layer addAnimation:trans forKey:@"transition"];
//把图层背景颜色还原
box.layer.backgroundColor = [UIColor blueColor].CGColor;
//创建一个关键帧的动画对象控制动画过程中多种颜色的切换
//动画过程中,分别显示颜色为 yellow, green and blue
//把这些颜色作为集合放入动画对象
CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
animation.values = [NSArray arrayWithObjects:
(id)box.layer.backgroundColor,
(id)[UIColor yellowColor].CGColor,
(id)[UIColor greenColor].CGColor,
(id)[UIColor blueColor].CGColor,nil];
animation.duration = 3;
animation.autoreverses = YES;
[box.layer addAnimation:animation forKey:@"backgroundColor"];
}
- (void)animateRotate{
//创建一个基本的动画对象,沿着 z 轴旋转
CABasicAnimation *spin = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
//设置旋转到 2*PI 的地方终止
spin.toValue = [NSNumber numberWithDouble:M_PI*2];
//设置循环多次.....
spin.repeatCount= 1e100;
//设置动画的时长为 1.5 秒,每 1.5 秒转 2*PI 的角度
spin.duration = 1.5;
[box.layer addAnimation:spin forKey:@"transform"];
}
- (void)animateFlip{
//Step 1: 创建基本的 y 轴旋转的动画
CABasicAnimation *flip = [CABasicAnimation
animationWithKeyPath:@"transform.rotation.y"];
//让动画到哪里结束
flip.toValue= [NSNumbernumberWithDouble:-M_PI];
//Step 2: 创建基本的缩放动画 scale animation
CABasicAnimation *scale = [CABasicAnimation
animationWithKeyPath:@"transform.scale"];
scale.toValue= [NSNumbernumberWithDouble:.9]; //设置动画结束时的值
scale.duration = .5; //设置动画时长
scale.autoreverses= YES;//设置自动翻转
//Step 3: 将缩放和翻转动画组合成一个动画组
CAAnimationGroup*group = [CAAnimationGroupanimation];
group.animations= [NSArrayarrayWithObjects:flip,scale, nil];
//设置计时函数,这里使用的是渐出的效果
/*
计时函数效果,控制动画过程中 动作的快慢效果
NSString * const kCAMediaTimingFunctionLinear; 线性
NSString * const kCAMediaTimingFunctionEaseIn; 渐入
NSString * const kCAMediaTimingFunctionEaseOut; 渐出
NSString * const kCAMediaTimingFunctionEaseInEaseOut; 渐入渐出
NSString * const kCAMediaTimingFunctionDefault; 默认
*/
group.timingFunction = [CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionEaseIn];
group.duration = 1;
/*
填充模式
NSString * const kCAFillModeRemoved; 移除
NSString * const kCAFillModeForwards; 前进
NSString * const kCAFillModeBackwards; 后退
NSString * const kCAFillModeBoth; 两边
NSString * const kCAFillModeFrozen; 冻结
*/
//group.fillMode = kCAFillModeForwards;
group.fillMode= kCAFillModeRemoved;
group.removedOnCompletion= NO;
//Step 4: 把动画组合,放入我们的图层中
[box.layer addAnimation:group forKey:@"flip"]; //flip 轻弹
}
- (void)animateDrop{
// 创建关键路径的动画 keyframe animation
CAKeyframeAnimation*animation = [CAKeyframeAnimationanimation];
CGMutablePathRefaPath = CGPathCreateMutable();
CGPathMoveToPoint(aPath,nil,20,40); //起点Origin Point
CGPathAddCurveToPoint(aPath,nil, 160,30, //控制点1 Control Point 1
220,220, //控制点2 Control Point 2
240,380); //终点 End Point
animation.rotationMode= @"auto"; //循环模式
animation.path= aPath;
animation.duration= 1;
animation.timingFunction= [CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionEaseIn];
[ball.layer addAnimation:animation forKey:@"position"];
CFRelease(aPath);
}
- (void)dealloc {
[superdealloc];
}
@end
2、了解 iPhone 产品设计流程
(1)创意第一;
(2)确定功能,精简设计ADS
(3)草图设计
(4)低仿真模型
(5)高仿真模型
(6)作图,切图
(7)编写代码
(8)测试
(9)上线
3、掌握产品设计原型软件
justinmind 公司推出的 Protptyper 软件。