我的ui学习第三天，动画的制作

进入UI学习的第4天，今天上午主要讲了UIview的简单动画制作，就是将两个视图放在界面上，通过改变视图的左顶点来使视图成动态效果，通过关联一个按钮，按下按钮后视图就会移动和旋转。

#define WIDTH (int)self.view.bounds.size.width

#define HEIGHT (int)self.view.bounds.size.height

#endif

 

@interface ViewController () {

    int x, y;

}

 

@end

 

@implementation ViewController

 

- (void)viewDidLoad {

    [super viewDidLoad];

    //创建视图

    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(20, 20, 100, 100)];

    view.tag = 101;

    view.backgroundColor = [UIColor redColor];

    [self.view addSubview:view];

    

    UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(200, 200, 150, 150)];

    view2.tag = 102;

    view2.backgroundColor = [UIColor purpleColor];

    [self.view addSubview:view2];

    //将图片放入视图中

    UIImageView *view3 = [[UIImageView alloc] initWithFrame:CGRectMake(50, 400, 275, 180)];

    // PNG图片不用写后缀

    // JPG和GIF需要写后缀 苹果原生的UIImage显示GIF是静态的

    view3.image = [UIImage imageNamed:@"test.gif"];

    [self.view addSubview:view3];

    //创建按钮

    UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];

    button.frame = CGRectMake(WIDTH - 80, HEIGHT - 60, 60, 40);

    button.layer.borderWidth = 1;

    [button setTitle:@"OK" forState:UIControlStateNormal];

    [button addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];

    [self.view addSubview:button];

}

//点击按钮会发生的事件

- (void) buttonClicked:(UIButton *) button {

    UIView *view = [self.view viewWithTag:101];

    CGFloat oldX = view.frame.origin.x;

    CGFloat oldY = view.frame.origin.y;

    x = arc4random() % (WIDTH - 100);

    y = arc4random() % (HEIGHT - 100);

    //添加动画效果

    [UIView animateWithDuration:1.2 animations:^{

        view.frame = CGRectMake(x, y, 100, 100);

        //使视图旋转

        view.transform = CGAffineTransformRotate(view.transform, M_PI * 16 / 17);

        [self.view addSubview:view];

    } completion:^(BOOL finished) {

        view.frame = CGRectMake(oldX, oldY, view.frame.size.width, view.frame.size.height);

    }];

    

    UIView *view2 = [self.view viewWithTag:102];

    [UIView animateWithDuration:1.2 animations:^{

        // 使用仿射变换函数完成对视图的旋转

        view2.transform = CGAffineTransformRotate(view2.transform, M_PI_4);

    }];

}

 

@end

 上午讲的第二个动画便是讲12个月份分别创建12个标签 ，点击标签就进入下一个标签。（for循环）首先创建12个标签，将12个标签分别加上文字和颜色，点击标签就进入下一个标签的方法的实现就是创建一个uilabel的子类，然后重写uilabel的

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event方法。

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {

    // 设置开启一个动画环境

    [UIView beginAnimations:nil context:nil];

    // 指定动画的执行时间

    [UIView setAnimationDuration:1.2];

    // 设置过渡(转场)效果

    // 第二个参数要指定当前视图的父视图

    [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:self.superview cache:YES];

    [self removeFromSuperview];

    // 提交动画结束动画环境

    [UIView commitAnimations];

}

 

//创建12个标签，附上文字和颜色

- (void)viewDidLoad {

    [super viewDidLoad];

    

    for (int i = 12; i >= 1; i--) {

        UILabel *label = [[CDMonthLabel alloc] initWithFrame:self.view.bounds];

        // UIView的子类除了UIControl分支其他子类都默认

        // 将userInteractionEnabled属性设置为NO

        // 表示不允许用户交互 如果需要交互则设置成YES

        label.userInteractionEnabled = YES;

        //颜色设成随机色

        label.backgroundColor = [CDUtility randomColor];

        label.text = [NSString stringWithFormat:@"%d月", i];

        label.textAlignment = NSTextAlignmentCenter;

        label.font = [UIFont systemFontOfSize:72];

        [self.view addSubview:label];

    }

}

 //随机颜色的生成

+ (UIColor *) randomColor {

    CGFloat red = (arc4random() % 128 + 128) / 255.0;

    CGFloat green = (arc4random() % 128 + 128) / 255.0;

    CGFloat blue = (arc4random() % 128 + 128) / 255.0;

    

    return [UIColor colorWithRed:red green:green blue:blue alpha:1];

}

 上午的第三个动画，动画的制作室用timer使图片一张接一张的显示，从而使图片成动态

- (void)viewDidLoad {

    [super viewDidLoad];

    

    UIImage *image = [UIImage imageNamed:@"runner0.jpg"];

    

    imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, image.size.width, image.size.height)];

    imageView.center = CGPointMake(image.size.width / 2, self.view.bounds.size.height / 2);

    // 创建一个数组来保存UIImageView需要的动画图片

    NSMutableArray *imagesArray = [NSMutableArray array];

    for (int i = 0; i <= 5; i++) {

        UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"runner%d.jpg", i]];

        [imagesArray addObject:image];

    }

    // 设置UIImageView的动画图片

    imageView.animationImages = imagesArray;

    // 设置动画的执行时间(将所有动画图片播放一轮的时间)

    imageView.animationDuration = 0.6;

    

    [imageView startAnimating];

    [self.view addSubview:imageView];

    //用timer实现图片的动态效果

    timer = [NSTimer scheduledTimerWithTimeInterval:0.01 target:self selector:@selector(runAhead:) userInfo:nil repeats:YES];

}

 

- (void) runAhead:(NSTimer *) sender {

    UIImage *image = [UIImage imageNamed:@"runner0.jpg"];

    

    CGRect rect = imageView.frame;

    rect.origin.x += 1;

    //如果到屏幕的边框了就将图片的x变反，然后动画就会从屏幕的左边出来了

    if (rect.origin.x > self.view.bounds.size.width) {

        rect.origin.x = - image.size.width;

    }

    imageView.frame = rect;

}

 

- (void) dealloc {

    if (timer) {

        [timer invalidate];

        timer = nil;

    }

}

 

@end