且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

精灵动画的Javascript?

更新时间:2023-02-02 10:25:42

不,我知道的。在'魔鬼'的效果是无法用CSS来实现失真:CSS转换(包括IE的矩阵过滤器)给你两个轴,旋转及剪切调整。 WebKit的还为您提供了线性的观点。弯曲的扭曲像精灵不能用这些工具进行复制。

Not that I know of. The ‘genie’ effect is a distortion that cannot be achieved with CSS: CSS transformations (including IE's matrix filter) give you resizing on both axes, rotation and shear. WebKit additionally gives you linear perspectives. Curvy distortions like genie can't be reproduced with those tools.

要做到这一点在JavaScript中你必须使用水平一个CSS变换(如果你真的雄心勃勃或其他元素),以图象分成每个像素和壁球一行。这将是可怕的低效渲染和可能会看起来生涩flickery以及​​令人不快的别名。

To do it in JavaScript you'd have to split the image (or other element if you are really ambitious) into one line per pixel and squash horizontally using a CSS transformation. It would be horribly inefficient to render and would probably look jerky and flickery as well as unpleasantly aliased.