动画的post-Flash时代几乎是免费的。 CSS动画正迅速成为用户友好界面的基石在移动和桌面,和JavaScript库已经存在处理复杂的交互式动画。 之后,这么多“CSS和JavaScript动画”内斗,一个新的API专门为网络动画出来,可能只是团结两个阵营。
web的动画,这是一个激动人心的时刻,也是一次严重的误解和错误的信息。 2014年,我有机会周游世界来谈论 在用户界面设计中使用动画 。 我见到并采访了许多人使用和冠军的CSS和JavaScript。 在采访了许多开发人员,设计师和浏览器的代表,我发现了一个技术和人类的故事被告知。
你将要读的是纯粹的观察和公正的一个帐户,你将能够找到在网络动画的主题。
Flash可能消失,但网络动画的时代才刚刚开始
Flash的时代以来,它已经成为时尚认为动画装饰,多一个“华丽”事后,经常在贫穷的味道,就像一件不受欢迎的 眨眼标记。 但是,除非我们想要显示在屏幕上没有什么比复制其他,动画仍然是我们的朋友。
为 用户界面设计师 、动画加强层次结构、人际关系、结构和因果关系。 回到90年代早期的研究 表明,屏幕上的动画帮助人类理解发生了什么。 动画缝合在一起应用状态和分流工作,大脑的GPU——视觉皮层。
为 交互开发人员 复杂的视觉效果,从图表上显示板,电子游戏在平板电脑上——是不可能创造没有动画胶各部分组合在一起。 如果我们想要这些东西在互联网上,我们仍然需要动画。
遗憾的是,我们已经落后于运动设计竞赛。 产品使用动画受益用户会成功,静态或animation-abusing竞争对手将会失败。 目前,本地应用跳动的裤子了。 应用程序开发人员已经将动画融入他们的设计和充实工作流和原型设计工具 flinto 和 Mitya 从第一天开始。
但事情可能会扭转。 iOS的狩猎团队赶走了CSS动画和过渡规格,以便网站外观和感觉和iOS应用程序做的一样好。 甚至谷歌已经捡起, 把动画前面和中心 其材料设计建议,小心守则应用动画和过渡有意义,有目的。
动画是自然进化的下一步我们的应用程序和设备的生态系统。 它使数字世界各个年龄层的用户更直观和有趣的。 只要我们的设备运动gpu,它不会消失。
动画的所有事情
在其核心,动画只是一个可视化表示随时间和空间变化的速度。 所有的动画可以简化为三种类型:
静态的动画 从起点到终点,没有分支或逻辑。 这可以 CSS独自完成 ,因为 丰富的CSS加载动画 证明了。
有状态的动画 在其最简单的形式接受布尔输入- 点击打开一个菜单,点击关闭它 例如,两个国家之间的变化。 这是目前实现JavaScript框架的应用和删除类作用域CSS动画。
动态动画 可以有多个结果取决于用户输入和其他变量。 它使用自己的逻辑来确定如何应该动画和他们的端点是什么。 可能需要背后的“拖”页面根据你刷卡的速度,你的手指或动态变化的图形作为新的数据。 这是最棘手的动画在我们今天处理完成的工具。 CSS就不能用于这种类型的动画。
更多的国家! =动态动画
精明的CSS开发人员可能指出,有足够的州,CSS动画可以相似动态动画。 这是真正的一个点。 但真正的动态动画更多的比你可能预期的结束状态。
想象一下不起眼的加载酒吧。 有一个不同的类为每个百分点的“丰满”很容易就跑到一百行CSS,更不用说JavaScript的次数将会接触到DOM更新类和浏览器重绘。 我们绝对可以编写一个更动态加载程序单独使用JavaScript性能。
CSS动画是声明:除了少数伪类,如 :徘徊和 :目标,它接受来自用户和用户的上下文环境。 它只是作者告诉它做什么,不能应对新的输入或改变环境。 没有办法创建一个CSS动画,说:“如果你在页面的中间,这样做,否则,这样做。 “CSS不包含这样的逻辑。
当CSS-first开发者需要逻辑,他们通常先范围CSS类,使用JavaScript处理的逻辑在应用这类。 框架如 AngularJS 支持国家,许多UI交互容易适应一些州,如“加载”,“开放”和“选择。 “这些动画也在老的浏览器完全降低,提供急需的用户体验提升支持CSS动画和过渡的地方。
交互开发人员有不同的时间。 CSS动画也常常声明来处理这些开发人员想要的东西。 付费客户需求可靠动画跨浏览器的广泛,所以,许多交互开发人员和他们的工作室所做的所有聪明的开发人员做什么:让省力库定制自己的过程。 其中一些图书馆,喜欢 gsap 和 速度 向公众开放和发达。 但许多人永远不会被释放在野外,因为人民和机构创建他们没有时间或金钱(或将会)来支持一个开源项目。
这是一个令人深感担忧的故事,我听过一遍又一遍,它表明,许多开发人员都无需移动web的重新发明轮子。 没有足够的需求被认为是“好”的东西来支持许多竞争对手。 很容易看出图书馆像GSAP必须商业为了生存,或者赞助浮标库速度。
Flash做了伟大的事情给交互开发人员和用户界面设计人员一个通用工作流,适应各种各样的动画和编辑平台。 但自 史蒂夫·乔布斯在2010年宣布iPhone不会支持Flash ,许多前Flash开发者已经悄悄地进入流亡,带着他们的小知识。 现在,整整一代的网页设计师与相对上线不知道我们面临的机会和挑战时增加动画的复杂性。
但事情将变得很…动画。
网络动画API: 最伟大的 一个 你从未听说过的API
网络动画API是一个W3C规范,提供了一个统一的语言CSS和SVG动画,打开浏览器的动画引擎开发人员操作。 它下面的:
为动画引擎提供一个API,使我们能够开发更多浏览器动画工具,让动画库利用性能提高;
给(排位赛)动画它们自己的线程,摆脱闪避;
支持 运动路径 ;
提供post-animation回调;
引入 嵌套和测序动画 以来,我们还没有看到闪光;
让我们暂停,玩耍,探索,反向,加速或者减速播放 时机字典 和 动画播放器对象 。
这是 只是一个例子的Web API可以CSS动画无法 。
支持
Web动画API已经超过两年,和它的功能一直在推出Chrome和Firefox夜间在过去的六个月。 Mozilla是规范背后的主要力量。 与此同时,Chrome团队已经优先发货的功能。
微软API“考虑” Internet Explorer。 苹果,令人惊讶的是,Safari也采取了观望的态度。 我们只能幻想当API将达到这些 web应用程序引擎由古老的开源浏览器的叉子 。
早期用户想要探索这个API可以尝试 Web动画polyfill API ,这是由所取代 网络动画下 现在随便任何一天(更多关于polyfill和API可以发现 聚合物的网站项目 )。 然而,对于不支持的浏览器API,polyfill仍不如GSAP性能,基于javascript动画库的卫冕冠军。 因此,polyfill不是互动,开发人员需要为高性能项目投入生产。
这将是一段时间这个API支持。 有一半的浏览器制造商等着看开发人员将会使用它,并大多数开发人员拒绝使用一个工具,不是广泛支持,API将面临一个鸡生蛋还是蛋生鸡的场景。 然而,在一个台上交谈与谷歌的保罗Kinlan Fronteers,我建议,API是完全支持web应用程序在一个封闭的和"系统,例如谷歌,开发人员能够安全地使用它在一个“围墙花园”,直到它达到成熟和全面的支持。
性能
API的作者和实现者希望动画库开发人员将启动feature-sniffing API的支持去挖掘它的性能优势。 因为Web API使用CSS动画的渲染引擎,我们可以预期CSS的性能水平。 动画将运行在它们自己的线程,只要他们不依赖于任何发生在主线程,如JavaScript或布局。
说到布局,回流处理障碍仍然是最大的一个浏览器。 没有CSS或JavaScript动画可以绕过它,除非你把一切直接通过WebGL GPU(一些聪明的内部图书馆开发人员一直在做)。 除了不透明和 转换,带动了大量CSS属性将导致回流,布局的改变和/或重新绘制在屏幕上的像素。 的 将会改变CSS属性帮助一些 让我们点的东西,告诉浏览器,“将会发生改变,那件事。 你做你要做有效地改变它。 “希望随着浏览器越来越懂得图形,他们将这些元素进入自己的层或优化他们处理这些图形的方式。 这是消除黑客的第一步 translateZ(0)。
等“性能黑客”经常被打了一个神奇的修复每当动画闪避,但他们经常使用时无意中导致性能问题。 性能决定最好是真正留给浏览器从长远来看。 幸运的是,浏览器制造商争相让更少的属性触发回流,从而让他们从主线程。 对于动画库开发人员,这意味着Web动画API可以赢得合作伙伴的性能在不久的将来。
工具
任何人使用web动画渴望适当的动画开发工具:一个时间表,财产检查,更好的编辑,并且能够暂停,回放,否则检查调试时一个动画。 网络动画API将开放CSS渲染引擎的核心开发者和浏览器厂商自己创建这些工具。 这两个 铬 和Firefox准备动画功能的开发工具。 这个API打开这些可能性。
今天的Web动画社区
没有多少人以外的其他工作都知道网络动画的API。 标准社区是渴望真实的反馈交互和动画库开发人员。 然而,许多开发人员认为standardistas生活在象牙塔,远离战壕的放纵,客户的需求和Flash的经验教训。
老国王的冠军他曾流放的人。
公平地讲,standardistas还没有出来迎接他们的听众。 加入“官方”Web动画API谈话,你必须跨越一些障碍,让电子邮件链可能溢出的收件箱忙碌的开发人员。 或者,您可以在IRC和加入谈话,如果只有设计师使用IRC。 需要发生的谈话是不太可能发生,如果人最简单地说没有。 供应商和规范作者需要找到更多的方法来接触他们的关键的观众,否则风险构建一个API没有观众。
但standardistas并不是唯一有沟通问题。 作为一个社区,我们非常武断和快速嘲笑我们认为不值得的事情,Flash或一个API,我们不喜欢的样子。 我们中的很多人投资我们的自我的工具和流程。 但这些东西不能定义我们。 我们一起创建定义了我们。
动画库开发人员 , 阅读此规范 。 它很长,但是如果GreenSock的杰克柯南道尔能做到,你也可以。
交互开发人员 那些没有整天读一个巨大的规范,只是读了 自述polyfill的页面 。 这是一个完美的TLDR。 现在你知道什么是未来,你就会知道当它可能对你有用,是否优化图书馆的性能或构建一个浏览器UI时间表。
设计师 ,在工作中优先考虑的JavaScript。 polyfill玩,玩GSAP和速度。 找出这些东西能做什么对你的工作,CSS无法完成。
与网络动画,我们有一个难得的机会,把我们的自我放在一边,一起作为一个社区构建一个工具,未来的设计人员和开发人员可以构建伟大的事情。 为他们的缘故,我希望我们能。
本文由北京网站建设公司传诚信翻译传播，转载请注明！
