iOS编程------动画

来源:互联网 发布:淘宝潮男衣服店铺推荐 编辑:程序博客网 时间:2024/04/23 18:22
////  ViewController.h//  UI23_Animation////  Created by l on 15/10/7.//  Copyright (c) 2015年 lon. All rights reserved.//#import <UIKit/UIKit.h>@interface ViewController : UIViewController@property (strong, nonatomic) IBOutlet UIImageView *imageView;@property (strong, nonatomic) IBOutlet UITextField *textField;@end////  ViewController.m//  UI23_Animation////  Created by l on 15/10/7.//  Copyright (c) 2015年 lon. All rights reserved.//#import "ViewController.h"#import "SecondViewController.h"@interface ViewController ()@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];#pragma mark ---------------- 动画概述 ----------------------    /* UI23 动画                                  --> 属性动画     CALayer 动画 --> UIView 动画  --> 过渡动画                                  --> 仿射动画     CALayer 层  核心绘制层     CAAnimation 核心动画     */    //一. UIView 动画    //1.属性动画    //UIView 做动画有两种方式, 动画块方式和block方式, 通常我们使用block方式.    //常用的属性有 背景色, alpha, center, frame, bounds等.    //二. CALayer 核心 绘画层    //UIView 和 CALayer 的关系    //UIView 并不进行渲染和绘画,真正负责渲染的是CALayer    //UIView可以看做是CALayer的代理,负责展示内容以及用户进行交互.    //UIView创建的时候带一个CALayer,UIView与绘制和渲染相关的属性其实是CALayer的属性,比如背景颜色.    //CALayer有很多的属性,UIView可以直接使用只是其中一部分,比如CALayer的圆角等.    //1.创建一个CALayer对象    CALayer *layer = [[CALayer alloc] init];    //2.设置属性    layer.frame = CGRectMake(200, 50, 100, 100);    //圆角    layer.cornerRadius = 50; // 0.5 宽    //边框宽度    layer.borderWidth = 2;    //边框颜色    layer.borderColor = [UIColor redColor].CGColor;    //阴影颜色    layer.shadowColor = [UIColor blueColor].CGColor;    //阴影透明度,默认为 0    layer.shadowOpacity = 0.5;    //阴影偏移量    layer.shadowOffset = CGSizeMake(10, 10);    //背景颜色    layer.backgroundColor = [UIColor yellowColor].CGColor;    //锚点    //x , y  0.0 ~ 1.0 之间数    //默认为 0.5 , 0.5 中心点    layer.anchorPoint = CGPointMake(0, 0);    layer.position = CGPointMake(200 + 50, 50 + 50);    // anchorPoint 默认在视图的中心点,    // layer 的postion 就是 anchorPoint 在父坐标系中的位置为 x: frame.x + 0.5 * width    // y: frame.y + 0.5 * height    // 我们通常设置 如果想要设置position 和 frame 相等。则只要设置 锚点为左上角,则 postion 和 frame 就相等了,但是如果之前设置了frame 会发现 更改锚点后,实际位置会发生变化,这是因为    // 本来    // position.x  = frame.x +   0.5 * width    //      250            200         50    // position.y = frame.y + 0.5 *height    //      100           50       50    // frame 为 200 50  position 为 250 100    // 设置锚点为0 。0 后,重新绘制了视图 position 和 frame相等    // 因此frame 变为  200  50  ---->  250 100    //3.添加到父 layer上    [self.view.layer addSublayer:layer];    //需求:设置一张圆角图片,QQ个人头像    //更改imageView的layer    //圆角    _imageView.layer.cornerRadius = 50;    //边框    _imageView.layer.borderWidth = 2;    _imageView.layer.borderColor = [UIColor yellowColor].CGColor;    //边界马赛克, 边界遮罩    _imageView.layer.masksToBounds = YES; //显示到边界    // Do any additional setup after loading the view, typically from a nib.}#pragma mark-------- 1.UIView属性动画------------- (IBAction)propertyAnimation:(id)sender {    //iOS3.0之前UIView的动画方法都是类方法,需要我们把动画写在一个动画块里面.    /*     [UIView beginAnimation:]     //设置动画属性     [UIView commitAnimations]    */    //1.开始动画    [UIView beginAnimations:@"动画名称" context:@"传递给代理的参数"];    //2.设置动画    //动画持续时间,重复几次,是否反转等等.    [UIView setAnimationDuration:2]; //动画时间//    [UIView setAnimationRepeatCount:2];//重复次数//    [UIView setAnimationRepeatAutoreverses:YES];//反转    [UIView setAnimationDelegate:self];//默认就是self    //代理触发的两个方法:    //动画开始之前触发    [UIView setAnimationWillStartSelector:@selector(animationWillStart:context:)];    //动画结束之后触发sel方法    [UIView setAnimationDidStopSelector:@selector(animationDidStop:finished:context:)];    //3.设置动画    _imageView.frame = CGRectMake(275, 50, 100, 100);    //4.提交动画    [UIView commitAnimations];}- (void)animationWillStart:(NSString *)animationID context:(void *)context {    NSLog(@"动画开始");    _imageView.backgroundColor = [UIColor yellowColor];}- (void)animationDidStop:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context {    NSLog(@"动画结束");    //从右边再移动左边    //1.设置开始    [UIView beginAnimations:nil context:nil];    //2.设置动画    [UIView setAnimationDuration:2];    [UIView setAnimationDelegate:self];    [UIView setAnimationDidStopSelector:@selector(propertyAnimation:)];    //3.更改属性    _imageView.frame = CGRectMake(0, 50, 100, 100);    //4.提交动画    [UIView commitAnimations];}// 重复动画- (void)repeatAnimation{    [self propertyAnimation:nil];}#pragma mark---------- 1.1 block 动画 --------------- (IBAction)blockAnimation:(id)sender {    //iOS4.0 使用block封装了 动画块相关的方法,方便我们的使用.    //block 动画方法也是类方法//    [UIView animateWithDuration:2 animations:^{//        _imageView.frame = CGRectMake(275, 50, 100, 100);//    }];    [UIView animateWithDuration:2 animations:^{        _imageView.frame = CGRectMake(275, 50, 100, 100);    } completion:^(BOOL finished) {        [UIView animateWithDuration:2 animations:^{            _imageView.frame = CGRectMake(0, 50, 100, 100);        } completion:^(BOOL finished) {                [self blockAnimation:nil];            }];        }];}#pragma mark ----------- 1.2 过渡动画 ----------/*- (IBAction)translateAnimation:(id)sender {    //1.创建secondVC    SecondViewController *secondVC = [self.storyboard instantiateViewControllerWithIdentifier:@"second"];    secondVC.view.backgroundColor = [UIColor yellowColor];    //2.父视图    UIView *superView = self.view.superview;    //3.过渡动画    //过渡动画也是类方法    //1.自己做动画    //需求, self.view 从父视图上面移除, secondVC.view添加到父视图上    //因此需要做动画的视图为父视图self.view.superView    //参数1 容器视图, 需要做动画的视图    //当block是另一个页面的属性时,页面间传值的时候需要防止重复引用.    __weak typeof(self) WeakSelf = self;//    [UIView transitionWithView:self.view.superview duration:0.5 options:UIViewAnimationOptionTransitionCurlUp animations:^{//        //动画操作 移除当前视图 添加second.view//        [self.view removeFromSuperview];//        //        [superView addSubview:secondVC.view];//       //    } completion:nil];    //方法二. 两个页面间过渡    [UIView transitionFromView:self.view toView:secondVC.view duration:1 options:(UIViewAnimationOptionTransitionCurlUp) completion:nil];    //添加子视图    [self addChildViewController:secondVC];}*/#pragma mark---------- 2. 仿射变换 ------------------static int k = 10;- (IBAction)rotationAnimation:(id)sender {    //仿射变换通常做三种样式的变换    //1.旋转 2.平移 3.缩放    //变换时有基于初始状态和基于上一次变换状态的两种    [UIView animateWithDuration:0.01 animations:^{        //旋转角度单位 -> 弧度    π -> 180角度对应的弧度        //弧度π 角度° π = 180°        //1°对应的弧度 = π / 180°//        _imageView.transform = CGAffineTransformMakeRotation(M_PI);       //(2)以上次变化为基准        CGAffineTransform angle = CGAffineTransformMakeRotation(k * M_PI / 180);        _imageView.transform = angle;         //(1)以原始状态为基准//        _imageView.transform = CGAffineTransformRotate(_imageView.transform, M_PI / 180); //基于上一次状态.    } completion:^(BOOL finished) {        k += 10; //每次增加10        [self rotationAnimation:nil];    }];}#pragma mark------------- 3.1 核心 基本动画 --------- (IBAction)basicAnimation:(id)sender {    //给某一个属性做动画    //"opsition"    //1.创建基本动画对象    CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"position"];    //2.设置起始Value    basic.fromValue = [NSValue valueWithCGPoint:_imageView.layer.position];    //3.结束    basic.toValue = [NSValue valueWithCGPoint:(CGPointMake(325, 100))];    //4.设置动画    basic.duration = 2; //2秒    //5.给layer层添加核心动画 指定做动画的属性    [_imageView.layer addAnimation:basic forKey:@"position"];    //动画结束后,更改position    _imageView.layer.position = CGPointMake(325, 100);}#pragma mark--------- 3.2 关键帧动画 ------------ (IBAction)keyframe:(id)sender {    _textField.backgroundColor = [UIColor redColor];    //实现晃动效果    //1.创建关键帧动画对象,指定属性    CAKeyframeAnimation *keyframe = [CAKeyframeAnimation animationWithKeyPath:@"position.x"];    //2.设置position.x的变化范围    CGFloat centerX = _textField.layer.position.x;    //移动到左边的位置    CGFloat left = centerX - 10;    //右边    CGFloat right = centerX + 10;    //3.创建运动轨迹    NSNumber *l = [NSNumber numberWithFloat:left];    NSNumber *c = [NSNumber numberWithFloat:centerX];    NSNumber *r = [NSNumber numberWithFloat:right];    //4.添加到帧动画的value数组中    keyframe.values = @[l, c, r, l, c, r, l, c, r, l, c, r, l, c, r];    //5.设置动画持续时间    keyframe.duration = 0.5;    //6.添加动画    [_textField.layer addAnimation:keyframe forKey:@"position.x"];}#pragma mark-------- 3.3 组动画 ------------------ (IBAction)groupAnimation:(id)sender {    //1.创建一个动画组//    CAAnimationGroup *group = [[CAAnimationGroup alloc] init];    CAAnimationGroup *group = [CAAnimationGroup animation];    //2.创建基本动画 移动 旋转    //创建移动动画对象    CABasicAnimation *move = [CABasicAnimation animationWithKeyPath:@"position"];    CGFloat centerX = _imageView.layer.position.x;    CGFloat endX = 325;    //起始值value    move.fromValue = [NSValue valueWithCGPoint:(CGPointMake(centerX, 100))];    //最终value    move.toValue = [NSValue valueWithCGPoint:(CGPointMake(endX, 100))];    //设置move动画时间    move.duration = 2;    //创建旋转动画对象    CABasicAnimation *rotation = [CABasicAnimation animationWithKeyPath:@"transform"];    //fromValue    rotation.fromValue = [NSValue valueWithCATransform3D:_imageView.layer.transform];    //toValue    rotation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2, 1, 0, 1)];    //动画时间    rotation.duration = 2;    //3.把多个动画对象添加到动画数组里面    group.animations = @[move, rotation];    group.duration = 2;    //4.给layer添加组动画    [_imageView.layer addAnimation:group forKey:@"group"];}#pragma mark---------- 3.4 核心过渡动画 ----------- (IBAction)translateAnimation:(id)sender {    //1.创建过渡动画对象    CATransition *transition = [CATransition animation];    //2.设置过渡动画类型和动画方式    transition.type = @"cube"; //立方体    //动画执行的方式    transition.subtype = kCATransitionFromRight;    //动画持续时间    transition.duration = 0.5;    //3.添加动画    [self.view.superview.layer addAnimation:transition forKey:@"立方体效果"];    //4.移除当前视图 添加secondVC 视图    SecondViewController *secondVC = [self.storyboard instantiateViewControllerWithIdentifier:@"second"];    secondVC.view.backgroundColor = [UIColor whiteColor];    UIView *superView = self.view.superview;    [self.view removeFromSuperview];    [superView addSubview:secondVC.view];    //添加子视图控制器    [self addChildViewController:secondVC];}- (void)didReceiveMemoryWarning {    [super didReceiveMemoryWarning];    // Dispose of any resources that can be recreated.}@end/////////////////////////////////////////////////////////////////////  SecondViewController.h//  UI23_Animation////  Created by l on 15/10/7.//  Copyright (c) 2015年 lon. All rights reserved.//#import <UIKit/UIKit.h>@interface SecondViewController : UIViewController@end////  SecondViewController.m//  UI23_Animation////  Created by l on 15/10/7.//  Copyright (c) 2015年 lon. All rights reserved.//#import "SecondViewController.h"@interface SecondViewController ()@end@implementation SecondViewController- (void)viewDidLoad {    [super viewDidLoad];    // Do any additional setup after loading the view.}- (void)didReceiveMemoryWarning {    [super didReceiveMemoryWarning];    // Dispose of any resources that can be recreated.}#pragma mark----------- 返回上一个页面 ----------//过渡动画- (IBAction)backUp:(id)sender {    [UIView transitionFromView:self.view toView:self.parentViewController.view duration:1 options:(UIViewAnimationOptionTransitionCurlDown) completion:nil];}/*#pragma mark - Navigation// In a storyboard-based application, you will often want to do a little preparation before navigation- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {    // Get the new view controller using [segue destinationViewController].    // Pass the selected object to the new view controller.}*/@end![animation](http://img.blog.csdn.net/20151007191900134)
0 0