UI_动画

这里写图片描述

RootViewController.m
#import "RootViewController.h"
@interface RootViewController ()
@property(nonatomic, retain) UIImageView *imageView;

@end

@implementation RootViewController

- (void)dealloc
{
    [_imageView release];
    [super dealloc];
}
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.view.backgroundColor = [UIColor whiteColor];

    self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(100, 200, 100, 100)];
    self.imageView.image = [UIImage imageNamed:@"soldier.jpg"];
    [self.view addSubview:self.imageView];
    [_imageView release];

    UIButton *viewButton = [UIButton buttonWithType:UIButtonTypeSystem];
    viewButton.frame = CGRectMake(100, 500, 150, 50);
    [viewButton setTitle:@"UIView动画" forState:UIControlStateNormal];
    [self.view addSubview:viewButton];
    viewButton.layer.borderWidth = 1;
    [viewButton release];
    [viewButton addTarget:self action:@selector(viewAction:) forControlEvents:UIControlEventTouchUpInside];

    UIButton *transformButton = [UIButton buttonWithType:UIButtonTypeSystem];
    transformButton.frame = CGRectMake(100, 450, 150, 50);
    [transformButton setTitle:@"transform动画" forState:UIControlStateNormal];
    [self.view addSubview:transformButton];
    transformButton.layer.borderWidth = 1;
    [transformButton release];
    [transformButton addTarget:self action:@selector(transformAction:) forControlEvents:UIControlEventTouchUpInside];

    UIButton *layerButton = [UIButton buttonWithType:UIButtonTypeSystem];
    layerButton.frame = CGRectMake(100, 400, 150, 50);
    [layerButton setTitle:@"layer动画" forState:UIControlStateNormal];
    [self.view addSubview:layerButton];
    layerButton.layer.borderWidth = 1;
    [layerButton release];
    [layerButton addTarget:self action:@selector(layerAction:) forControlEvents:UIControlEventTouchUpInside];


    // 让tableView横着滚.
    UITableView *table = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) style:UITableViewStylePlain];
    table.backgroundColor = [UIColor greenColor];
    [self.view addSubview:table];
    [table release];
    table.transform = CGAffineTransformRotate(table.transform, M_PI_2);


}

// UIView动画
- (void)viewAction:(UIButton *)button {
    // UIView的动画第一种,将图片放大.
    // Duration动画的运行时间.
    [UIView animateWithDuration:5 animations:^{
        // 动画部分都写在block里.
        self.imageView.frame = CGRectMake(0, 0, 300, 300);
        self.imageView.alpha = 0;
    }];



    // UIView动画第二种.
    [UIView animateWithDuration:5 animations:^{
        // 所需动画部分.
        self.imageView.frame = CGRectMake(0, 0, 300, 300);
        self.imageView.alpha = 0;
    } completion:^(BOOL finished) {
        NSLog(@"动画内容结束");
        [UIView animateWithDuration:5 animations:^{
            self.imageView.frame = CGRectMake(100, 100, 200, 200);
            self.imageView.alpha = 1;
        }];
    }];
}


    // UIView动画第三种.
    // delay:动画延时
    NSLog(@"%ld", UIViewAnimationOptionRepeat);
    NSLog(@"%ld", UIViewAnimationOptionAutoreverse);
    NSLog(@"%ld", UIViewAnimationOptionRepeat | UIViewAnimationOptionAutoreverse);
        [UIView animateWithDuration:5 delay:0 options:UIViewAnimationOptionRepeat | UIViewAnimationOptionAutoreverse animations:^{
            self.imageView.frame = CGRectMake(0, 0, 300, 300);
            self.imageView.alpha = 0;
        } completion:^(BOOL finished) {

        }];

    // UIView动画第四种.
    // usingSpringWithDamping:控制颤抖的频率,越小频率越快.
    // initialSpringVelocity:控制动画弹出的初速度.
    [UIView animateWithDuration:3 delay:0 usingSpringWithDamping:0.01 initialSpringVelocity:50 options:UIViewAnimationOptionAllowUserInteraction animations:^{
        self.imageView.frame = CGRectMake(100, 100, 300, 300);

    } completion:^(BOOL finished) {


    }];
}

