CYC-非常炫酷的UIView动画-02

最新推荐文章于 2016-04-14 14:30:45 发布

YanChen-YC

最新推荐文章于 2016-04-14 14:30:45 发布

阅读量375

点赞数

分类专栏： ios 文章标签：动画 uiview

本文链接：https://blog.csdn.net/u013248404/article/details/48683987

版权

ios 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

#import "RootViewController.h"
@interface RootViewController ()
// 声明一个UIImageView 
@property(nonatomic ,retain) UIImageView *myView;
@end

记得调用方法

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

布局

// 创建视图
- (void)addSubViews
{
    self.myView = [[UIView alloc] initWithFrame:CGRectMake(100, 200, 150, 150)];
    [self.view addSubview:self.myView];
    [_myView release];

    // layer 是负责 显示图层的
    // 要更改 咱们看的的图形形状 需要更改layer
    // 设置圆角
    // 先决条件 变圆 必须是长宽
    self.myView.layer.cornerRadius  = self.myView.frame.size.width / 2;
    // 添加一张图片,记得裁成圆形, 必须是镂空图 
  self.myView.image = [UIImage imageNamed:@"1.png"];
    // 设置阴影的颜色
    // CGColorRef 涂层绘制的颜色
    self.myView.layer.shadowColor = [UIColor greenColor].CGColor;
    // 阴影的显示范围
    self.myView.layer.shadowOffset = CGSizeMake(10, 10);
    // 阴影的透明度
    self.myView.layer.shadowOpacity = 1;
    // 阴影的模糊程度
    self.myView.layer.shadowRadius = 60;
    // 设置边框 默认是黑色
    self.myView.layer.borderWidth = 2;
    // 设置边框的颜色
    self.myView.layer.borderColor = [UIColor blueColor].CGColor;
    // 调用下面的button
    [self addButton];
      // layer 层动画
     // CAPropertyAnimation 抽象类
    //  CABasicAnimation 基础动画 更改大小 旋转等.
   //  CAKeyframeAnimation 主要按轨迹移动 位置等 比如 执行一组动画时 使用 背景颜色
   }

创建一大堆Button,用于触发动画效果如果嫌麻烦的话,可以只创建一个就行

- (void)addButton
 {
  // 创建一个button

    UIButton *button = [UIButton buttonWithType:(UIButtonTypeCustom)];
    button.frame = CGRectMake(10, 100, 50, 50);
    [button setTitle:@"旋转" forState:(UIControlStateNormal)];
    [button addTarget:self action:@selector(actionButton:) forControlEvents:(UIControlEventTouchUpInside)];
    [self.view addSubview:button];


    UIButton *buttona = [UIButton buttonWithType:(UIButtonTypeCustom)];
    buttona.frame = CGRectMake(10, 150, 50, 50);
    [buttona setTitle:@"变大" forState:(UIControlStateNormal)];
    [buttona addTarget:self action:@selector(actionButtona:) forControlEvents:(UIControlEventTouchUpInside)];
    [self.view addSubview:buttona];

    UIButton *buttonb = [UIButton buttonWithType:(UIButtonTypeCustom)];
    buttonb.frame = CGRectMake(10, 200, 50, 50);
    [buttonb setTitle:@"变色" forState:(UIControlStateNormal)];
    [buttonb addTarget:self action:@selector(actionButtonb:) forControlEvents:(UIControlEventTouchUpInside)];
    [self.view addSubview:buttonb];

    UIButton *buttonc = [UIButton buttonWithType:(UIButtonTypeCustom)];
    buttonc.frame = CGRectMake(0, 250, 100, 50);
    [buttonc setTitle:@"轨迹移动" forState:(UIControlStateNormal)];
    [buttonc addTarget:self action:@selector(actionButtonc:) forControlEvents:(UIControlEventTouchUpInside)];
    [self.view addSubview:buttonc];

    UIButton *buttond = [UIButton buttonWithType:(UIButtonTypeCustom)];
    buttond.frame = CGRectMake(0, 300, 100, 50);
    [buttond setTitle:@"两侧晃动" forState:(UIControlStateNormal)];
    [buttond addTarget:self action:@selector(actionButtond:) forControlEvents:(UIControlEventTouchUpInside)];
    [self.view addSubview:buttond];

    UIButton *buttone = [UIButton buttonWithType:(UIButtonTypeCustom)];
    buttone.frame = CGRectMake(0, 350, 100, 50);
    [buttone setTitle:@"3D 旋转" forState:(UIControlStateNormal)];
    [buttone addTarget:self action:@selector(actionButtone:) forControlEvents:(UIControlEventTouchUpInside)];
    [self.view addSubview:buttone];

    UIButton *buttonf = [UIButton buttonWithType:(UIButtonTypeCustom)];
    buttonf.frame = CGRectMake(10, 400, 50, 50);
    [buttonf setTitle:@"动画" forState:(UIControlStateNormal)];
    [buttonf addTarget:self action:@selector(actionButtonf:) forControlEvents:(UIControlEventTouchUpInside)];
    [self.view addSubview:buttonf];
    }

各种效果的实现- 旋转

// 旋转
- (void)xyAnimation
{
    // 新建一个基础动画
    // 注意:KeyPath 一定不要拼错
    // 要改的是 transform.rotation.x
    // 形变属性下 弧度的点X轴
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];
   // 设置属性变化 到 什么值
    // toValue 需要一个对象类型 即NSNumber 或者 NSValue
    animation.toValue = [NSNumber numberWithFloat:M_PI ];
    // 设置动画时间
    animation.duration = 1;
    // 设置动画重复
    animation.repeatCount = 1;

    // 重要: 把设置好的动画添加到layer上

    // 参数二 添加的动画的标识
    [self.myView.layer addAnimation:animation forKey:@"transform.rotation.x"];

}

改变大小

// 改变size的
- (void)sizeAnimation
{
    // 更改大小的话 需要更改bounds.size
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"bounds.size"];
    // 设置改变的值 初始值
    animation.fromValue = [NSValue valueWithCGSize:CGSizeMake(10, 10)];
    // 结束值
    animation.toValue = [NSValue valueWithCGSize:CGSizeMake(100, 100)];
     // 设置动画时间
    animation.duration = 1;
    // 设置动画重复
    animation.repeatCount = 2;
   // 把设置好的动画添加到layer上
    [self.myView.layer addAnimation:animation forKey:@"bounds.size"];

}

改变背景颜色

// 改变背景颜色
- (void)changeBackGroundColor
{
    // 执行一组动画
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"];

    // 构建一组颜色CGColor
    CGColorRef green = [UIColor greenColor].CGColor;
    CGColorRef red = [UIColor redColor].CGColor;
    CGColorRef blue = [UIColor blueColor].CGColor;
    CGColorRef cyan = [UIColor cyanColor].CGColor;
    CGColorRef orange = [UIColor orangeColor].CGColor;

    // 改变一组颜色
    animation.values = @[(id)green, (id)red, (id)blue, (id)cyan,(id)orange];

    // 设置下时间
    animation.duration = 2;
    // 设置下重复次数
    animation.repeatCount = 3;
    // 添加到layer
    [self.myView.layer addAnimation:animation forKey:@"backgroundColor"];
}

改变移动轨迹

// 轨迹移动
- (void)positionPoint
{
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    // 构建一堆点
    NSValue *aPoint = [NSValue valueWithCGPoint:CGPointMake(0, 444)];
    NSValue *bPoint = [NSValue valueWithCGPoint:CGPointMake(4, 456)];
    NSValue *cPoint = [NSValue valueWithCGPoint:CGPointMake(444, 4)];
    NSValue *dPoint = [NSValue valueWithCGPoint:CGPointMake(4, 444)];
    NSValue *ePoint = [NSValue valueWithCGPoint:CGPointMake(0, 444)];
    // 添加进数组
    animation.values = @[aPoint,bPoint,cPoint,dPoint,ePoint];

    // 设置下时间
    animation.duration = 1;
    // 设置下重复次数
    animation.repeatCount = 3;
    // 添加到layer上
    [self.myView.layer addAnimation:animation forKey:@"position"];
    [self changeBackGroundColor];

}

两侧晃动

- (void)positionX
{
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position.x"];
    // 构建一堆点
    CGFloat center = self.myView.layer.position.x;
    CGFloat left = center + 50;
    CGFloat right = center - 50;

    NSNumber  *number = [NSNumber numberWithFloat:left];
    NSNumber  *number1 = [NSNumber numberWithFloat:right];
    NSNumber  *number2 = [NSNumber numberWithFloat:center];

    // 添加进数组
    animation.values = @[number,number1,number2,number,number1,number2,number,number1,number2,number,number1,number2];
    // 设置下时间
    animation.duration = 1;
    // 设置下重复次数
    animation.repeatCount = 3;
    // 添加到layer上
    [self.myView.layer addAnimation:animation forKey:@"position.x"];
}

3D 旋转

// 3D 旋转
- (void)transfrom3D
{
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform"];
    // 结束值
    animation.toValue = [NSValue valueWithCATransform3D:(CATransform3DRotate(self.myView.layer.transform, M_PI, 100,100, 100))];
    // 添加时间
    animation.duration = 1;
    // 重复次数
    animation.repeatDuration = 4;

    // 添加到layer上
    [self.myView.layer addAnimation:animation forKey:@"transform"];
}

组动画

// 组动画

- (void)groupAnimation
{
    // 创建祖动画
    CAAnimationGroup *group = [CAAnimationGroup animation];
    // 设置组动画时间
    group.duration = 3;

    // 执行一组动画
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"];

    // 构建一组颜色CGColor
    CGColorRef green = [UIColor greenColor].CGColor;
    CGColorRef red = [UIColor redColor].CGColor;
    CGColorRef blue = [UIColor blueColor].CGColor;
    CGColorRef cyan = [UIColor cyanColor].CGColor;
    CGColorRef orange = [UIColor orangeColor].CGColor;

    // 改变一组颜色
    animation.values = @[(id)green, (id)red, (id)blue, (id)cyan,(id)orange];

    // 更改大小的话 需要更改bounds.size
    CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@"bounds.size"];
    // 设置改变的值 初始值
    animation1.fromValue = [NSValue valueWithCGSize:CGSizeMake(10, 10)];
    // 结束值
    animation1.toValue = [NSValue valueWithCGSize:CGSizeMake(100, 100)];


    // 设置组动画执行的动画数组

    // 数组中
    group.animations = @[animation, animation1];
    // 添加到layer上
    [self.myView.layer addAnimation:group forKey:@"group"];
}

最后记得实现Button的点击事件并且调用前面的方法

- (void)actionButton:(UIButton *)button
{
    // 旋转
    [self xyAnimation];

}

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

    // 变大
    [self sizeAnimation];
}

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

    // 改变背景颜色
    [self changeBackGroundColor];
}

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

    // 轨迹移动
    [self positionPoint];
}


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

    // 两侧晃动
    [self positionX];
}

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

    // 3D 旋转
    [self transfrom3D];
}

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

    // 组动画
    [self groupAnimation];
}