AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

IOS开发UI篇--IOS动画（Core Animation）总结

2016-03-24 2058
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

一、简介

IOS 动画主要是指Core Animation框架。官方使用文档地址为：Core Animation Guide。
Core Animation是IOS和OS X平台上负责图形渲染与动画的基础框架。Core Animation可以作用与动画视图或者其他可视元素，为你完成了动画所需的大部分绘帧工作。你只需要配置少量的动画参数（如开始点的位置和结束点的位置）即可使用Core Animation的动画效果。Core Animation将大部分实际的绘图任务交给了图形硬件来处理，图形硬件会加速图形渲染的速度。这种自动化的图形加速技术让动画拥有更高的帧率并且显示效果更加平滑，不会加重CPU的负担而影响程序的运行速度。

二、Core Animation类图以及常用字段

Core Animation类的继承关系图
coreAnimation.png

常用属性
duration : 动画的持续时间
beginTime : 动画的开始时间
repeatCount : 动画的重复次数
autoreverses : 执行的动画按照原动画返回执行
timingFunction : 控制动画的显示节奏系统提供五种值选择，分别是：

  • kCAMediaTimingFunctionLinear 线性动画
  • kCAMediaTimingFunctionEaseIn 先慢后快（慢进快出）
  • kCAMediaTimingFunctionEaseOut 先块后慢（快进慢出）
  • kCAMediaTimingFunctionEaseInEaseOut 先慢后快再慢
  • kCAMediaTimingFunctionDefault 默认，也属于中间比较快

delegate ： 动画代理。能够检测动画的执行和结束。

@interface NSObject (CAAnimationDelegate)
 - (void)animationDidStart:(CAAnimation *)anim;
 - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;
@end

path：关键帧动画中的执行路径
type ： 过渡动画的动画类型，系统提供了四种过渡动画。
- kCATransitionFade 渐变效果
- kCATransitionMoveIn 进入覆盖效果
- kCATransitionPush 推出效果
- kCATransitionReveal 揭露离开效果
subtype : 过渡动画的动画方向
- kCATransitionFromRight 从右侧进入
- kCATransitionFromLeft 从左侧进入
- kCATransitionFromTop 从顶部进入
- kCATransitionFromBottom 从底部进入

三、IOS动画的调用方式

第一种：UIView 代码块调用


    _demoView.frame = CGRectMake(0, SCREEN_HEIGHT/2-50, 50, 50);
    [UIView animateWithDuration:1.0f animations:^{
        _demoView.frame = CGRectMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50, 50, 50);
    } completion:^(BOOL finished) {
        _demoView.frame = CGRectMake(SCREEN_WIDTH/2-25, SCREEN_HEIGHT/2-50, 50, 50);
    }];



第二种：UIView [begin commit]模式


_demoView.frame = CGRectMake(0, SCREEN_HEIGHT/2-50, 50, 50);
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1.0f];
_demoView.frame = CGRectMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50, 50, 50);
[UIView commitAnimations];


第三种：使用Core Animation中的类


    CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"position"];
    anima.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-75)];
    anima.toValue = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-75)];
    anima.duration = 1.0f;
    [_demoView.layer addAnimation:anima forKey:@"positionAnimation"];


四、IOS动画的使用

4.1：基础动画（CABaseAnimation）

重要属性
fromValue ： keyPath对应的初始值
toValue ： keyPath对应的结束值

基础动画主要提供了对于CALayer对象中的可变属性进行简单动画的操作。比如：位移、透明度、缩放、旋转、背景色等等。
效果演示：
baseAnimation
位移动画代码演示：

    //使用CABasicAnimation创建基础动画
    CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"position"];
    anima.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-75)];
    anima.toValue = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-75)];
    anima.duration = 1.0f;
    //anima.fillMode = kCAFillModeForwards;
    //anima.removedOnCompletion = NO;
    [_demoView.layer addAnimation:anima forKey:@"positionAnimation"];

注意点
如果fillMode=kCAFillModeForwards和removedOnComletion=NO，那么在动画执行完毕后，图层会保持显示动画执行后的状态。但在实质上，图层的属性值还是动画执行前的初始值，并没有真正被改变。

4.2：关键帧动画（CAKeyframeAnimation）

