做 Flash 动画动作中间怎么加帧不会很卡，别中间帧加的很少但是很流畅，而我中间帧加了很多反而很卡呢？ - 知乎8被浏览530分享邀请回答0添加评论分享收藏感谢收起成为懂技术的设计师！教你如何让界面动画自然流畅
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & & / & 正文
Hi,我是优设小编
成为懂技术的设计师！教你如何让界面动画自然流畅
编者按：扁平化让界面动画越来越流行，但想要做出自然流畅的动效，懂软件还不行，你得学点函数。（哎喂，先别跑！）腾讯的史蒂夫同学直接从产品出发，聊聊如何用科学的方法地让动画更自然。语言浅显易懂，文末附动效小惊喜，学习下。
随着软硬件技术的发展，界面动画在我们的日常生活中随处可见。桌面软件、移动应用、云服务等，此刻环顾四周，我相信你一定能发现他们。
在产品中动画未必越多越好，也未必越炫越好。不同的产品类型对动画的要求也不同。常见的动画主要承担向用户解释界面与界面之间的关系，元素与元素间的关系以及特定元素的强化。
如果你关注过界面动画，你可能见过以下这些动画曲线。摘自
他们表述了动画变化的程度与时间的关系。通过合理利用这些动画曲线背后的原理，可以让动画看起来更加真实。
这里说到我们要让界面动画更自然。如何做到自然？只要遵循客观物理规律以及人得视觉经验，动画就会看上去真实自然。
为什么要讲动画函数？相信很多设计师看到下面的文章会的觉得太枯燥。
那我们回到产品研发过程，在产品里，常见的动画实现有这么几种：
1. 设计师逐帧绘制；开发同学实现循序/循环播放逻辑。
2. 设计师提供动画资源文件如（视频、flash、gif）；开发同学将资源嵌入产品。
3. 设计师提供动画形式、参数与元素；开发同学完成动画实现，如：html5/CSS动画。
文本想针对第三种形式，帮助设计师了解动画背后的科学知识，可以有具体的参数与开发同学沟通。
如果你熟悉物理课本里的运动公式，请跳过第一部分。
我们先从最简单的运动动画说起。我们客观物理规律还是得从牛顿第二定律说起。F＝ma，如果大家不明白这个公式，没关系。
请允许我不那么讲究术语的严谨性。通俗点来说，就是运动动画响应变化情况与执行动画的物体本身有关。如果你想表现的物体是一个沉甸甸的，那么他们的起始动画响应/参数的变化会比较慢。反之，物体是轻巧的，那么其起始动画响应/参数的变化会比较快。
从图上可以看到如果是相同的操作且移动相同的距离，轻巧的所花的时间越短。
提到阻尼，需要介绍三个概念：临界阻尼、过阻尼、欠阻尼。
生活中一些高档的门或橱柜。他们在开合的过程中为了不造成太大的声响，他们的机械结构阻尼会尽量设计接近临界阻尼。这个过程最容易让人接受，不会感觉有外界干扰。过阻尼和欠阻尼，通常能让你感觉到有一只隐形的手，阻碍或促进运动。
从字面上会容易理解，就是阻尼很大，阻碍运动的发展。有些自动门或电梯门在闭合的过程中，在最后段里往往需要更长的时间。另外，记忆枕的恢复的过程也是过阻尼。
阻尼不够，继而形成了振荡的特征。生活中的一些弹簧门，在关闭的过程中，会多次摆动，最终趋于闭合。
做一个比较细腻的界面动画时候，如果追求理性一些，可以把动画的成果拆解成三个阶段。启动、运行、收尾。设计师需要花更多的时间去考虑启动与收尾过程。
· 启动阶段：体现力、质量、环境，可以表现材质的轻盈与厚重。
· 收尾阶段：体现质量、速度、环境。阻尼通常在这个阶段体现。
请大家关注启动与收尾阶段。
动画曲线仅作示意感受，可能与实际动画有所出入。
呼吸动画，常用于界面元素的提醒。
对于这个动画，设计师最直观的印象就是闪烁。在实施的过程中，对于闪烁一词会被赋予不同的理解。
· 设计师眼中的闪烁：“渐显 -& 渐隐 -& 渐显 -& 渐隐”；
· 工程师眼中的闪烁：“显示 -& 隐藏 -& 显示 -& 隐藏”；
如何把动画做得更细腻，就在于如何将渐显与渐隐的过程如何描述得更加仔细。
对于最早的渐显、渐隐动画，我首先想到了三角函数。
仔细观察这个函数，可以发现他的特点是在一个周期里是启动渐增、收尾减缓的过程。适合开发利用简单代码实现的动画效果。
有兴趣的同学可以用原型感受一下。做闪烁动画，用到三角函数其实就可以满足大部分场景。
我在尝试的动画的时候，把他作为呼吸函数来看，总觉得哪里还是不太自然。看起来“呼吸比较急促”。
我们来分析一下呼吸函数。
为什么看起来呼吸局促呢？请各位看官现在试试深呼吸，体会一下。你会发现在我们的在吸气的阶段，很快会就达到肺撑满的状态，然后吐气的阶段可以持续很久。大体上比例分布是这样的。
融合入三角函数，将起始的渐增与收尾的减缓引入。感谢Don同学提供了一个完整的函数。
这个函数的周期为6，峰值出现在2。整个变化起始与收尾都是渐变过渡。
k=1/3，t=6, n={1,2,3,…}
大家感受一下
之前我利用了些业余时间，在Arduino硬件上试了一下。大家可以看一下视频。我以为渐显、渐隐的动画的是这个样的：
视频地址：
其实应该是这样的：
视频地址：
除此之外，使用CSS3制作自然流畅界面一样棒棒哒！看这篇
除了在动画变化过程中对客观规律的描述外，对于用户场景的还原也能增加自然感。
比如这个站点的checkbox。我们在日常生活中，面对纸质的选项，我们会选择涂抹的方式来进行选择。
或者这样删除
更多效果，可以访问 → 。
写在最后的小工具
如果使用 Mac 的小伙伴，Apple 提供了一个绘制函数图像的利器 Grapher。本文的函数均由此工具绘制。感兴趣的同学可以尝试用一下。
动效设计好文合集！
教你快速保存动效！
手把手教你设计动态界面！
腾讯出品的动效设计指南！
原文地址：
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量76万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：
设计中的摇滚乐！带你认识网页设计中的GRUNGE（一）
编者按：GRUNGE 原意是摇滚乐的一种风格形式，描述音乐里那种嘈杂而失真的感觉，但在设计行业里，它有特别的含义，表现为不规则”“颓废”“...
Heyu：在上一篇文章《动效设计基础（一）：缓动与运动曲线》中，我们讨论了动效的几种常见形式以及缓动的重要性。那么，我们为什么要用动效呢？除了酷炫好玩...为何有的产品、服务特别受欢迎？ 是因为这些产品、服务在内容、外观、设计、可用性、功能等方面具有无可匹敌的优势。其实，所有的这些层面都属于交互设计的细节...编者按：今年很多设计师开始玩动效，不过想让你的动效设计落地，远不是会AE 就能解决的。本文总结了让动效落地的整体解决思路，附动效软件推荐，建议阅读。 ...什么是动态设计，不了解？木关系，百度移动用户体验部 高级视觉设计师 @TCWison 为动态设计吹响了集结号，从前世今生谈到在互联网的具体应用，还捎带...日常工作中，交互设计师不仅需要处理复杂的业务逻辑、排放各种层次的信息，还经常需要制作各类动效。除了用于可用性测试、方案汇报与演示之外，动效还承担着丰富...随着技术和硬件设备性能的提升，动效已经不再是视觉设计中的奢侈品。动效不仅仅是华丽的动态效果，它首先帮助设计师和用户解决了许多界面功能上的问题，让这用户...
我们的团队
大家在关注 上传我的文档
 下载
 收藏
