精灵动画Javascript？
是否有一个jQuery插件或javascript库，支持像苹果Mac OS X dock这样的“精灵”动画效果？
奖金：Actionscript库？ C / C ++？ 。净？ 目标C？
从来没听说过。 “精灵”效应是CSS无法实现的失真：CSS变换（包括IE的矩阵filter）可让您调整轴，旋转和剪切的大小。 WebKit还为您提供了线性视角。 像精灵这样的弯曲扭曲不能用这些工具再现。
要在JavaScript中执行此操作，您必须将图像（或其他元素，如果您真的雄心勃勃）分成每个像素一行，并使用CSS转换水平压缩。 呈现效率非常低效，可能会看起来生涩和闪烁以及令人不快的混淆。
我已经设法用JS + CSS重现这个效果……它还没有完成但是这里是动画的预览：
在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解决方案。
它可以使用纯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/ ，他让我相信这是可能的。 另外，请注意，可能有许多不同的变换将给定的矩形变换为给定的三角形，这些变换仅在内部映射的方式上有所不同 – 也许我的解决方案在这方面并不是最好的。