文档章节

iOS动画编程

hejunbinlan
 hejunbinlan
发布于 2015/06/20 23:05
字数 1479
阅读 194
收藏 4

1、视图动画(UIViewAnimation)

可以改变视图的属性(Animatable UIView properties)

frame:控制UIView的大小和该UIView在superview中的相对位置。

bounds:控制UIView的大小

center:控制UIView的位置

transform:控制UIView的缩放,旋转角度等固定好中心位置之后的变化

alpha:控制UIView的透明度

backgroundColor:控制UIView的背景色

contentStretch:控制UIView的拉伸方式


UIViewAnimateOptions


动画控相关

LayoutSubViews:提交动画时布局子控件,表示子控件将和父控件一同动画。

AllowUserInteraction:动画时允许用户交流,比如触摸

BeginFromCurrentState:从当前状态开始动画

Repeat:动画无限重复

Autoreverse:执行动画回路,前提是设置动画无限重复

OverrideInheritedDuration:忽略外层动画嵌套的执行时间

OverrideInheritedCurve:忽略外层动画嵌套的时间变化曲线

AllowAnimatedContent:通过改变属性和重绘实现动画效果,如果key没有提交动画将使用快照

ShowHideTransitionViews:用显隐的方式替代添加移除图层的动画效果

OverrideInheritedOptions:忽略嵌套继承的选项


时间曲线相关

CurveEaseIn:由慢到特别快

CurveEaseInOut:由慢到快

CurveEaseOut:由快到慢

CurveLinear:匀速



转场效果相关

TransitionNone //无转场动画

TransitionFlipFromLeft //转场从左翻转

TransitionFlipFromRight //转场从右翻转

TransitionCurlUp //上卷转场

TransitionCurlDown //下卷转场

TransitionCrossDissolve //转场交叉消失

TransitionFlipFromTop //转场从上翻转

TransitionFlipFromBottom //转场从下翻转


使用动画操作视图属性的方式:

1、Block,可以在一个动画块中操作多个view,当操作开始执行的时候,会开启新的线程去操作这些view,避免阻塞主线程。

- (void)basicAnimate {

    [UIView animateWithDuration:1 animations:^{

        CGRect frame = self.firstView.frame;

        frame.origin.x += 100;

        [self.firstView setFrame:frame];

    }];

}


- (void)optionAnimate {

    [UIView animateWithDuration:2 delay:0 options:UIViewAnimationOptionRepeat|UIViewAnimationOptionAutoreverse |UIViewAnimationOptionCurveLinear animations:^{

        

        CGRect frame =self.firstView.frame;

        frame.origin.x += 100;

        self.firstView.frame = frame;

        

    } completion:^(BOOL finished) {

        NSLog(@"finished=%d",finished);

    }];

}

2、Begin/Commit

使用AnimationDelegate

- (void)beginCommitAnimate {

    //1、声明动画开始并配置动画属性

    [UIView beginAnimations:@"testAnimate" context:nil];

    [UIView setAnimationDuration:2.0];

    [UIView setAnimationRepeatAutoreverses:YES];

    [UIView setAnimationRepeatCount:10];

    [UIView setAnimationDelegate:self];

    [UIView setAnimationWillStartSelector:@selector(animationDidStart:)];

    [UIView setAnimationDidStopSelector:@selector(animationDidStop:finished:)];

    

    //2、操作视图

    self.firstView.backgroundColor = [UIColor magentaColor];

    //3、提交动画

    [UIView commitAnimations];

}

3、Nest(嵌套)方式

默认继承Parent Block的duration、curve等属性,内层设置的属性不起效。

使用以下三个属性修改:

OverideInheritedCurve

OverideInheritedDuration

OverideInheritedOptions

- (void)optionAnimate {

    [UIView animateWithDuration:2 delay:0 options://UIViewAnimationOptionRepeat|UIViewAnimationOptionAutoreverse |

     UIViewAnimationOptionCurveLinear animations:^{

        

        CGRect frame =self.firstView.frame;

        frame.origin.x += 100;

        self.firstView.frame = frame;

        

        //内层animate

        [UIView animateWithDuration:2.0 delay:0.0 options: UIViewAnimationOptionOverrideInheritedDuration | UIViewAnimationOptionOverrideInheritedCurve|UIViewAnimationOptionCurveEaseOut animations:^{

            CGRect frame = self.secondView.frame;

            frame.origin.x += 100;

            self.secondView.frame = frame;

        } completion:^(BOOL finished) {

            NSLog(@"inner animate finished");

        }];

        

    } completion:^(BOOL finished) {

        NSLog(@"outer animate finished=%d",finished);

    }];

}

