先说下基本动画部分

基本动画部分比较简单, 但能实现的动画效果也很局限

使用方法大致为:

#1. 创建原始UI或者画面

#2. 创建CABasicAnimation实例, 并设置keypart/duration/fromValue/toValue

#3. 设置动画最终停留的位置

#4. 将配置好的动画添加到layer层中

举个例子, 比如实现一个圆形从上往下移动, 上代码:

 //设置原始画面
UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(, , , )];
showView.layer.masksToBounds = YES;
showView.layer.cornerRadius = .f;
showView.layer.backgroundColor = [UIColor redColor].CGColor;
[self.view addSubview:showView]; //创建基本动画
CABasicAnimation *basicAnimation = [CABasicAnimation animation]; //设置属性
basicAnimation.keyPath = @"position";
basicAnimation.duration = 4.0f;
basicAnimation.fromValue = [NSValue valueWithCGPoint:showView.center];
basicAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(, )]; //设置动画结束位置
showView.center = CGPointMake(, ); //添加动画到layer层
[showView.layer addAnimation:basicAnimation forKey:nil];

接下来说下关键帧动画

其实跟基本动画差不多, 只是能设置多个动画路径  使用方法也类似, 大致为

#1. 创建原始UI或者画面

#2. 创建CAKeyframeAnimation实例, 并设置keypart/duration/values 相比基本动画只能设置开始和结束点, 关键帧动画能添加多个动画路径点

#3. 设置动画最终停留的位置

#4. 将配置好的动画添加到layer层中

举个例子, 红色圆形左右晃动往下坠落 上代码:

 //设置原始画面
UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(, , , )];
showView.layer.masksToBounds = YES;
showView.layer.cornerRadius = .f;
showView.layer.backgroundColor = [UIColor redColor].CGColor; [self.view addSubview:showView]; //创建关键帧动画
CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animation]; //设置动画属性
keyFrameAnimation.keyPath = @"position";
keyFrameAnimation.duration = 4.0f; keyFrameAnimation.values = @[[NSValue valueWithCGPoint:showView.center],
[NSValue valueWithCGPoint:CGPointMake(, )],
[NSValue valueWithCGPoint:CGPointMake(, )],
[NSValue valueWithCGPoint:CGPointMake(, )]]; //设置动画结束位置
showView.center = CGPointMake(, ); //添加动画到layer层
[showView.layer addAnimation:keyFrameAnimation forKey:nil];

最后是利用缓动函数配合关键帧动画实现比较复杂的物理性动画

先说说什么是缓动函数, 就是有高人写了一个库可以计算出模拟物理性动画(比如弹簧效果)所要的路径

Github地址: https://github.com/YouXianMing/EasingAnimation

具体有哪些动画效果可看库中的缓动函数查询表, 简单举个小球落地的效果

上代码:

 //设置原始画面
UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(, , , )];
showView.layer.masksToBounds = YES;
showView.layer.cornerRadius = .f;
showView.layer.backgroundColor = [UIColor redColor].CGColor; [self.view addSubview:showView]; //创建关键帧动画
CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animation]; //设置动画属性
keyFrameAnimation.keyPath = @"position";
keyFrameAnimation.duration = 4.0f;

    //关键处, 在这里使用的缓动函数计算点路径
keyFrameAnimation.values = [YXEasing calculateFrameFromPoint:showView.center
toPoint:CGPointMake(, )
func:BounceEaseOut
frameCount:4.0f * ]; //设置动画结束位置
showView.center = CGPointMake(, ); //添加动画到layer层
[showView.layer addAnimation:keyFrameAnimation forKey:nil];