该文档贡献者很忙，什么也没留下。
 下载此文档
浅谈flash中常见的几种动画类型及应用良
下载积分：500
内容提示：浅谈flash中常见的几种动画类型及应用良
文档格式：PDF|
浏览次数：277|
上传日期： 03:27:57|
文档星级：
全文阅读已结束，如果下载本文需要使用
 500 积分
下载此文档
该用户还上传了这些文档
浅谈flash中常见的几种动画类型及应用良
关注微信公众号Flash如何制作旋转动画效果
作者：佚名
字体：[ ] 来源：互联网 时间：06-05 11:09:18
Flash如何制作旋转动画效果？下面小编就为大家详细介绍一下，不会的朋友可以过来参考一下，希望能对大家有所帮助
我在这里要教大家如何制作旋转的动画，旋转动画在动画片里是很常用的，比如人物的翻跟斗，球的转动等等.....我就用一个小白的矩形来为大家演示吧，如图是效果。
第一步，我们在舞台上首先画一个图形，因为矩形好看效果，我就用矩形代替了，工具是矩形工具，去边框。
第二步，我们分别在第30和第60帧处插入关键帧，如果要更有效果则是要更加的细致划分帧数，这里粗略。
第三步，我们在之间插入如图的补间动画，并且打开右侧的变形，库的上面
第四步，我们点击第30帧，用变形工具里面的旋转，输入90度，我们可以看到图形进行了旋转。
第五步，60帧采用30帧内容，也就是复制第30帧到60帧处，这样就不会出现方向性错误了，旋转的很流畅，还要看到下面的缓动，在钱一个补间处调到+100，后一个补间调到-100，效果更佳。
第六步，如果觉得不是很逼真，不流畅的话呢就加更多的帧，比如下图一般，加越多的帧就越是流畅，旋转的越是精致。
注意不要把中心点放错了位置。
以上就是Flash如何制作旋转动画效果方法介绍，希望能对大家有所帮助！
大家感兴趣的内容
12345678910
最近更新的内容}