forked from blackberry/Alice
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
222 lines (175 loc) · 13.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!DOCTYPE html>
<!--
Copyright 2011-2012 Research In Motion Limited.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>AliceJS - (A Lightweight Independent CSS Engine)</title>
<link href="favicon.ico" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="default.css">
<style type="text/css">
</style>
</head>
<body>
<a href="http://github.com/blackberry/Alice"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<div class="fineprint"><p id="version"> </p></div>
<div id="container">
<div id="card1" class="card-edge">
<div>
<h1 class="seo">AliceJS - (A Lightweight Independent CSS Engine)</h1>
<!-- AliceJS Logo (CSS Sprites) -->
<div id="logo">
<div>
<div id="logo-alice-img"></div>
</div>
<div id="logo-alice-txt-alice">
<div id="logo-alice-txt-a"></div>
<div id="logo-alice-txt-l"></div>
<div id="logo-alice-txt-i"></div>
<div id="logo-alice-txt-c"></div>
<div id="logo-alice-txt-e"></div>
</div>
<div id="logo-alice-txt-js">
<div id="logo-alice-txt-j"></div>
<div id="logo-alice-txt-s"></div>
</div>
</div>
<div style="clear: both;"></div>
<!-- Overview -->
<div style="text-align: center;">
<a href="demos/index.html" class="big button">View Demos</a>
</div>
<p><b>AliceJS</b> - <i>(A Lightweight Independent CSS Engine)</i> is a micro JavaScript library focused on using hardware-accelerated capabilities (in particular CSS3 features) in modern browsers for generating high-quality, high-end visual effects.</p>
<p>Created by Laurent Hasson (<a href="http://twitter.com/ldhasson" target="_blank">@ldhasson</a>, lhasson at rim dot com), and co-developed with Jim Ing (<a href="http://twitter.com/jim_ing" target="_blank">@jim_ing</a>, jing at rim dot com)</p>
<h2>Introduction</h2>
<p>While working on a simple game written in HTML5, I wanted to use a "flip3D" effect. That effect had become popular since CSS3 was introduced and performed well due to hardware-acceleration in most mobile browsers. I thought there would be a simple library to do the job, but all I found was samples of varying quality with tons of CSS and HTML markup that were not very cross-platform. Even more important, as I researched more options, I was surprised to see that in the many years since CSS3 appeared, we hadn't gone beyond Flip, Fade, Slide and Zoom. When compared to other major development environments where rich visual libraries are the norm, I lamented the apparent lack of progress in the HTML world.</p>
<p>So I decided to explore the ability to package such animations in a very lightweight library that would set up all the CSS and manage my base HTML for me, and keep my page clean of "effects logic". AliceJS was born. I had no idea where this could lead and I literally felt like the real Alice following the white rabbit down a scary hole. Very quickly, it became clear that lots of cool things could be done that would not just be fancy animations, but which could actually make a general UI better, and help with games too. This is an area that Research In Motion (RIM) is particularly interested in, pushing boundaries in graphically rich web applications to create more compelling experiences.</p>
<p>We are experimenting with many UI components, with tying in sensors, adding physics, and even organics. This is perhaps one of the more exciting feature of AliceJS. The human eye is very good at spotting differences in movement. Something so subtle as a millisecond difference can be perceived. Achieving natural/organic randomness is at the heart of most high-end visual effects in Hollywood blockbuster films. The beauty is that we don't need to reach that level of sophistication to give an effect some variability so that during the lifetime of the application, things don't feel repetitive. Varying just slightly the speed, perspective, and over-rotation on a flip effect adds a degree of subtle "freshness" every time it comes up.</p>
<h2>Demos</h2>
<a href="demos/index.html" class="big button">View Demos</a>
<p>The demos are separated into two sections: (1) basic demos where you can interactively adjust settings, and (2) more demos that show how AliceJS can be used in more complex use cases. These effects should be usable in an application, but the library is still in early alpha stages.</p>
<h2>Implementation</h2>
<pre class="prettyprint lang-html">
<div id="DIV1">HERE IS ONE DIV</div>
<img id="IMG1" src="/myimg.gif">
<script src="/alice/alice.core.js"></script>
<script src="/alice/alice.plugins.cheshire.js"></script>
<script>
alice.wobble(["DIV1", "IMG1"], 5, "center",
"200ms", "linear", "0ms", "infinite", "alternate", "running");
</script>
</pre>
<p>In here, we apply the Wobble effect to a DIV and an IMG. AliceJS doesn't touch the contents of the DIVs and respects whatever styling you set — it's up to you to do whatever fits your application goals. The parameters are:</p>
<ul>
<li>The target element(s) or node.</li>
<li>The rotation angle in degrees (here 5).</li>
<li>The anchor point, which can be "top-left", "top-center", "top-right", "center", etc... as well as explicit coordinates in % of the DIV's entire size, like {x: 200, y: 200}.</li>
<li>The duration of the effect (here 200ms).</li>
<li>The easing function as per standard CSS specs (here linear).</li>
<li>The delay before the animation starts (usually 0ms).</li>
<li>The number of iterations (here infinite).</li>
<li>The direction specifies if the animation should be played in reverse (here alternate).</li>
<li>The playstate is either running or paused (usually running).</li>
</ul>
<h2>Architecture</h2>
<p>AliceJS is completely self-contained and doesn't rely on any other libraries. It also focuses exclusively on setting up animations through CSS manipulations. This makes it easy to include along with other libraries without fear of collision as AliceJS doesn't try to do event handling (touch or mouse), nor does it enforce particular logic or layout elements. It's easy for instance to use AliceJS to animate a Dojo Dialog component for example, or a jQuery UI component, just by addressing the underlying DIV.</p>
<p>AliceJS is composed exclusively of JS files in a single folder, without image, CSS or any other dependencies. There is an "alice.core.js" file that contains common code and utilities, and then each effect has its own additional JS file, for example, "alice.plugins.cheshire.js". The goal is to keep each animation separate which makes it easy for a developer to create a minified build with only what is needed and nothing else. AliceJS is lean and right now, the gzipped minified version containing the entire library is about 5K only!</p>
<p>The syntax for AliceJS is also kept minimal and in line with CSS, which we believe to be really simple and easy to grasp. For example:</p>
<pre class="prettyprint lang-js">
alice.wobble("MyDiv", 5, "center",
"200ms", "linear", "0ms", "infinite", "alternate", "running");
</pre>
<p>This can be thought of as:</p>
<pre class="prettyprint language-css">
#MyDiv {
animate-wobble: 5 center 200ms linear 0ms infinite alternate running;
}
</pre>
<p>Or more detailed:</p>
<pre class="prettyprint language-css">
#MyDiv {
animate-wobble-rotation: 5;
animate-wobble-anchor: center;
animate-wobble-duration: 200ms;
animate-wobble-duration-timing-function: linear;
animate-wobble-iteration: infinite;
animate-wobble-direction: alternate;
animate-wobble-playstate: running;
}
</pre>
<p>The preceding CSS code is just mock code to illustrate how to think about AliceJS. All effects are modeled around the same approach where a single line of JavaScript is sufficient to set up an effect. Ultimately, we would like CSS to adopt higher-level animation constructs to make it real easy to add more evolved visual special effects to web applications.</p>
<p>Finally, although we focus primarily on hardware-accelerated CSS at this point, we don't want to rule out using other technologies in the future such as Canvas and WebGL. Although the library focuses really on visual effects, we are exploring ways to tie in sensor input to make things more interesting, without interfering with application logic, or bringing in too much baggage.</p>
<h2>Compatibility</h2>
<p>The library is intended to work at least on Chrome (V13 or higher because of hardware-acceleration requirements), iOS, and BlackBerry platforms. As the library evolves and more people participate, it's our goal to support all major platforms the best way we can.</p>
<h2>Downloads</h2>
<div>
<a href="http://github.com/blackberry/Alice/zipball/master" class="big button">ZIP</a>
<a href="http://github.com/blackberry/Alice/tarball/master" class="big button">TAR</a>
</div>
<h2>Unit Tests</h2>
<div>
<a href="specs/index.html">Jasmine</a>
</div>
<h2>License</h2>
<p>AliceJS is distributed under the Apache 2.0 license and is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.</p>
</div>
<div class="spacer"></div>
</div>
</div>
<div class="fineprint"><p>Copyright © 2011-2012 Research In Motion Limited • <a href="license.txt">License</a> • <a href="credits.html">Credits</a></p></div>
<!-- Syntax Highlighting -->
<link rel="stylesheet" type="text/css" href="libs/prettify/themes/sunburst.css">
<script type="text/javascript" src="libs/prettify/prettify.js"></script>
<script type="text/javascript" src="libs/prettify/lang-css.js"></script>
<!-- Feature Sniffer -->
<script type="text/javascript" src="libs/sniffer.js"></script>
<!-- AliceJS -->
<script src="js/src/alice.core.js"></script>
<script src="js/src/alice.plugins.cheshire.js"></script>
<script type="text/javascript">
prettyPrint();
sniffer.init();
document.getElementById('version').innerHTML = 'Version ' + alice.version + ' (Build: ' + alice.build + ')';
var a = alice.init(),
animateLogo = function () {
a.spin("logo-alice-img", "left", 2, "", "3000ms");
a.slide(document.getElementById("logo-alice-txt-alice").children, "left", "0%", {
value: "1000ms",
randomness: "100%",
offset: "250ms"
}, "easeOutQuint");
a.toss(document.getElementById("logo-alice-txt-js").children, "left", "10%", "", {
value: "2000ms",
randomness: "50%",
offset: "250ms"
}, "ease-in-out");
};
document.getElementById("logo").addEventListener("click", animateLogo, false);
animateLogo();
// Google Analytics
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-28534102-1']);
_gaq.push(['_setDomainName', 'github.com']);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>