1 <!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
4 <title>API: animation Bezier.js (YUI Library)
</title>
5 <link rel=
"stylesheet" type=
"text/css" href=
"assets/api.css">
9 <div id=
"doc3" class=
"yui-t2">
12 <h1>Yahoo! UI Library
</h1>
13 <h3>animation
<span class=
"subtitle">2.2.0</span></h3>
15 <a href=
"./index.html">Yahoo! UI Library
</a>
16 > <a href=
"./module_animation.html">animation
</a>
18 > Bezier.js (source view)
27 <div class=
"highlight" ><pre><span class=
"c">/**
</span>
28 <span class=
"c"> * Used to calculate Bezier splines for any number of control points.
</span>
29 <span class=
"c"> * @class Bezier
</span>
30 <span class=
"c"> * @namespace YAHOO.util
</span>
31 <span class=
"c"> *
</span>
32 <span class=
"c"> */
</span>
33 <span class=
"nx">YAHOO
</span><span class=
"o">.
</span><span class=
"nx">util
</span><span class=
"o">.
</span><span class=
"nx">Bezier
</span> <span class=
"o">=
</span> <span class=
"k">new
</span> <span class=
"k">function
</span><span class=
"o">()
</span> <span class=
"o">{
</span>
34 <span class=
"c">/**
</span>
35 <span class=
"c"> * Get the current position of the animated element based on t.
</span>
36 <span class=
"c"> * Each point is an array of
"x
" and
"y
" values (
0 = x,
1 = y)
</span>
37 <span class=
"c"> * At least
2 points are required (start and end).
</span>
38 <span class=
"c"> * First point is start. Last point is end.
</span>
39 <span class=
"c"> * Additional control points are optional.
</span>
40 <span class=
"c"> * @method getPosition
</span>
41 <span class=
"c"> * @param {Array} points An array containing Bezier points
</span>
42 <span class=
"c"> * @param {Number} t A number between
0 and
1 which is the basis for determining current position
</span>
43 <span class=
"c"> * @return {Array} An array containing int x and y member data
</span>
44 <span class=
"c"> */
</span>
45 <span class=
"k">this
</span><span class=
"o">.
</span><span class=
"nx">getPosition
</span> <span class=
"o">=
</span> <span class=
"k">function
</span><span class=
"o">(
</span><span class=
"nx">points
</span><span class=
"o">,
</span> <span class=
"nx">t
</span><span class=
"o">)
</span> <span class=
"o">{
</span>
46 <span class=
"k">var
</span> <span class=
"nx">n
</span> <span class=
"o">=
</span> <span class=
"nx">points
</span><span class=
"o">.
</span><span class=
"nx">length
</span><span class=
"o">;
</span>
47 <span class=
"k">var
</span> <span class=
"nx">tmp
</span> <span class=
"o">=
</span> <span class=
"o">[];
</span>
49 <span class=
"k">for
</span> <span class=
"o">(
</span><span class=
"k">var
</span> <span class=
"nx">i
</span> <span class=
"o">=
</span> <span class=
"m">0</span><span class=
"o">;
</span> <span class=
"nx">i
</span> <span class=
"o"><</span> <span class=
"nx">n
</span><span class=
"o">;
</span> <span class=
"o">++
</span><span class=
"nx">i
</span><span class=
"o">){
</span>
50 <span class=
"nx">tmp
</span><span class=
"o">[
</span><span class=
"nx">i
</span><span class=
"o">]
</span> <span class=
"o">=
</span> <span class=
"o">[
</span><span class=
"nx">points
</span><span class=
"o">[
</span><span class=
"nx">i
</span><span class=
"o">][
</span><span class=
"m">0</span><span class=
"o">],
</span> <span class=
"nx">points
</span><span class=
"o">[
</span><span class=
"nx">i
</span><span class=
"o">][
</span><span class=
"m">1</span><span class=
"o">]];
</span> <span class=
"c">// save input
</span>
51 <span class=
"c"></span> <span class=
"o">}
</span>
53 <span class=
"k">for
</span> <span class=
"o">(
</span><span class=
"k">var
</span> <span class=
"nx">j
</span> <span class=
"o">=
</span> <span class=
"m">1</span><span class=
"o">;
</span> <span class=
"nx">j
</span> <span class=
"o"><</span> <span class=
"nx">n
</span><span class=
"o">;
</span> <span class=
"o">++
</span><span class=
"nx">j
</span><span class=
"o">)
</span> <span class=
"o">{
</span>
54 <span class=
"k">for
</span> <span class=
"o">(
</span><span class=
"nx">i
</span> <span class=
"o">=
</span> <span class=
"m">0</span><span class=
"o">;
</span> <span class=
"nx">i
</span> <span class=
"o"><</span> <span class=
"nx">n
</span> <span class=
"o">-
</span> <span class=
"nx">j
</span><span class=
"o">;
</span> <span class=
"o">++
</span><span class=
"nx">i
</span><span class=
"o">)
</span> <span class=
"o">{
</span>
55 <span class=
"nx">tmp
</span><span class=
"o">[
</span><span class=
"nx">i
</span><span class=
"o">][
</span><span class=
"m">0</span><span class=
"o">]
</span> <span class=
"o">=
</span> <span class=
"o">(
</span><span class=
"m">1</span> <span class=
"o">-
</span> <span class=
"nx">t
</span><span class=
"o">)
</span> <span class=
"o">*
</span> <span class=
"nx">tmp
</span><span class=
"o">[
</span><span class=
"nx">i
</span><span class=
"o">][
</span><span class=
"m">0</span><span class=
"o">]
</span> <span class=
"o">+
</span> <span class=
"nx">t
</span> <span class=
"o">*
</span> <span class=
"nx">tmp
</span><span class=
"o">[
</span><span class=
"nb">parseInt
</span><span class=
"o">(
</span><span class=
"nx">i
</span> <span class=
"o">+
</span> <span class=
"m">1</span><span class=
"o">,
</span> <span class=
"m">10</span><span class=
"o">)][
</span><span class=
"m">0</span><span class=
"o">];
</span>
56 <span class=
"nx">tmp
</span><span class=
"o">[
</span><span class=
"nx">i
</span><span class=
"o">][
</span><span class=
"m">1</span><span class=
"o">]
</span> <span class=
"o">=
</span> <span class=
"o">(
</span><span class=
"m">1</span> <span class=
"o">-
</span> <span class=
"nx">t
</span><span class=
"o">)
</span> <span class=
"o">*
</span> <span class=
"nx">tmp
</span><span class=
"o">[
</span><span class=
"nx">i
</span><span class=
"o">][
</span><span class=
"m">1</span><span class=
"o">]
</span> <span class=
"o">+
</span> <span class=
"nx">t
</span> <span class=
"o">*
</span> <span class=
"nx">tmp
</span><span class=
"o">[
</span><span class=
"nb">parseInt
</span><span class=
"o">(
</span><span class=
"nx">i
</span> <span class=
"o">+
</span> <span class=
"m">1</span><span class=
"o">,
</span> <span class=
"m">10</span><span class=
"o">)][
</span><span class=
"m">1</span><span class=
"o">];
</span>
57 <span class=
"o">}
</span>
58 <span class=
"o">}
</span>
60 <span class=
"k">return
</span> <span class=
"o">[
</span> <span class=
"nx">tmp
</span><span class=
"o">[
</span><span class=
"m">0</span><span class=
"o">][
</span><span class=
"m">0</span><span class=
"o">],
</span> <span class=
"nx">tmp
</span><span class=
"o">[
</span><span class=
"m">0</span><span class=
"o">][
</span><span class=
"m">1</span><span class=
"o">]
</span> <span class=
"o">];
</span>
62 <span class=
"o">};
</span>
63 <span class=
"o">};
</span>
75 <li class=
"selected"><a href=
"module_animation.html">animation
</a></li>
77 <li class=
""><a href=
"module_autocomplete.html">autocomplete
</a></li>
79 <li class=
""><a href=
"module_button.html">button
</a></li>
81 <li class=
""><a href=
"module_calendar.html">calendar
</a></li>
83 <li class=
""><a href=
"module_connection.html">connection
</a></li>
85 <li class=
""><a href=
"module_container.html">container
</a></li>
87 <li class=
""><a href=
"module_datasource.html">datasource
</a></li>
89 <li class=
""><a href=
"module_datatable.html">datatable
</a></li>
91 <li class=
""><a href=
"module_dom.html">dom
</a></li>
93 <li class=
""><a href=
"module_dragdrop.html">dragdrop
</a></li>
95 <li class=
""><a href=
"module_element.html">element
</a></li>
97 <li class=
""><a href=
"module_event.html">event
</a></li>
99 <li class=
""><a href=
"module_history.html">history
</a></li>
101 <li class=
""><a href=
"module_logger.html">logger
</a></li>
103 <li class=
""><a href=
"module_menu.html">menu
</a></li>
105 <li class=
""><a href=
"module_slider.html">slider
</a></li>
107 <li class=
""><a href=
"module_tabview.html">tabview
</a></li>
109 <li class=
""><a href=
"module_treeview.html">treeview
</a></li>
111 <li class=
""><a href=
"module_yahoo.html">yahoo
</a></li>
118 <li class=
""><a href=
"YAHOO.util.Anim.html">YAHOO.util.Anim
</a></li>
119 <li class=
""><a href=
"YAHOO.util.AnimMgr.html">YAHOO.util.AnimMgr
</a></li>
120 <li class=
""><a href=
"YAHOO.util.Bezier.html">YAHOO.util.Bezier
</a></li>
121 <li class=
""><a href=
"YAHOO.util.ColorAnim.html">YAHOO.util.ColorAnim
</a></li>
122 <li class=
""><a href=
"YAHOO.util.Easing.html">YAHOO.util.Easing
</a></li>
123 <li class=
""><a href=
"YAHOO.util.Motion.html">YAHOO.util.Motion
</a></li>
124 <li class=
""><a href=
"YAHOO.util.Scroll.html">YAHOO.util.Scroll
</a></li>
131 <li class=
""><a href=
"Anim.js.html">Anim.js
</a></li>
132 <li class=
""><a href=
"AnimMgr.js.html">AnimMgr.js
</a></li>
133 <li class=
"selected"><a href=
"Bezier.js.html">Bezier.js
</a></li>
134 <li class=
""><a href=
"ColorAnim.js.html">ColorAnim.js
</a></li>
135 <li class=
""><a href=
"Easing.js.html">Easing.js
</a></li>
136 <li class=
""><a href=
"Motion.js.html">Motion.js
</a></li>
137 <li class=
""><a href=
"Scroll.js.html">Scroll.js
</a></li>
150 Copyright
© 2007 Yahoo! Inc. All rights reserved.