FLIP动画思想

标签：初始   idt   ima   文章   分辨率   lazy   info   多个   ast   

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

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

这种动画方法，适合以下场景：

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

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

例如：

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

FLIP动画思想

标签：初始   idt   ima   文章   分辨率   lazy   info   多个   ast   

原文地址：https://www.cnblogs.com/mengff/p/13632803.html