CAKeyframeAnimation和CABaseAnimation都属于CAPropertyAnimatin的子类。CABaseAnimation只能从一个数值（fromValue）变换成另一个数值（toValue）,而CAKeyframeAnimation则会使用一个NSArray保存一组关键帧。
重要属性
values： 就是上述的NSArray对象。里面的元素称为”关键帧”(keyframe)。动画对象会在指定的时间(duration)内，依次显示values数组中的每一个关键帧
path： 可以设置一个CGPathRef\CGMutablePathRef,让层跟着路径移动。path只对CALayer的anchorPoint和position起作用。如果你设置了path，那么values将被忽略。
keyTimes： 可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keyTimes中的每一个时间值都对应values中的每一帧.当keyTimes没有设置的时候,各个关键帧的时间是平分的。

效果演示：
关键帧动画
圆形路径动画代码演示：

   CAKeyframeAnimation *anima = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(SCREEN_WIDTH/2-100, SCREEN_HEIGHT/2-100, 200, 200)];
    anima.path = path.CGPath;
    anima.duration = 2.0f;
    [_demoView.layer addAnimation:anima forKey:@"pathAnimation"];

说明：CABasicAnimation可看做是最多只有2个关键帧的CAKeyframeAnimation

4.3：组动画（CAAnimationGroup）

CAAnimation的子类，可以保存一组动画对象，将CAAnimationGroup对象加入层后，组中所有动画对象可以同时并发运行。
重要属性
animations : 用来保存一组动画对象的NSArray
效果演示：
组动画
组动画代码演示：

   CAKeyframeAnimation *anima1 = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    NSValue *value0 = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-50)];
    NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2-50)];
    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2+50)];
    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*2/3, SCREEN_HEIGHT/2+50)];
    NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*2/3, SCREEN_HEIGHT/2-50)];
    NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50)];
    anima1.values = [NSArray arrayWithObjects:value0,value1,value2,value3,value4,value5, nil];

    //缩放动画
    CABasicAnimation *anima2 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    anima2.fromValue = [NSNumber numberWithFloat:0.8f];
    anima2.toValue = [NSNumber numberWithFloat:2.0f];

    //旋转动画
    CABasicAnimation *anima3 = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
    anima3.toValue = [NSNumber numberWithFloat:M_PI*4];

    //组动画
    CAAnimationGroup *groupAnimation = [CAAnimationGroup animation];
    groupAnimation.animations = [NSArray arrayWithObjects:anima1,anima2,anima3, nil];
    groupAnimation.duration = 4.0f;

    [_demoView.layer addAnimation:groupAnimation forKey:@"groupAnimation"];

4.4：过渡动画（CATransition）

CAAnimation的子类，用于做过渡动画或者转场动画，能够为层提供移出屏幕和移入屏幕的动画效果。
重要属性
type：动画过渡类型

Apple 官方的SDK其实只提供了四种过渡效果。
- kCATransitionFade 渐变效果
- kCATransitionMoveIn 进入覆盖效果
- kCATransitionPush 推出效果
- kCATransitionReveal 揭露离开效果
私有API提供了其他很多非常炫的过渡动画，比如@”cube”、@”suckEffect”、@”oglFlip”、 @”rippleEffect”、@”pageCurl”、@”pageUnCurl”、@”cameraIrisHollowOpen”、@”cameraIrisHollowClose”等。
注意点
私有api，不建议开发者们使用。因为苹果公司不提供维护，并且有可能造成你的app审核不通过。

subtype：动画过渡方向

  • kCATransitionFromRight 从右侧进入
  • kCATransitionFromLeft 从左侧进入
  • kCATransitionFromTop 从顶部进入
  • kCATransitionFromBottom 从底部进入

startProgress：动画起点(在整体动画的百分比)
endProgress：动画终点(在整体动画的百分比)

效果演示：
过渡动画

4.5：综合案例

4.5.1 ： 仿Path菜单效果

效果演示：
仿Path菜单效果

动画解析：
1、点击红色按钮，红色按钮旋转。（旋转动画）
2、黑色小按钮依次弹出，并且带有旋转效果。（位移动画、旋转动画、组动画）
3、点击黑色小按钮，其他按钮消失，被点击的黑色按钮变大变淡消失。（缩放动画、alpha动画、组动画）
博主的话：代码过多，这里不做演示。文章最后提供代码下载地址。

4.5.2： 仿钉钉菜单效果

效果演示：
仿钉钉菜单效果
看上去挺炫的，其实实现很简单，就是位移动画+缩放动画。

4.5.3： 点赞烟花效果动画

效果演示：
点赞烟花效果动画

这里其实只有按钮变大效果使用的缩放动画。烟花效果 使用的是一种比较特殊的动画–粒子动画。
一个粒子系统一般有两部分组成：
1、CAEmitterCell：可以看作是单个粒子的原型（例如，一个单一的粉扑在一团烟雾）。当散发出一个粒子，UIKit根据这个发射粒子和定义的基础上创建一个随机粒子。此原型包括一些属性来控制粒子的图片，颜色，方向，运动，缩放比例和生命周期。
2、CAEmitterLayer：主要控制发射源的位置、尺寸、发射模式、发射源的形状等等。
以上两个类的属性还是比较多的，这里就不细讲了。大家可以google一下，详细的了解吧。

五、总结

任何复杂的动画其实都是由一个个简单的动画组装而成的，只要我们善于分解和组装，我们就能实现出满意的效果。动画其实也不是那么难。

六、下载地址

github下载地址：https://github.com/yixiangboy/IOSAnimationDemo

如果觉得对你还有些用，给一颗star吧。你的支持是我继续的动力。

个人博客地址：http://blog.csdn.net/yixiangboy

七、博主的话

以前看过很多别人的博客，学到不少东西。现在准备自己也开始写写博客，希望能够帮到一些人。如果工作不是特别忙的话，准备每周写一篇。

我的联系方式：
微博：新浪微博
博客：http://blog.csdn.net/yixiangboy
github：https://github.com/yixiangboy

文章标签：
iOS开发
关键词：
开发UI
iOS开发
iOS动画
UI开发
UI动画
kohpoll
目录
相关文章
请看我回答~
|
7月前
|
算法 计算机视觉 iOS开发
iOS 实时图像处理技术：使用 Core Image 和 Metal 进行高效滤镜应用
【4月更文挑战第8天】 在移动设备上实现高效的图像处理功能是现代应用程序开发中的一个关键需求。苹果的iOS平台提供了Core Image和Metal两大技术，它们为开发者提供了强大的工具来实现复杂的图像处理任务。本文将探讨如何使用Core Image进行基础图像处理，并结合Metal的性能优势，开发出一个自定义的实时图像滤镜。我们将通过创建一个能够动态调整参数并且具有实时反馈效果的滤镜来演示这一过程。
请看我回答~
277 0
请看我回答~
|
7月前
|
算法 计算机视觉 iOS开发
iOS 实时图像处理技术：Core Image 框架的应用
【4月更文挑战第8天】 在移动设备上实现高效的图像处理功能，对于提升用户体验和扩展应用程序能力至关重要。苹果公司的iOS平台提供了强大的Core Image框架，它允许开发者以高效和直观的方式执行复杂的图像处理任务。本文将深入探讨Core Image框架的关键特性，并通过实例演示如何在iOS应用中集成实时图像处理功能，不仅提高性能，同时保持了电池寿命的优化。我们将重点讨论面部识别、滤镜应用和性能优化等关键技术点，为读者提供一份全面的iOS图像处理指南。
请看我回答~
138 0
众所周知
|
1月前
|
Swift iOS开发 UED
如何使用Swift和UIKit在iOS应用中实现自定义按钮动画
本文通过一个具体案例，介绍如何使用Swift和UIKit在iOS应用中实现自定义按钮动画。当用户点击按钮时，按钮将从圆形变为椭圆形，颜色从蓝色渐变到绿色；释放按钮时，动画以相反方式恢复。通过UIView的动画方法和弹簧动画效果，实现平滑自然的过渡。
众所周知
60 1
龙大吉
|
2月前
|
Swift iOS开发 UED
如何使用Swift和UIKit在iOS应用中实现自定义按钮动画
【10月更文挑战第18天】本文通过一个具体案例，介绍如何使用Swift和UIKit在iOS应用中实现自定义按钮动画。当用户按下按钮时，按钮将从圆形变为椭圆形并从蓝色渐变为绿色；释放按钮时，动画恢复原状。通过UIView的动画方法和弹簧动画效果，实现平滑自然的动画过渡。
龙大吉
63 5
东方睿赢
|
3月前
|
Swift iOS开发 UED
揭秘一款iOS应用中令人惊叹的自定义动画效果，带你领略编程艺术的魅力所在！
【9月更文挑战第5天】本文通过具体案例介绍如何在iOS应用中使用Swift与UIKit实现自定义按钮动画，当用户点击按钮时，按钮将从圆形变为椭圆形并从蓝色渐变到绿色，释放后恢复原状。文中详细展示了代码实现过程及动画平滑过渡的技巧，帮助读者提升应用的视觉体验与特色。
东方睿赢
73 11
东方睿赢
|
4月前
|
Swift iOS开发 UED
【绝妙创意】颠覆你的视觉体验！揭秘一款iOS应用中令人惊叹的自定义动画效果，带你领略编程艺术的魅力所在！
【8月更文挑战第13天】本文通过一个具体案例，介绍如何使用Swift与UIKit在iOS应用中创建独特的按钮动画效果。当按钮被按下时，其形状从圆形变化为椭圆形，颜色则从蓝色渐变为绿色；释放后，动画反向恢复原状。利用UIView动画方法及弹簧动画效果，实现了平滑自然的过渡。通过调整参数，开发者可以进一步优化动画体验，增强应用的互动性和视觉吸引力。
东方睿赢
61 7
请看我回答~
|
4月前
|
测试技术 Swift iOS开发
探索iOS自动化测试：使用Swift编写UI测试
【8月更文挑战第31天】在软件开发的海洋中，自动化测试是保证船只不偏离航线的灯塔。本文将带领读者启航，深入探索iOS应用的自动化UI测试。我们将通过Swift语言，点亮代码的灯塔，照亮测试的道路。文章不仅会展示如何搭建测试环境，还会提供实用的代码示例，让理论知识在实践中生根发芽。无论你是新手还是有经验的开发者，这篇文章都将是你技能提升之旅的宝贵指南。
请看我回答~
114 0
众所周知
|
7月前
|
机器学习/深度学习 PyTorch TensorFlow
iOS设备功能和框架： 什么是 Core ML？如何在应用中集成机器学习模型？
iOS设备功能和框架： 什么是 Core ML？如何在应用中集成机器学习模型？
众所周知
199 0
众所周知
|
7月前
|
iOS开发
iOS设备功能和框架： 如何使用 Core Animation 创建动画效果？
iOS设备功能和框架： 如何使用 Core Animation 创建动画效果？
众所周知
148 0
QianChia
|
iOS开发
iOS - Core Animation 核心动画的使用
1、简单使用示例 1.1 时钟 QClockView.h @interface QClockView : UIView /// 创建时钟界面 + (instancetype)q_clockViewWithFrame:(CGRect)frame; @end QClockView.
QianChia
1228 0

