GFX 3D CSS3 动画库技术文档

1. 安装指南

GFX 是一个基于 jQuery 的 3D CSS3 动画库，能够为程序化创建 CSS3 过渡提供一些有用的功能。为了使用 GFX，您需要遵循以下安装步骤：

• 确保您的浏览器支持 WebKit，因为目前 GFX 仅支持 WebKit 浏览器（如 Safari 和 Chrome）。Firefox 支持正在计划中。
• 下载最新版本的 WebKit Nightly 以获得最佳效果。
• 将 gfx.js 文件包含到您的页面中，同时包含 jQuery 库。

<script src="site/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/gfx.js" type="text/javascript" charset="utf-8"></script>

2. 项目的使用说明

使用 GFX 非常简单。首先，通过传递一组属性和可选选项来调用 $.fn.gfx() 方法。

$("#element").gfx(properties, options)

属性可以是您想要过渡的任何 CSS 样式，例如 color、background 或 width。此外，您通常使用 -webkit-transform 前缀的任何属性，如 scale 和 rotate，都可以在不加前缀的情况下使用。

$(this).gfx({
  scale: "1.5",
  rotate: "180deg"
})

gfx() 的有效选项包括：

• duration：动画持续时间（毫秒）
• easing：动画流动控制，可以是 linear、ease-in、ease-out、ease-in-out 或自定义的立方贝塞尔
• complete：动画完成后执行的回调函数
• queue：指定使用哪个动画队列，默认为 fx。设置为 false 可禁用排队

与普通的 jQuery 动画一样，GFX 过渡可以链式调用，一个接一个运行。此外，您仍然可以使用 delay() 函数。

3. 项目API使用文档

GFX 提供了多种内置效果，您还可以轻松添加自己的效果。以下是一些内置效果的示例：

$.fn.gfxExplodeOut()
$.fn.gfxExplodeIn()
$.fn.gfxBlip()
$.fn.gfxFadeIn()
$.fn.gfxFadeOut()

GFX 还包含一个覆盖（lightbox）效果。首先，包含脚本 gfx.overlay.js（在 gfx.js 之后）。

<script src="lib/gfx.overlay.js" type="text/javascript" charset="utf-8"></script>

然后调用 $.gfxOverlay()，传递一个元素和可选设置。该元素将被克隆并显示在覆盖层上。

$(".about").click(function() {
  return $.gfxOverlay("#aboutText", {width: 300, height: 130});
});

翻转效果用于显示两个可以相互翻转的元素。使用它时，首先包含 gfx.flip.js 脚本。

<script src="lib/gfx.flip.js" type="text/javascript" charset="utf-8"></script>

然后，创建一个包含正确标记的元素，包括两个具有 .front 和 .back 类的子元素。

<div id="flip">
  <div class="front">正面</div>
  <div class="back">背面</div>
</div>

现在调用 $.fn.gfxFlip() 来设置翻转。

$("#flip").gfxFlip().click(function() {
  return $(this).trigger("flip");
});

4. 项目安装方式

请参考上述的安装指南部分，确保您的环境中包含了 jQuery 和 GFX 库文件，然后按照使用说明开始创建动画效果。