UIView 动画

 UIView 动画

1.动画的作用

提高用户体验, 合理使用动画

2.动画的分类

a.UIView动画, 基于CALayer动画, 是对CALayer动画的封装

i.属性动画

ii.过渡动画

b.CAlayer动画

i.基本动画

ii.关键帧动画

iii.过渡动画

iv.组动画

3.UIView动画是对UIview(或子类)做的动画

a.属性动画和过渡动画都分了两种写法(动画块, block)

b.属性动画和过渡动画可以同时执行

4.什么是CALayer?

用于控制渲染和展示内容

UIView自带一个CALayer

5.CALayer动画是对CALayer做动画, CALayer上的动画是模拟动画, 模拟改变的过程, 没有实质性的修改

    UIView属性动画

效果图:

写法1: 动画块, 以beginAnimations开头, 以commitAnimations结尾

//    参数1: 动画标识符
//    参数2: 传递参数
    [UIView beginAnimations:@"辉哥真帅" context:"This is right!"];
    //配置动画参数
    //动画时长, 默认0.2s
    [UIView setAnimationDuration:1];
    //动画曲线, 默认淡进淡出
    [UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
    //动画重复次数, 默认为0
    [UIView setAnimationRepeatCount:1];
    //动画反弹, 默认NO
    [UIView setAnimationRepeatAutoreverses:NO];
    //动画延迟执行, 默认0
    [UIView setAnimationDelay:0];
    //动画代理
    [UIView setAnimationDelegate:self];
    //将要开始动画, 执行的方法
    [UIView setAnimationWillStartSelector:@selector(willStart)];
    //已经结束动画, 执行的方法
    [UIView setAnimationDidStopSelector:@selector(didStop)];
    //在动画块之间, 写属性的改变, 能够做动画的属性有: frame, center, alpha, backgroundColor, bounds, transform
    self.animationView.center = CGPointMake(arc4random() % 376, arc4random() % 668);
    self.animationView.backgroundColor = [UIColor colorWithRed:arc4random() % 256 / 255. green:arc4random() % 256 / 255. blue:arc4random() % 256 / 255. alpha:1];
    self.animationView.transform = CGAffineTransformRotate(self.animationView.transform, M_PI_4);
    self.animationView.transform = CGAffineTransformScale(self.animationView.transform, 1, 1.2);
    [UIView commitAnimations];

写法2: block

   动画时长
    [UIView animateWithDuration:1 animations:^{
        //属性的修改写在block中
        self.animationView.center = CGPointMake(arc4random() % 376, arc4random() % 668);
    }];
   动画时长 + 动画delegate
    [UIView animateWithDuration:(NSTimeInterval) animations:<#^(void)animations#> completion:<#^(BOOL finished)completion#>]
    动画时长 + 动画延迟 + 动画参数 + 动画delegate
    [UIView animateWithDuration:1 delay:0.5 options:UIViewAnimationOptionCurveLinear animations:^{
    属性修改
    } completion:^(BOOL finished) {
     动画结束
    }];

过渡动画

效果图

- (IBAction)transitionAnimation:(UIButton *)sender {
   // /*
    //过渡动画
//    写法1: 动画快
    [UIView beginAnimations:@"过渡动画" context:nil];
    [UIView setAnimationDuration:0.5];
//    过度变化
//    参数1: 动画类型
//    参数2: 对哪个视图做过渡动画
//    参数3: 是否需要缓存
    [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:self.animationView cache:YES];
     self.animationView.backgroundColor = [UIColor colorWithRed:arc4random() % 256 / 255. green:arc4random() % 256 / 255. blue:arc4random() % 256 / 255. alpha:arc4random() % 256 / 255];
    [UIView commitAnimations];
    // */
    //写法2: block
    [UIView transitionWithView:self.animationView duration:1 options:UIViewAnimationOptionTransitionFlipFromTop animations:^{
        self.animationView.backgroundColor = [UIColor colorWithRed:arc4random() % 256 / 255. green:arc4random() % 256 / 255. blue:arc4random() % 256 / 255. alpha:1];
    } completion:^(BOOL finished) {
        NSLog(@"动画完成");
    }];
}

   CALayer, 层类, 继承于NSObject, 一个UIView视图都自带有一个CALayer的属性

   UIViewCALayer的关系

    1.UIView控制大小和事件处理

    2.CALayer控制渲染和内容展示

    self.layer = [[CALayer alloc] init];
    //layer的大小和UIView大小保持一致
    self.layer.frame = CGRectMake(100, 100, 175, 175);
    //layer的颜色类型是CGColorRef, 可以把UIColor转成CGColor
    self.layer.backgroundColor = [UIColor colorWithRed:0.000 green:0.696 blue:1.000 alpha:1.000].CGColor;
    //圆角半径
    self.layer.cornerRadius = 175/2;
    //边框宽度
    self.layer.borderWidth = 5;
    //边框颜色
    self.layer.borderColor = [UIColor colorWithRed:0.456 green:0.900 blue:0.984 alpha:1.000].CGColor;
    //阴影的偏移
    self.layer.shadowOffset = CGSizeMake(10, 10);
    //阴影的不透明度
    self.layer.shadowOpacity = 1;
    //阴影的颜色
    self.layer.shadowColor = [UIColor grayColor].CGColor;
    [self.view.layer addSublayer:self.layer];

    CAAnimation, layer上的动画, 继承于NSObject

    CAAnimation是一个抽象基类, 子类有:

    1.CAPropertyAnimation, 属性动画, 抽象子类

a.CABasicAnimation, 基本动画

b.CAKeyframeAnimation, 关键帧动画

2.CAAnimationGroup, 动画组

3.CATransition, 过渡动画

    基本动画,继承于属性动画, 在被动画的同时, 对属性做修改

keyPath写属性的名字, 或路径

可以做动画的属性, 都有一个标识符"Animatable"

    CABasicAnimation * basic = [CABasicAnimation animationWithKeyPath:@"bounds"];

    NSValue, 用于把结构体类型转换成对象类型

    basic.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 100, 100)];

    [self.layer addAnimation:basic forKey:@"帅"];

- (IBAction)basic:(UIButton *)sender {
   CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"bounds.size.width"];
    basic.toValue = @10;
    [self.layer addAnimation:basic forKey:@"haha"];
}

关键帧动画

- (IBAction)keyframe:(UIButton *)sender {
    //关键帧动画
    CAKeyframeAnimation *keyframe = [CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"];
    keyframe.duration = 3;
    keyframe.repeatCount = 3;
    keyframe.values = @[(id)[UIColor yellowColor].CGColor,
                        (id)[UIColor greenColor].CGColor,
                        (id)[UIColor orangeColor].CGColor,
                        (id)[UIColor blueColor].CGColor,
                        (id)[UIColor redColor].CGColor];
    //数组中的值, 要小于1, 并且升序排列
    keyframe.keyTimes = @[@0.2, @0.4, @0.6, @0.9, @1];
    [self.layer addAnimation:keyframe forKey:@"hehe"];
}

动画组, 把动画组合起来

- (IBAction)group:(UIButton *)sender {
    //动画组, 把动画组合起来
    CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"bounds.size.height"];
    basic.toValue = @10;

    CAKeyframeAnimation *keyframe = [CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"];
    keyframe.duration = 3;
    keyframe.repeatCount = 3;
    keyframe.values = @[(id)[UIColor yellowColor].CGColor,
                        (id)[UIColor greenColor].CGColor,
                        (id)[UIColor orangeColor].CGColor,
                        (id)[UIColor blueColor].CGColor,
                        (id)[UIColor redColor].CGColor];
    //数组中的值, 要小于1, 并且升序排列
    keyframe.keyTimes = @[@0.2, @0.4, @0.6, @0.9, @1];
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.animations = @[basic, keyframe];
    group.duration = 9;
    [self.layer addAnimation:group forKey:@"hello"];
}

过渡动画

     过度样式

     suckEffect(三角)

     rippleEffect(水波抖动)

     pageCurl(上翻页)

     pageUnCurl(下翻页)

     oglFlip(上下翻转)

- (IBAction)transition:(UIButton *)sender {
    //过渡动画
    CATransition *transition = [CATransition animation];
    transition.duration = 1;
   //过度样式
    transition.type = @"rippleEffect";
    //过度子样式
    transition.subtype = kCATransitionFromTop;
    [self.view.layer addAnimation:transition forKey:nil];
}

风车旋转示例

效果图

具体代码:

@interface ThirdViewController ()
@property (strong, nonatomic) IBOutlet UIImageView *imageView;

@end

@implementation ThirdViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    [self rotation];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (void)rotation {
    [UIView animateWithDuration:0.2 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
        self.imageView.transform = CGAffineTransformRotate(self.imageView.transform, M_PI_4);
    } completion:^(BOOL finished) {
        [self rotation];
    }];
}

