FLIP技术给Web布局带来的变化

特别声明:为感谢社区广大朋友对小站的支持,自2019年10月1日至2019年11月11日开通年费VIP通道,年费价格为 ¥299.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

用户界面是最直观的呈现给用户,而其中动画在这方面又扮演着重要的角色。正如@Nick Babich所说:动画将用户界面带入生活。而且,UI动画在用户体验方面也是重要的一环。特别是移动端开发的同学更清楚这一点。移动应用中的UI动画是体验的核心部分之一,而不是事后的想法。可是呢?事实上我们经常遇到的Web运用程序或App只是从一个视图跳到另一个视图,并没有给用户足够多的时间来处理当前环境中刚刚发生的事情。同时,很多同学都认为,动画通常在用户体验方面仅仅是锦上添花,并且被认为是不必要的、过渡的或太复杂的,无法实现的,也是因为这些原因,UI动画在很多Web应用中被忽略了。更糟糕的是,缺乏意义的动画会给自己产品体验方面带来损害。

通常,我们使用的Web应用大多数都只是简单地从一个视图切换到另一个视图,导致用户体验不直观,但是我们可以通过技术的手段把这方面的交互行为做得更得体:

在创建UI时,添加合理的UI过渡动效,避免跳转瞬间移动。如果将生活中的一些自然运动用到UI动效中来,将会给你的用户带来眼前一亮的感觉。毕竟,所有与你互动的东西都源自于生活中自然的运动。

接下来,我们将一起探讨你可能熟悉的某一类有意义的增强用户体验的UI动效。这种技术有一个专业术语,即FLIP(First, Last, Invert, Play)。FLIP技术可以以一种高性能的方式来动态的改变DOM元素的位置和尺寸,而不需要管它的布局是如何计算或渲染的(比如,heightwidthfloat、绝对定位、Flexbox和Grid等)。在改变的过程中将赋予一定的动效,从而达到我们所需要的目的,让UI动效更为合理,相应增强用户的体验。

视图之间的过渡

在移动应用程序中从一个视图移动到另一个视图时,焦点元素通常会在视图之间从一个位置移动到另一个位置。比如下面的这些场景:

图片展开和收缩效果

项目删除和添加时填充空白区域的效果

网格项的重新排序

特别声明,以前录屏效果来源于@harrisfreddy分享的《F.L.I.P. LAYOUT ANIMATION》话题。其实类似于这种视图切换的效果还有很多,比如@Nick Babich博客中列举的一些示例效果

但是在实现这些动画时,有一个烦人的问题:如何在同一个项目中的两个视图或状态之间有一个流畅地动效?。引入FLIP技术,我们就可以解决这样的烦恼,在两种状态之间可以共享一个元素。

为什么是FLIP技术

你可以已经尝试过了改变元素的heightwidthtopleft或者除也transformopacity之外的其他属性来实现一个动画效果。或许你已经在以往的经历(做的动效)中发现自己的实现的动效有点粗糙甚至卡顿,其实这是有一定原因的。任何触发布局变化的属性(比如height),浏览器都会递归检查布局中的其他元素是否也因此改变,这样的一个过程花销是很贵的。如果这个计算所费的时间比一个动画帧(大约16.7ms)更长,那么动画就会丢帧,从而导致动画迟滞,给用户的体验是,你的动画是卡顿的,这主要是因为动画丢的帧没有及时渲染。@Paul Lewis的博客《像素是昂贵的》一文中深入地阐述了如何渲染像素以及各种性能的开销。

@Paul Irish和@Paul Lewis在HTML5 Rocks写的另一篇文章中也解释了如何获得高性能的动画。简单地说,如何利用管道确保动画达到60fps。也就是说,只有改变属性才能触发合成(Compositing)而不是布局(Layout)或绘制(Paint):

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/javascript/animating-layouts-with-the-flip-technique.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部