• FLIP动画思想


    FLIP是一种助记缩写也是一种 Paul Lewis首创 的技术, 代表 First, Last, Invert, Play。 他的文章包含了对这一技术的一个很好的解释,但我会在这里概括一下:

    First 记录元素动画前的位置和尺寸
    Last 记录元素动画后的位置和尺寸,可以直接修改style,让元素瞬移过去
    Invert 使用transform和opacity将元素恢复至动画前状态,即相反操作
    Play 执行动画,将transform置为0或none,移动到动画后的位置和尺寸

    这种动画方法,适合以下场景:

    动画的Fist(初始态)或Last(最终态)不明确,这时候,使用FLIP非常容易做出动画效果。

    而状态都明确的条件下,使用FLIP是多此一举。

    例如:

    一个图片列表,要删除其中一个图片,要求剩余是所有图片,自动安装顺序填充,这个场景就非常适合使用FLIP来做,因为多个图片的最终位置是难以确定的,直接计算,要考虑到屏幕分辨率不同,位置差异,比较困难。

    1.  FLIP能提高动画流畅度

    用户在网页上进行交互时,比如click,touch,从交互结束到感知到程序的相应大约需要100ms的生理反应时间。如果你的网站在100ms内作出了相应的响应,那么在用户看来,就是得到了立即的响应。否则用户就会觉得反应延迟。

    所以我们在用户交互后要做100ms内准备好动画,然后以60fps的帧速进行动画的运行。这些动画准备计算就是getBoundingClientRect(或getComputedStyle)等的计算,而60fps的真素,则需要通过transform或者opacity的反转动画来实现。我们先将元素设置到了结束位置,通过transform来模拟开始位置,然后去除transform这个反向的过程,使得浏览器知道了动画的开始位置和结束位置,计算量锐减,流畅度速度提升。

    只要FLIP动画反转时间不超过100ms,就是一个流畅的动画,多数情况下,是不会超过的,甚至比正向动画还要快速。

  • 相关阅读:
    Uboot USB模式(RK3288变砖头的解决办法)
    C++ 解析一
    C++基础
    shell脚本分析二
    ASCII
    POJ 1970 The Game (DFS)
    PoJ1979 Red and Black (DFS)
    UVA 572 Oil Deposits (DFS)
    打印日历
    求第N个素数
  • 原文地址:https://www.cnblogs.com/mengff/p/13632803.html
Copyright © 2020-2023  润新知