时间: 2024-10-19 11:01:38

UIView 动画的相关文章

UIView动画效果

做出UI界面,实现程序功能,是重中之重,但是通过动画提升使用体验,一般人应该不会拒绝吧. 那么问题又来了,怎么做? 一: 稳扎稳打: 一步一步来吧,毕竟,心急吃不了热豆腐. 1.开启一个动画 2,设置该动画的各种属性:动画时长.延时执行.自动返回.动画重复次数.转场动画... 3,设置动画的UI的结束时的状态是什么,UI的最终位置等. 4,提交动画. 大功告成.具体细节如下: //===---开始动画 ---=== [UIView beginAnimations:nil context:nil]

UIView动画

1.淡入效果 // MARK: - UIView动画-淡入 @IBAction func simpleAnimationFadeIn() { UIView.beginAnimations(nil, context: nil) UIView.setAnimationDuration(2.0)//设置动画时间 testImageView.alpha = 0.0 UIView.commitAnimations() // //通过闭包实现 UIView淡入 // UIView.animateWithDu

GIF动画,菊花动画,UIView动画,CoreAnimation动画(CALayer动画)的用法

1.GIF动画 1 // 创建一个显示图片的imageView // viewController创建 2 UIImageView *showGifImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 414, 736)]; 3 [self.view addSubview:showGifImageView]; 4 5 6 //创建一个存储图片的数组 7 NSMutableArray *saveImageViewArray

iOS开发——动画编程OC篇&amp;(六)UIView动画

UIView动画 一.UIView动画(首尾) 1.简单说明 UIKit直接将动画集成到UIView类中,当内部的一些属性发生改变时,UIView将为这些改变提供动画支持 执行动画所需要的工作由UIView类自动完成,但仍要在希望执行动画时通知视图,为此需要将改变属性的代码放在[UIView beginAnimations:nil context:nil]和[UIView commitAnimations]之间 常见方法解析: + (void)setAnimationDelegate:(id)d

定时器与 UIView 动画结合的雪花降落的效果

1 #import "HUAppDelegate.h" 2 3 @implementation HUAppDelegate 4 5 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 6 { 7 self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScr

iOS动画1 — UIView动画

iOS动画1 — UIView动画 iOS动画基础是Core Animation核心动画.Core Animation是iOS平台上负责图形渲染与动画的基础设施.由于核心动画的实现比较复杂,苹果提供了实现简单动画的接口—UIView动画.UIView动画封装在UIView的Category中,主要实现一些简单和常用的动画.UIView动画是对核心动画进行了一层封装,所以最终动画还是通过Core Animation的接口实现. 主要的动画效果都可以通过UIView动画和Core Animation

ios之UIview动画

一.UIView动画(首尾) 1.简单说明 UIKit直接将动画集成到UIView类中,当内部的一些属性发生改变时,UIView将为这些改变提供动画支持 执行动画所需要的工作由UIView类自动完成,但仍要在希望执行动画时通知视图,为此需要将改变属性的代码放在[UIView beginAnimations:nil context:nil]和[UIView commitAnimations]之间 常见方法解析: + (void)setAnimationDelegate:(id)delegate  

iOS核心动画以及UIView动画的介绍

我们看到很多App带有绚丽狂拽的特效,别出心裁的控件设计,很大程度上提高了用户体验,在增加了实用性的同时,也赋予了app无限的生命力.这些华丽的效果很多都是基于iOS的核心动画原理实现的,本文介绍一些iOS开发中最基本的动画效果实现,掌握了基本属性,才可以绘制出更华丽的效果. 一.概念扩充  1.核心动画: Core Animation,它是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍. Core Animation可以用在Mac OS X和iOS平台.在iO

【iOS开发】---- UIView动画

iOS 动画UIView动画 原文:http://www.cocoachina.com/bbs/read.php?tid=110168 1.概述 UIKit直接将动画集成到UIView类中,实现简单动画的创建过程.UIView类定义了几个内在支持动画的属性声明,当这些属性发生改变时,视图为其变化过程提供内建的动画支持. 执行动画所需要的工作由UIView类自动完成,但仍要在希望执行动画时通知视图,为此需要将改变属性的代码包装到一个代码块中. 2.UIView动画具体创建方法 - (void)bu