使用动画进行视图过渡:

1、操作SubView

- (void)operateSubView {

    [UIView transitionWithView:self.firstView duration:2.0 options:UIViewAnimationOptionTransitionCrossDissolve|UIViewAnimationOptionAllowAnimatedContent animations:^{

        CGRect frame = self.firstSubView.frame;

        frame.origin.x += 100;

        self.firstSubView.frame = frame;

        

//        self.firstSubView.hidden = YES;

    } completion:^(BOOL finished) {

        NSLog(@"finished!");

    }];

}

2、替换View

- (void)replaceView {

    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(50, 400, 168, 89)];

    view.backgroundColor = [UIColor magentaColor];

    [UIView transitionFromView:self.secondView toView:view duration:2.0 options:UIViewAnimationOptionTransitionCurlUp|UIViewAnimationOptionAllowAnimatedContent completion:^(BOOL finished) {

        NSLog(@"finished");

    }];

}



2、核心动画(CoreAnimation)

什么是核心动画

图层CALayer(演员 

什么是Layer? 每个view都有一个layer,所有的动画都发生在layer层,layer只负责内容显示,view还负责事件响应。view是一种特殊的layer,增加了事件响应等功能。 self.view.layer

创建和获取Layer

- (void)testLayerProperty {

    CALayer *myLayer = [[CALayer alloc] init];

    myLayer.backgroundColor = [UIColor magentaColor].CGColor;

    myLayer.frame = CGRectMake(100, 100, 100, 100);

//    self.view.layer

    //要将layer显示出来,需要将Layer添加到view中

    [self.view.layer addSublayer:myLayer];

}

Layer和SubLayer

Layer属性

BackgroundColor/Border

Corner Radius

Shadow

...

- (void)testLayerProperty {

    CALayer *myLayer = [[CALayer alloc] init];

    myLayer.backgroundColor = [UIColor magentaColor].CGColor;

    myLayer.frame = CGRectMake(100, 100, 100, 100);

    myLayer.borderColor = [UIColor blueColor].CGColor;

    myLayer.borderWidth = 5.0;

    myLayer.cornerRadius = 10.0;

    myLayer.shadowColor = [UIColor greenColor].CGColor;

    myLayer.shadowOffset = CGSizeMake(25.0, 25.0);

    myLayer.shadowOpacity = 0.2;

//    self.view.layer

    //要将layer显示出来,需要将Layer添加到view中

    [self.view.layer addSublayer:myLayer];

}


动画类CAAnimation(剧本

CAAnimation

->CAMediaTiming

->CAAnimationGroup(animations) 

->CAPropertyAnimation (keyPath、additive、cumulative)

    ->CABasicAnimation(fromValue、toValue、byValue)

    ->CAKeyframeAnimation(values、path、keyTimes、timingFunctions、calculationMode)

->CATransition(type、subtype、startProgress、endProgress、filter)

timingFunction delegate


隐式动画:直接修改属性执行的动画

- (void)implicitAnimate {

    CGPoint position = self.myLayer.position;

    position.y += 100;

    self.myLayer.position = position;

}

显示动画

- (void)caBasicAnimate {

    UIImageView *imgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"test1"]];

    //192 × 168 pixels

    imgView.frame = CGRectMake(150, 300, 192/2, 168/2);

    [self.view addSubview:imgView];

    

    //layer添加动画

    CALayer *la = imgView.layer;

    

    CABasicAnimation *scaleAni = [CABasicAnimation animationWithKeyPath:@"transform.scale"];

    scaleAni.fromValue = [NSNumber numberWithDouble:1.0];

    scaleAni.toValue = [NSNumber numberWithDouble:1.2];

    scaleAni.autoreverses = YES;

    scaleAni.fillMode = kCAFillModeForwards;

    scaleAni.repeatCount = MAXFLOAT;

    scaleAni.duration = 1.0;

    

    CABasicAnimation *opacityAni = [CABasicAnimation animationWithKeyPath:@"opacity"];

    opacityAni.fromValue = [NSNumber numberWithDouble:.3];

    opacityAni.toValue = [NSNumber numberWithDouble:1.0];

    opacityAni.fillMode = kCAFillModeForwards;

    opacityAni.duration = 1.0;

    opacityAni.autoreverses = YES;

    opacityAni.repeatCount = MAXFLOAT;

    

    [la addAnimation:scaleAni forKey:@"group"];

    [la addAnimation:opacityAni forKey:@"opa"];

}