// 通过transform对视图的样式进行修改.
- (void)transformAction:(UIButton *)button {
    // 通过transform, 使视图进行旋转,缩小等操作
    // M_PI_2 每次旋转90°.
    self.imageView.transform = CGAffineTransformRotate(self.imageView.transform, M_PI_2);

    // 控制缩放.
    self.imageView.transform = CGAffineTransformScale(self.imageView.transform, 0.9, 0.9);

    // 控制偏移量
    self.imageView.transform = CGAffineTransformTranslate(self.imageView.transform, 10, -20);
}

- (void)layerAction:(UIButton *)button {
    // layer主要是控制视图的显示内容,比如样式,内容都是layer来呈现,UIView的动画也是基于layer
    // layer的第一种动画,旋转
    CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
    // 设置起始的角度.
    basicAnimation.fromValue = [NSNumber numberWithFloat:0.0];
    // 设置旋转的角度.
    basicAnimation.toValue = [NSNumber numberWithFloat:2 * M_PI];
    // 设置动画的时长.
    basicAnimation.duration = 3;
    // 设置动画的播放次数.
    // NSIntegerMax整数的最大值.
    basicAnimation.repeatCount = NSIntegerMax;
    // 把动画添加到图片的layer上.
    [self.imageView.layer addAnimation:basicAnimation forKey:@"basicAnimation"];
    // 设置是否回到原位.
    basicAnimation.autoreverses = YES;

    // layer的第二种动画.
    CATransition *transiton = [CATransition animation];
    // 设置动画的样式(水波纹).
    transiton.type = @"rippleEffect";
    // 设置动画时间和重复次数.
    transiton.repeatCount = NSIntegerMax;
    transiton.duration = 5;
    // 把动画添加到layer上
    [self.imageView.layer addAnimation:transiton forKey:@"transiton"];


    CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    // 设置动画的时长.
    basicAnimation.duration = 1;
    // 动画重复次数.
    basicAnimation.repeatCount = NSIntegerMax;
    // 设置起始值.
    basicAnimation.fromValue = [NSNumber numberWithFloat:0];
    basicAnimation.toValue = [NSNumber numberWithFloat:5];
    [self.imageView.layer addAnimation:basicAnimation forKey:@"basicAnimation"];

    // CABasicAnimation动画就是在修改视图的transform属性,从而达到动画的效果.

    // 关键帧动画.
    // 通过一帧一帧的点或者角度,完成这个动画效果的设置.
    CAKeyframeAnimation *keyframe = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    // 创建一个路径,用来记录移动的每一帧(坐标)
    CGMutablePathRef path = CGPathCreateMutable();
    // 指定移动的起始位置,为了移动图片,所以图片的中心位置就是起点

    /**
     *  Description
     *
     *  @param path#> 用来记录的路径 description#>
     *  @param m#>    备用的参数,用不上, NULL description#>
     *  @param x#>    中心坐标x description#>
     *  @param y#>    中心坐标y description#>
     *
     *  @return <#return value description#>
     */
    CGPathMoveToPoint(path, NULL, self.imageView.center.x, self.imageView.center.y);
    // 再设置其它经过的点
    CGPathMoveToPoint(path, NULL, 100, 100);
    CGPathMoveToPoint(path, NULL, 10, 10);
    CGPathMoveToPoint(path, NULL, 20, 100);
    CGPathMoveToPoint(path, NULL, 140, 200);
    CGPathMoveToPoint(path, NULL, 170, 190);
    // 设置曲线路径
    CGPathAddCurveToPoint(path, NULL, 200, 200, 100, 120, 40, 60);
    CGPathAddCurveToPoint(path, NULL, 80, 10, 20, 100, 300, 100);
    CGPathAddCurveToPoint(path, NULL, 10, 60, 200, 180, 30, 100);
    CGPathAddCurveToPoint(path, NULL, 50, 90, 110, 10, self.imageView.center.x, self.imageView.center.y);
    // 将这个路径添加到动画对象中.
    keyframe.path = path;
    // 设置时间和重复次数.
    keyframe.repeatCount = NSIntegerMax;
    keyframe.duration = 10;
    // 动画添加到layer上.
    [self.imageView.layer addAnimation:keyframe forKey:@"1"];
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值