文档章节

iOS动画编程

hejunbinlan
 hejunbinlan
发布于 2015/06/20 23:05
字数 1479
阅读 208
收藏 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
博文 595
码字总数 21569
作品 0
浦东
高级程序员
私信 提问
加载中
请先登录后再评论。
NSSplitView 扩展--DMSplitView

DMSplitView 对标准的 OS X 的 NSSplitView 控件进行改造,可满足更复杂的要求: 子视图的大小和约束 分隔条位置 可收缩伸展的子视图 动画变换效果 可控制分隔条的粗细和样式 可保存和恢复分...

匿名
2013/01/24
373
0
iOS 应用版本更新检查--Harpy

实现 app 版本检查功能。用户打开app之后,进行app的版本更新检查。如果检查到 appstore 上有当前qpp的新版本,则弹出对话框提醒用户下载。可以设置让用户选择下载或者强制用户下载。 [Code4...

匿名
2013/02/18
1.8K
0
跨平台手机应用开发--Gideros

Gideros 可以让你轻松快速创建 iOS 和 Android 应用,提供用户友好的集成开发环境,内建模拟器对应用进行不同屏幕大小、分辨率下的测试,最大的优点是可即时修改代码即时进行测试,无需编译安...

匿名
2013/02/19
2.8K
1
RESwitch

RESwitch 是 UISwitch 的开源替代品,可使用 UIAppearance 协议进行定制。 要求: Xcode 4.5 or higher Apple LLVM compiler iOS 5.0 or higher ARC...

匿名
2013/02/19
589
0
Flash 皮肤样式--Windows8UIStyle

Windows8UIStyle 模仿 Windows 8 的桌面用户界面,使得 FlashSwing 应用程序在 Windows 8 系统中拥有与传统应用程序一致的用户界面。 Windows8UIStyle 对 FlashSwing 默认主题的修改: 提供和...

Gregary
2013/02/19
1.4K
1

没有更多内容

加载失败,请刷新页面

加载更多

Hacker News 简讯 2020-08-15

最后更新时间: 2020-08-15 04:01 Welders set off Beirut blast while securing explosives - (maritime-executive.com) 焊工在固定炸药的同时引爆了贝鲁特爆炸 得分:215 | 评论:209 Factor......

FalconChen
今天
24
0
OSChina 周六乱弹 —— 老椅小猫秋乡梦 梦里石台堆小鱼

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @小小编辑 :《MOM》- 蜡笔小心 《MOM》- 蜡笔小心 手机党少年们想听歌,请使劲儿戳(这里) @狄工 :腾讯又在裁员了,35岁以上清退,抖音看到...

小小编辑
今天
61
1
构建高性能队列,你不得不知道的底层知识!

前言 本文收录于专辑:http://dwz.win/HjK,点击解锁更多数据结构与算法的知识。 你好,我是彤哥。 上一节,我们一起学习了如何将递归改写为非递归,其中,用到的数据结构主要是栈。 栈和队列...

彤哥读源码
今天
17
0
Anaconda下安装keras和tensorflow

Anaconda下安装keras和tensorflow 一、下载并安装Anaconda: Anaconda下载 安装步骤: 如果是多用户操作系统选择All Users,单用户选择Just Me 选择合适的安装路径 然后勾选这个,自动配置环境...

Atlantis-Brook
今天
15
0
滴滴ElasticSearch千万级TPS写入性能翻倍技术剖析

桔妹导读:滴滴ElasticSearch平台承接了公司内部所有使用ElasticSearch的业务,包括核心搜索、RDS从库、日志检索、安全数据分析、指标数据分析等等。平台规模达到了3000+节点,5PB 的数据存储...

滴滴技术
今天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部