animationWithKeyPath的值:

transform的KeyPath

transform.scale = 比例转换

transform.scale.x = 宽的比例转换

transform.scale.y = 高的比例转换


transform.rotation

transform.rotation.x

transform.rotation.y

transform.rotation.z = 平面圆的旋转


transform.scale

transform.scale.x

transform.scale.y

transform.scale.z


transform.translation

transform.translation.x

transform.translation.y

transform.translation.z


Layer属性:

opacity = 不透明度

margin

zPosition

backgroundColor    背景颜色

cornerRadius    圆角

borderWidth

bounds

contents

contentsRect

cornerRadius

frame

hidden

mask

masksToBounds

opacity

position

shadowColor

shadowOffset

shadowOpacity

shadowRadius

- (void)caBasicAnimate {

    UIImageView *imgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"test1"]];

    //192 × 168 pixels

    imgView.frame = CGRectMake(150, 300, 192/2, 168/2);

    [self.view addSubview:imgView];

    

    //1、给layer添加动画,选定角色CALayer

    CALayer *la = imgView.layer;

    

    //2、写第一个剧本CAAnimation

    CABasicAnimation *scaleAni = [CABasicAnimation animationWithKeyPath:@"transform.scale"];

    //开始倍数

    scaleAni.fromValue = [NSNumber numberWithDouble:1.0];

    //结束倍数

    scaleAni.toValue = [NSNumber numberWithDouble:1.2];

    //自动反转

    scaleAni.autoreverses = YES;

    //

    scaleAni.fillMode = kCAFillModeForwards;

    //重复次数,MAXFLOAT表示无限循环

    scaleAni.repeatCount = MAXFLOAT;

    //一次动画执行时间

    scaleAni.duration = 2.0;

    

    //3、写第二个剧本用来透明

    CABasicAnimation *opacityAni = [CABasicAnimation animationWithKeyPath:@"opacity"];

    //完全透明

    opacityAni.fromValue = [NSNumber numberWithDouble:0.0];

    //完全不透明

    opacityAni.toValue = [NSNumber numberWithDouble:1.0];

    opacityAni.fillMode = kCAFillModeForwards;

    //执行时间

    opacityAni.duration = 2.0;

    //自动反转

    opacityAni.autoreverses = YES;

    //重复次数

    opacityAni.repeatCount = MAXFLOAT;

    

    //4、把剧本交给演员开始动画,forKey,表示给动画增加标记

    [la addAnimation:scaleAni forKey:@"scaleAnimate"];

    [la addAnimation:opacityAni forKey:@"opacityAnimate"];

}

关键帧动画

CAKeyframeAnimation

//关键帧动画

- (void)keyFrameAnimate {

    UIImageView *imgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"test1"]];

    //192 × 168 pixels

    imgView.frame = CGRectMake(150, 200, 192/4, 168/4);

    [self.view addSubview:imgView];

    

    //1、选定角色CALayer

    CALayer *layer = imgView.layer;

    

    //2、写剧本

    CAKeyframeAnimation *keyAnimate = [CAKeyframeAnimation animationWithKeyPath:@"position"];

    //3、设置关键帧

    NSValue *value0 = [NSValue valueWithCGPoint:layer.position];

    NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(layer.position.x, layer.position.y + 200)];

    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(layer.position.x - 150, layer.position.y + 200)];

    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(layer.position.x - 150, layer.position.y)];

    NSValue *value4 = [NSValue valueWithCGPoint:layer.position];

    

    keyAnimate.values = @[value0,value1,value2,value3,value4];

    

    //设置每个关键帧的时间曲线

    CAMediaTimingFunction *ft0 = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    

    CAMediaTimingFunction *ft1 = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];

    

    CAMediaTimingFunction *ft2 = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

    

    CAMediaTimingFunction *ft3 = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];

    keyAnimate.timingFunctions = @[ft0,ft1,ft2,ft3];

    

    //控制每段的执行时间

    NSNumber *t0 = [NSNumber numberWithDouble:0.0];

    NSNumber *t1 = [NSNumber numberWithDouble:0.5];

    NSNumber *t2 = [NSNumber numberWithDouble:0.6];

    NSNumber *t3 = [NSNumber numberWithDouble:0.7];

    NSNumber *t4 = [NSNumber numberWithDouble:1];


    keyAnimate.keyTimes = @[t0,t1,t2,t3,t4];

    

    keyAnimate.autoreverses = false;

    keyAnimate.repeatCount = MAXFLOAT;

    keyAnimate.duration = 6.0;

    

    //4start

    [layer addAnimation:keyAnimate forKey:@"keyAnimate"];

    

}




