IOS 动画设计(5)——用缓动函数实现物理动画效果
2016-11-04 11:01
281 查看
1. 缓动函数简介
(1) 缓动函数的动画效果是建立在 CALayer 层级的关键帧动画基础之上的;
(2) 缓动函数是一系列模拟物理效果(如抛物线)方程式的统称,用以计算给定两点之间的插值(即两点间插入的关键帧);
(3) 两点之间插的值越多,效果越好,但是会耗费更多的性能;
(4) 了解了缓动函数的原理对设计出自己想要的动画效果有很大帮助。
常用的缓动函数种类如下图所示,可根据需求自行选择:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201910/07/21e2397075a68467ca240dfe97036425)
关于 In、Out、InOut 的说明:
方法介绍:
2. 缓动函数与关键帧动画的联系
(1) 关键帧动画需要提供很多的帧来完善动画效果;
(2) 关键帧动画的帧可以通过一定的数学计算来提供需要的帧数;
(3) 关键帧动画只需要提供起始点,结束点,就可以通过缓动函数来计算中间“缺失”的帧;
(4) 缓动函数可以指定计算出多少帧;
(5) 帧数越多,动画越流畅,但同时耗费更多的GPU性能。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201910/07/fbddd6e5458927eb160953b91dab64b4)
3. 用缓动函数模拟物理动画
3.1 基本动画
基本动画部分比较简单, 但能实现的动画效果也很局限,使用方法大致为:
(1) 创建原始 UI 或者画面;
(2) 创建 CABasicAnimation 实例, 并设置; keypart/duration/fromValue/toValue ;
(3) 设置动画最终停留的位置;
(4) 将配置好的动画添加到 layer 层中;
举个例子,实现一个圆形从上往下移动,实例代码如下:
3.2 关键帧动画
其实跟基本动画差不多, 只是能设置多个动画路径 使用方法也类似, 大致为:
创建原始 UI 或者画面;
创建 CAKeyframeAnimation 实例, 并设置keypart/duration/values 相比基本动画只能设置开始和结束点, 关键帧动画能添加多个动画路径点;
设置动画最终停留的位置;
将配置好的动画添加到layer层中。
举个例子,实现一个红色圆球左右晃动往下坠落,实例代码如下:
3.3 用缓动函数配合关键帧动画实现比较复杂的物理性动画
(1)实现弹簧效果(时钟秒针振动的弹簧效果)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201910/07/c3af430f72b75f28a0bc4411805486c8)
相应源码(包括缓动函数库)可在 摆动时钟源码下载 处下载。
(2)实现碰撞效果(指定图片往下的碰撞效果)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201910/07/cc7693d297a292f21a0482b505d2c9e2)
(3)实现衰减效果(屏幕向左滑动的背景衰减效果)
(1) 缓动函数的动画效果是建立在 CALayer 层级的关键帧动画基础之上的;
(2) 缓动函数是一系列模拟物理效果(如抛物线)方程式的统称,用以计算给定两点之间的插值(即两点间插入的关键帧);
(3) 两点之间插的值越多,效果越好,但是会耗费更多的性能;
(4) 了解了缓动函数的原理对设计出自己想要的动画效果有很大帮助。
常用的缓动函数种类如下图所示,可根据需求自行选择:
关于 In、Out、InOut 的说明:
ease ***in***:加速度缓动; ease ***out***:减速度缓动; ease ***InOut***:先加速度至50%,再减速度完成动画。
方法介绍:
Quad:二次方缓动 Cubic:三次方缓动 Quart:四次方缓动 Quint:五次方缓动 Sine:正弦曲线缓动 Expo:指数曲线缓动 Circ:圆形曲线的缓动 Elastic:指数衰减的正弦曲线缓动 Back:超过范围的三次方缓动 Bounce:指数衰减的反弹缓动
2. 缓动函数与关键帧动画的联系
(1) 关键帧动画需要提供很多的帧来完善动画效果;
(2) 关键帧动画的帧可以通过一定的数学计算来提供需要的帧数;
(3) 关键帧动画只需要提供起始点,结束点,就可以通过缓动函数来计算中间“缺失”的帧;
(4) 缓动函数可以指定计算出多少帧;
(5) 帧数越多,动画越流畅,但同时耗费更多的GPU性能。
3. 用缓动函数模拟物理动画
3.1 基本动画
基本动画部分比较简单, 但能实现的动画效果也很局限,使用方法大致为:
(1) 创建原始 UI 或者画面;
(2) 创建 CABasicAnimation 实例, 并设置; keypart/duration/fromValue/toValue ;
(3) 设置动画最终停留的位置;
(4) 将配置好的动画添加到 layer 层中;
举个例子,实现一个圆形从上往下移动,实例代码如下:
//设置原始画面 UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)]; showView.layer.masksToBounds = YES; showView.layer.cornerRadius = 50.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(50, 300)]; //设置动画结束位置 showView.center = CGPointMake(50, 300); //添加动画到layer层 [showView.layer addAnimation:basicAnimation forKey:nil];
3.2 关键帧动画
其实跟基本动画差不多, 只是能设置多个动画路径 使用方法也类似, 大致为:
创建原始 UI 或者画面;
创建 CAKeyframeAnimation 实例, 并设置keypart/duration/values 相比基本动画只能设置开始和结束点, 关键帧动画能添加多个动画路径点;
设置动画最终停留的位置;
将配置好的动画添加到layer层中。
举个例子,实现一个红色圆球左右晃动往下坠落,实例代码如下:
//设置原始画面 UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)]; showView.layer.masksToBounds = YES; showView.layer.cornerRadius = 50.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(100, 100)], [NSValue valueWithCGPoint:CGPointMake(50, 150)], [NSValue valueWithCGPoint:CGPointMake(200, 200)]]; //设置动画结束位置 showView.center = CGPointMake(200, 200); //添加动画到layer层 [showView.layer addAnimation:keyFrameAnimation forKey:nil];
3.3 用缓动函数配合关键帧动画实现比较复杂的物理性动画
(1)实现弹簧效果(时钟秒针振动的弹簧效果)
相应源码(包括缓动函数库)可在 摆动时钟源码下载 处下载。
(2)实现碰撞效果(指定图片往下的碰撞效果)
(3)实现衰减效果(屏幕向左滑动的背景衰减效果)
相关文章推荐
- iOS 基本动画、关键帧动画、利用缓动函数实现物理动画效果
- iOS基本动画/关键帧动画/利用缓动函数实现物理动画效果
- 使用缓动动画函数实现导航栏效果
- Android UI设计之<二>自定义SwitchButton开关,实现类似IOS中UISwitch的动画效果
- 用AnimateWindow函数实现窗口动画效果
- 用AnimateWindow函数实现窗口动画效果
- iOS动画效果和实现
- Flex3学习轨迹:自定义缓动函数实现一个弹跳缓动动画
- 用 AnimateWindow 函数实现窗口动画效果
- iOS的动画效果类型及实现方法
- iOS动画效果和实现
- Android动画之3D翻转效果实现函数分析
- 缓动函数requestAnimationFrame 更好的实现浏览器经动画
- iOS-实现简单的动画效果
- iOS动画效果和实现
- iOS动画效果和实现
- iOS动画效果和实现
- VC:用AnimateWindow函数实现窗口动画效果
- IOS开发之UIView动画效果的实现
- IOS开动画效果之──实现 pushViewController 默认动画效果