AliceJS 基于 CSS3 轻量级 JavaScript 动画库

Question

AliceJS 是一个轻级量独立 CSS3 引擎，用于通过硬件加速特性在一些现在的浏览器上实现高质量的可视化特效。一般用于动画设计，是一个轻量级的 JavaScript 插件。

注意：这个插件必须在基于WebKit的浏览器上且支持CSS3运行。

开发背景

当工作在 HTML5 写成一个简单的游戏，我想用 Flip3D 效应。这影响了自CSS3表现良好，由于在大多数移动浏览器的硬件加速成为流行。我以为会有一个简单的库来做这项工作，但我发现，不同质量的样品与吨的CSS和HTML标记，不跨平台。更重要的是，我研究了更多的选择，我很惊讶地看到，在许多年以来CSS3的出现，我们没有超越翻转，褪色，滑动和缩放。相比其他主要的开发环境，丰富的视觉库是常态，我感叹在HTML世界进步明显缺乏。

所以我决定探索一个非常轻量级的库，将所有的CSS和管理我的基本的HTML包装这些动画的能力，保持我的网页干净“影响逻辑”。AliceJS出生。我不知道这会导致什么地方，我真的觉得像真正的爱丽丝以下的白色兔子下来一个可怕的洞。很快，很明显，很多很酷的事情可以做，那就不只是幻想动画，但实际上可以使一般的用户界面更好，并帮助游戏。这是一个领域，研究运动（轮辋）是特别感兴趣，推动边界的图形丰富的网络应用程序，以创建更令人信服的经验。

我们正在试验许多用户界面组件，在传感器，添加物理，甚至有机物。这也许是一个更令人兴奋的AliceJS特征。人的眼睛是非常善于发现运动中的差异。一些微妙的东西，作为一个毫秒的差异可以被认为。实现自然/有机的随机性是最高端的视觉效果在好莱坞大片电影的核心。美容是我们不需要达到的复杂程度，给一个影响一些变异，使在应用程序的生命期，不觉得重复的事情。不同的只是稍微的速度，角度和旋转的翻转效应增加了一个微妙的“新鲜度”的每一次都出现了。

如何使用

1、下载 AliceJS 的源文件，你可以通过 Github 地址下载，然后解压到你的项目中。

2、引入 AliceJS 的 JavaScript 文件，你可以引入压缩版本或者开发版本，最后引入一个特效文件。

<script src="js/alice/alice.js"></script>
// or
<script src="js/alice/alice.min.js"></script>
// Specific effect(s):
<script src="js/alice/src/alice.plugins.cheshire.js"></script>

3、创建你的HTML代码，例如：

<div id="deck" class="cards">
    <div class="card"><span>2</span></div>
    <div class="card"><span>3</span></div>
    <div class="card"><span>4</span></div>
    <div class="card"><span>5</span></div>
    <div class="card"><span>6</span></div>
    <div class="card"><span>7</span></div>
    <div class="card"><span>8</span></div>
    <div class="card"><span>9</span></div>
    <div class="card"><span>10</span></div>
    <div class="card"><span>J</span></div>
    <div class="card"><span>Q</span></div>
    <div class="card"><span>K</span></div>
    <div class="card"><span>A</span></div>
</div>

4、通过一个ID或者标签名应用AliceJS的特效

<script type="text/javascript">
var deck = document.getElementById("deck").children;

alicejs.slide({
    elems: deck, 
    move: "left", 
    duration: {
        "value": "1000ms",
        "randomness": "0%",
        "offset": "150ms"
    }
});
</script>

5、添加样式到你的DIV标签。

<style type="text/css">
.card {
    float: left;
    background: transparent;
    border: 1px solid #CCC;
    border-radius: 20px;
    width: 75px;
    height: 100px;
    padding: 10px;
    text-align: center;
}
</style>

相关链接

• Github地址：https://github.com/blackberry/Alice
• 项目地址：http://blackberry.github.io/Alice/index.html