事务类CATransaction(导演



© 著作权归作者所有

共有 人打赏支持
hejunbinlan
粉丝 41
博文 586
码字总数 21569
作品 0
浦东
高级程序员
如何判断你是合格的高级iOS开发工程师?

前言 随着移动互联网的高速发展泄洪而来,有意学习移动开发的人越来越多了,竞争也是越来越大,需要学习的东西很多。如何才能在激烈的移动开发者竞争中一枝独秀,成为一名真正合格的高级iOS...

_小迷糊
05/26
0
0
微软提供移植iPhone应用到Windows Phone 7上的工具

windows phone 7 iphone5 微软发布了一个API映射工具、指导手册和一组分享经验的视频,帮助简化移植iPhone/iOS应用程序到Windows Phone 7(WP 7)上的工作。 微软Windows Phone互操作组创建了...

junwong
2012/03/09
0
0
UIView Animations 学习笔记(二)定制动画效果及切换效果

目录 UIView Animations 学习笔记(一)简介及API说明 UIView Animations 学习笔记(二)定制动画效果及切换效果 UIView Animation 学习笔记 应用示例 二、视图切换定制 2.1 基础说明 要创建...

灰大羊
2015/08/12
0
0
IOS学习,最简单的表格应用程序,学习,列出博客

IOS编程浅蓝教程,这是博客地址http://www.cnblogs.com/haichao/category/425378.html IOS编程浅蓝教程:锲子 IOS编程浅蓝教程(一)先决条件:开始iOS编程的必要准备 IOS编程浅蓝教程(二) Hel...

andy521zhu
2015/01/17
0
0
HTML 移动端框架 - Framework7

Framework7 或者叫 F7 是全功能的绑定 iOS 7 应用的 HTML 框架。Framework7 是免费开源的 HTML 移动端框架,用来开发混合移动端应用或者 iOS 7 的 Web 应用,并且带有 iOS 7 的原生外观和感觉...

匿名
2014/07/24
0
5

没有更多内容

加载失败,请刷新页面

加载更多

一切都靠大数据:滴滴已封禁4.3万人员、车辆

这段时间以来,滴滴出行相继出炉了各种整改措施,包括自身安全建设和外部社会共建,昨日就刚刚宣布正在筹备建立安全监督顾问委员会。 据媒体最新报道,9月30日,上海市交通委员会执法总队、上...

linuxCool
33分钟前
2
0
awk命令用法介绍

10月18日任务 9.6/9.7 awk 1.awk(上)(下) 1.awk 分段操作功能 指定分隔符,并把第一段打印出来,不会改动文件内容 将所有内容打印出来 awk 没有指定分隔符号,则会默认用空格或者空白字符...

hhpuppy
今天
3
0
Spring Cloud Eureka Server高可用之:在线扩容

本文共 1591字,阅读大约需要 6分钟 ! 概述 业务微服务化以后,我们要求服务高可用,于是我们可以部署多个相同的服务实例,并引入负载均衡机制。而微服务注册中心作为微服务化系统的重要单元...

CodeSheep
今天
2
0
内网esxi主机上安装CoreOS虚拟机

CoreOS是一个为专门运行容器而设计的轻量级linux发行版,旨在通过轻量的系统架构和灵活的应用程序部署能力简化数据中心的维护成本和复杂度。它没有包管理工具,运行容器化应用以提供服务;默...

hiwill
今天
1
0
20181018 上课截图

![](https://oscimg.oschina.net/oscnet/49f66c08ab8c59a21a3b98889d961672f30.jpg) ![](https://oscimg.oschina.net/oscnet/a61bc2d618b403650dbd4bf68a671fabecb.jpg)......

小丑鱼00
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部