Question

是否有支持“精灵”动画效果的jQuery插件或javascript库，如苹果Mac OS X底座？

Bonus：Actionscript库？ C / C ++？。净？目标C？

Answer 1

不是我知道的。 “精灵”效应是CSS无法实现的失真：CSS变换（包括IE的矩阵过滤器）可让您调整两个轴，旋转和剪切的大小。 WebKit还为您提供了线性视角。像精灵这样的弯曲扭曲不能用这些工具再现。

要在JavaScript中执行此操作，您必须将图像（或其他元素，如果您真的雄心勃勃）分成每个像素一行，并使用CSS转换水平压缩。呈现效率非常低，可能看起来很生涩，也可能是令人不快的混淆。

Answer 2

我已经设法用JS + CSS重现了这个效果......它还没有完成但是这里是动画的预览：

http://www.youtube.com/watch?v=UwUxo-R-mzU

Answer 3

在Hakan的实现的启发下，我编写了我的Genie Effect过渡库版本。

查看https://github.com/kamilkp/geniejs

和http://kamilkp.github.io/用于演示。

它适用于包括移动设备在内的所有浏览器（虽然在Firefox上并不总是顺畅）。它支持每个方向（顶部，底部，左侧，右侧）的精灵效果过渡。即使目标html元素是某个具有溢出自动或隐藏的容器的子元素，它也能工作。它本身是库不可知的，但我也写了一个方便的jQuery插件。如果您还在项目中包含html2canvas库，该插件可让您使用精灵效果为HTML元素设置动画（此处展开示例：http://kamilkp.co.nf/genie/canvas/）

浏览器的唯一要求是它需要支持CSS转换。这是一个纯粹的javascript + CSS解决方案。

Answer 4

http://wonderfl.net/c/qnTR

http://swingpantsflash.com/genie_transition/genietransition.html

Answer 5

可以使用纯CSS变换完成，但使用SASS更容易。一般的想法是你想要一个平滑的方式将一个矩形转换成一个三角形（所以通过它的一半是一个梯形）。这个问题是，任何线性变换都会将矩形变换为平行四边形（四边形平行的四边形），我们想要一个三角形。这意味着我们需要非线性变换。好消息是，您可以进行非线性变换，假装这些是3D变换，然后将矩形投影到2D屏幕空间。想想一个loooong人行道 - 它看起来像一个三角形。所以我们想要旋转矩形并使它很长。

动画的第一个和最后一个关键帧的转换非常直接：第一个具有身份转换，最后一个具有

 -webkit-transform: matrix3d(
   1,   0,  0, 0, 
   0 ,  1,  0, -9/$height,
   0,   0,  1, 0, 
   0,   0,  0, 10
 );

唯一有趣的专栏是最后一篇，它指出距离观众的距离对于顶行像素应为10“，对于最底部像素则为10-9 = 1。

问题在于中间帧，因为浏览器使用的默认插值算法试图将矩阵解释为基本操作（如旋转和平移）的组合，然后独立地插入每个操作。而且由于我们的最终变换类似于旋转90和无限伸展，插值将尝试同时执行旋转和拉伸，这看起来有点奇怪，因为其中一个运动“是圆形的”而另一个是“线性”和速度的两个不匹配。

为了弥补这一点，可以生成许多中间帧，为此我使用SASS。最终结果如下：http://codepen.io/anon/pen/ApHkc

此解决方案的大部分功劳应归功于作者http://persistent.info/web-experiments/distortion/，他确信这是可能的。另外，请注意，可能有许多不同的转换将给定的矩形转换为给定的三角形，这些转换仅在内部映射的方式上有所不同 - 也许我的解决方案在这方面并不是最好的。

精灵动画Javascript？

5 个答案: