GSAP Flip 插件用于动画

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费额度!

Greensock3.9 版本 中免费提供了 GSAP Flip 插件。 FLIP 是一种动画概念,有助于实现超级性能的状态更改动画。 Ryan Mulligan 有一篇不错的博文

FLIP 由 Paul Lewis 创造,是 First(首)、Last(尾)、Invert(反转)和 Play(播放)的首字母缩写。 Flip 插件利用此技术,使 Web 开发人员能够轻松流畅地在状态之间转换元素。

GSAP Flip plugin logo.

使用 GSAP Flip 插件的示例

当然可以“手动”利用 FLIP,但很棘手。 这绝对是动画库可以为我们做的事情。 正如 Ryan 所说,Greenstock 做到了这一点。

1. 获取当前状态
2. 进行状态更改
3. 调用 Flip.from(state, options)

非常简单。 Ryan 用它制作了一个“添加到购物车”效果。

前几天我用它制作了一个“迷你照片库”,可以旋转哪个图片在顶部是较大的图片。

巧合的是,这正是我前几天最终写博客 “如何在 HTML 元素上循环遍历类” 的原因。