iOS基本动画/关键帧动画/利用缓动函数实现物理动画效果的更多相关文章

  1. WPF中的动画——(四)缓动函数

    缓动函数可以通过一系列公式模拟一些物理效果,如实地弹跳或其行为如同在弹簧上一样.它们一般应用在From/To/By动画上,可以使得其动画更加平滑. var widthAnimation = new D ...

  2. 支持xcode6的缓动函数Easing以及使用示例

    支持xcode6的缓动函数Easing以及使用示例 用xcode6新建工程后,直接导致不支持之前的Easing缓动函数的代码,经过修改后就可以正常使用了,虽然比不上POP高大上的动画,但用缓动函数的动 ...

  3. tween.js缓动(补间动画)

    一.理解tween.js 如果看到上面的已经理解了,可以跳过下面的部分.下面为对Tween.js的解释 下面就介绍如何使用这个Tween了,首先b.c.d三个参数(即初始值,变化量,持续时间)在缓动开 ...

  4. Silverlight动画学习笔记(三):缓动函数

    (一)定义: 缓动函数:可以将自定义算术公式应用于动画 (二)为什么要用缓动函数: 您可能希望某一对象逼真地弹回或其行为像弹簧一样.您可以使用关键帧动画甚至 From/To/By 动画来大致模拟这些效 ...

  5. JS---最终版本--封装缓动(变速)动画函数---增加任意多个属性&回调函数&层级&透明度

    封装缓动(变速)动画函数---增加任意多个属性&回调函数&层级&透明度 相较之前的,增加了2个判断,第一个判断是不是透明度,第二个判断是不是zindex, 都不是,就只是普通属 ...

  6. JS---封装缓动(变速)动画函数---增加任意多个属性&增加回调函数

    封装缓动(变速)动画函数---增加任意多个属性&增加回调函数 回掉函数fn,在所有元素到达目的位置后,判断是否传入一个函数,有就调用 if(fn){fn()}; 这样一次点击,产生多个动画 & ...

  7. JS动画之缓动函数分析及动画库

    上一篇讲了JS动画定时器相关知识,这一篇介绍下缓动函数及流行的动画库. 熟悉的图 实际使用 jquery animate()+jquery.easing插件的使用: $(selector).anima ...

  8. EaseType 缓动函数

    EaseType(动画曲线) EaseType 缓动函数或者我习惯叫它动画曲线,在很多的软件或动画中都有涉及到,下面是摘取的一些资料: 缓函数图例 Tween效果 每一幅图像当鼠标移上去,会有路径效果 ...

  9. NGUI缓动函数

    缓动函数:http://easings.net/zh-cn 研究NGUI的博客:http://dsqiu.iteye.com/category/295721

随机推荐

  1. Spring JdbcTemplate 调用存储过程

    遇到调用存储过程的业务,以前有用过,但不是用Spring的 JdbcTemplate去做的,这次是在一个已经有的SpringMVC框架的项目下写处理存储过程的. 参考网络中的方法,在实际操作中遇到两个 ...

  2. Java学习笔记 07 接口、继承与多态

    一.类的继承 继承的好处 >>使整个程序架构具有一定的弹性,在程序中复用一些已经定义完善的类不仅可以减少软件开发周期,也可以提高软件的可维护性和可扩展性 继承的基本思想 >>基 ...

  3. checked属性

    使用checked属性,你可以设置复选按钮和单选按钮默认被选中. 为此,只需在input元素中添加属性checked <input type="radio" name=&qu ...

  4. pushState 和 replaceState

    使用此方法浏览器前进后退仍然可查看对应内容 设置值 history.pushState({}, "页面标题", "xxx.html"); history.rep ...

  5. DB2 错误信息码

    000 00000 SQL语句成功完成 01xxx SQL语句成功完成,但是有警告 +012 01545 未限定的列名被解释为一个有相互关系的引用 +098 01568 动态SQL语句用分号结束 +1 ...

  6. [转]Android开发:Parallax效果的ScrollerView,改编自ParallaxListView

    https://github.com/nirhart/ParallaxScroll这个gethub上的地址 本文转自http://www.2cto.com/kf/201502/376970.html ...

  7. 从mac终端创建cocos2d-x项目在xcode和eclipse正常运行环境配置

    一.创建可以同时运行在xcode和eclipse的项目: 1.打开mac终端,进入cocos2d-x目录下的tools/project-creator,执行命令./create_project.py ...

  8. .NET环境下导出Excel表格的两种方式和导入两种类型的Excel表格

    一.导出Excel表格的两种方式,其中两种方式指的是导出XML数据类型的Excel(即保存的时候可以只需要修改扩展名为.xls)和真正的Excel这两种. using System; using Sy ...

  9. JavaScript中String的math方法与RegExp的exec方法的区别

    1.exec是正则表达式的方法,方法参数为字符串.match为字符串的方法,参数为正则表达式对象. 2.match与exec都返回数组.如果调用exec方法的正则表达式没有分组内容,则返回第一个匹配的 ...

  10. UITextField 的重写

    在很多产品设计的时候,产品设计人员设计出来的输入框总会要求,文字的内容距离做边框多少像素,编辑区域的其实点,距离左边多少像素,很多人绝的难以适应!其实这些都不存在很大的技术难度,一下这些方式都可以达到 ...