iOS 第九章 iFlag 项目

目标

掌握 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 软件。

代码下载：：http://vdisk.weibo.com/s/IjXiO