IOS开发入门IOS 动画设计(5)——用缓动函数实现物理动画效果
白羽 2019-07-10 来源 :网络 阅读 518 评论 0

摘要:本文将带你了解IOS开发入门IOS 动画设计(5)——用缓动函数实现物理动画效果,希望本文对大家学IOS有所帮助。

    本文将带你了解IOS开发入门IOS 动画设计(5)——用缓动函数实现物理动画效果,希望本文对大家学IOS有所帮助。

IOS开发入门IOS 动画设计(5)——用缓动函数实现物理动画效果

1. 缓动函数简介
   (1) 缓动函数的动画效果是建立在 CALayer 层级的关键帧动画基础之上的;
   (2) 缓动函数是一系列模拟物理效果(如抛物线)方程式的统称,用以计算给定两点之间的插值(即两点间插入的关键帧);
   (3) 两点之间插的值越多,效果越好,但是会耗费更多的性能;
   (4) 了解了缓动函数的原理对设计出自己想要的动画效果有很大帮助。
   常用的缓动函数种类如下图所示,可根据需求自行选择:
   
   关于 In、Out、InOut 的说明:
   ?123ease ***in***:加速度缓动;ease ***out***:减速度缓动;ease  ***InOut***:先加速度至50%,再减速度完成动画。
   方法介绍:
   ?12345678910Quad:二次方缓动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 层中;
   举个例子,实现一个圆形从上往下移动,实例代码如下:
   ?123456789101112131415161718192021//设置原始画面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频道!

本文由 @白羽 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程