热门文章

最新文章

  • 1
    「Mac畅玩鸿蒙与硬件41」UI互动应用篇18 - 多滑块联动控制器
  • 2
    「Mac畅玩鸿蒙与硬件40」UI互动应用篇17 - 照片墙布局
  • 3
    「Mac畅玩鸿蒙与硬件45」UI互动应用篇22 - 评分统计工具
  • 4
    「Mac畅玩鸿蒙与硬件47」UI互动应用篇24 - 虚拟音乐控制台
  • 5
    「Mac畅玩鸿蒙与硬件39」UI互动应用篇16 - 倒计时环形进度条
  • 6
    「Mac畅玩鸿蒙与硬件46」UI互动应用篇23 - 自定义天气预报组件
  • 7
    「Mac畅玩鸿蒙与硬件37」UI互动应用篇14 - 随机颜色变化器
  • 8
    「Mac畅玩鸿蒙与硬件38」UI互动应用篇15 - 猜数字增强版
  • 9
    「Mac畅玩鸿蒙与硬件36」UI互动应用篇13 - 数字滚动抽奖器
  • 10
    「Mac畅玩鸿蒙与硬件32」UI互动应用篇9 - 番茄钟倒计时应用
  • 1
    个人记录jenkins编译ios过程 xcode是9.4.1
    118
  • 2
    iOS开发者帐号申请指南（转）
    198
  • 3
    优化iOS中Objective-C代码调起支付流程的速度
    129
  • 4
    使用Swift开发一个简单的iOS应用的详细步骤。
    158
  • 5
    【Swift 开发专栏】Swift 与 UIKit：构建 iOS 应用界面
    319
  • 6
    【Swift 开发专栏】使用 Swift 开发一个简单的 iOS 应用
    136
  • 7
    打造高效移动应用：Android与iOS性能优化策略
    115
  • 8
    【专栏】在人工智能时代，Android和iOS两大移动操作系统巨头正加速融合与创新
    127
  • 9
    iOS 中的并发编程：GCD 与 Operation 的对比与实践
    165
  • 10
    实现iOS平台的高效图片缓存策略
    97

    • 相关电子书

    更多
  • 使用TensorFlow搭建智能开发系统自劢生成App UI代码
  • Fusion Design - 企业级UI解决方案揭秘
  • 使用TensorFlow搭建智能开发系统自动生成App UI
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)