4f68a0933c
fixed the resizable text area with IE problem fixed the ad space with IE problem merged the 7.2.0 and 7.1.4 change logs
376 lines
14 KiB
HTML
376 lines
14 KiB
HTML
|
|
<html>
|
|
<head>
|
|
<title>
|
|
JavaScript Documentation -
|
|
|
|
Motion.js
|
|
|
|
</title>
|
|
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="header">
|
|
<h1>JavaScript Documentation</h1>
|
|
<h3><a href="./index.html">Animation Utility</a></h3>
|
|
|
|
<div class="breadcrumbs">
|
|
|
|
<a href="javascript: alert('This location is TBD');">Home</a>
|
|
>
|
|
|
|
|
|
|
|
|
|
<a href="./index.html">Animation Utility</a>
|
|
>
|
|
<strong>Motion.js</strong>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div id="body">
|
|
|
|
|
|
<div class="nav">
|
|
<div class="module resources">
|
|
<ul class="content">
|
|
<li><a href="overview-tree.html">Tree View</a></li>
|
|
<li><a href="index-all.html">Element Index</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<div class="module">
|
|
<h4><a href="./allclasses-noframe.html">Classes</a></h4>
|
|
<ul class="content">
|
|
|
|
<li>
|
|
<a href="YAHOO.util.html">
|
|
YAHOO.util</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="YAHOO.util.Anim.html">
|
|
YAHOO.util.Anim</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="YAHOO.util.AnimMgr.html">
|
|
YAHOO.util.AnimMgr</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="YAHOO.util.Bezier.html">
|
|
YAHOO.util.Bezier</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="module">
|
|
<h4><a href="./overview-summary.html">Files</a></h4>
|
|
<ul class="content">
|
|
|
|
<li>
|
|
<a href="overview-summary-Anim.js.html">
|
|
Anim.js</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="overview-summary-AnimMgr.js.html">
|
|
AnimMgr.js</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="overview-summary-Bezier.js.html">
|
|
Bezier.js</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="overview-summary-ColorAnim.js.html">
|
|
ColorAnim.js</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="overview-summary-Easing.js.html">
|
|
Easing.js</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="overview-summary-Motion.js.html">
|
|
Motion.js</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="overview-summary-Scroll.js.html">
|
|
Scroll.js</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="main">
|
|
|
|
|
|
|
|
|
|
<h2>Motion.js</h2>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="section source">
|
|
<h3><a name="source">Souce Code</a> <span class="top">[<a href="#top">top</a>]</span></h3>
|
|
<pre class="sourceview"><span class="comment">/*
|
|
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
|
|
Code licensed under the BSD License:
|
|
http://developer.yahoo.net/yui/license.txt
|
|
Version: 0.10.0
|
|
*/</span>
|
|
|
|
<span class="comment">/**
|
|
* <span class="attrib">@class</span> Anim subclass for moving elements along a path defined by the "points" member of "attributes". All "points" are arrays with x, y coordinates.
|
|
* <p>Usage: <code>var myAnim = new YAHOO.util.Motion(el, { points: { to: [800, 800] } }, 1, YAHOO.util.Easing.easeOut);</code></p>
|
|
* <span class="attrib">@requires</span> YAHOO.util.Anim
|
|
* <span class="attrib">@requires</span> YAHOO.util.AnimMgr
|
|
* <span class="attrib">@requires</span> YAHOO.util.Easing
|
|
* <span class="attrib">@requires</span> YAHOO.util.Bezier
|
|
* <span class="attrib">@requires</span> YAHOO.util.Dom
|
|
* <span class="attrib">@requires</span> YAHOO.util.Event
|
|
* <span class="attrib">@requires</span> YAHOO.util.CustomEvent
|
|
* <span class="attrib">@constructor</span>
|
|
* <span class="attrib">@param</span> {String or HTMLElement} el Reference to the element that will be animated
|
|
* <span class="attrib">@param</span> {Object} attributes The attribute(s) to be animated.
|
|
* Each attribute is an object with at minimum a "to" or "by" member defined.
|
|
* Additional optional members are "from" (defaults to current value), "units" (defaults to "px").
|
|
* All attribute names use camelCase.
|
|
* <span class="attrib">@param</span> {Number} duration (optional, defaults to 1 second) Length of animation (frames or seconds), defaults to time-based
|
|
* <span class="attrib">@param</span> {Function} method (optional, defaults to YAHOO.util.Easing.easeNone) Computes the values that are applied to the attributes per frame (generally a YAHOO.util.Easing method)
|
|
*/</span>
|
|
(<span class="reserved">function</span>() {
|
|
YAHOO.util.Motion = <span class="reserved">function</span>(el, attributes, duration, method) {
|
|
<span class="reserved">if</span> (el) { <span class="comment">// dont break existing subclasses not using YAHOO.extend</span>
|
|
YAHOO.util.Motion.superclass.constructor.call(<span class="reserved">this</span>, el, attributes, duration, method);
|
|
}
|
|
};
|
|
|
|
YAHOO.extend(YAHOO.util.Motion, YAHOO.util.ColorAnim);
|
|
|
|
<span class="comment">// shorthand</span>
|
|
var Y = YAHOO.util;
|
|
var superclass = Y.Motion.superclass;
|
|
var <span class="reserved">prototype</span> = Y.Motion.<span class="reserved">prototype</span>;
|
|
|
|
<span class="comment">/**
|
|
* toString method
|
|
* <span class="attrib">@return</span> {String} string represenation of anim obj
|
|
*/</span>
|
|
<span class="reserved">prototype</span>.toString = <span class="reserved">function</span>() {
|
|
var el = <span class="reserved">this</span>.getEl();
|
|
var id = el.id || el.tagName;
|
|
<span class="reserved">return</span> (<span class="literal">"Motion "</span> + id);
|
|
};
|
|
|
|
<span class="reserved">prototype</span>.patterns.points = /^points$/i;
|
|
|
|
<span class="comment">/**
|
|
* Applies a value to an attribute
|
|
* <span class="attrib">@param</span> {String} attr The name of the attribute.
|
|
* <span class="attrib">@param</span> {Number} val The value to be applied to the attribute.
|
|
* <span class="attrib">@param</span> {String} unit The unit ('px', '%', etc.) of the value.
|
|
*/</span>
|
|
<span class="reserved">prototype</span>.setAttribute = <span class="reserved">function</span>(attr, val, unit) {
|
|
<span class="reserved">if</span> ( <span class="reserved">this</span>.patterns.points.test(attr) ) {
|
|
unit = unit || <span class="literal">'px'</span>;
|
|
superclass.setAttribute.call(<span class="reserved">this</span>, <span class="literal">'left'</span>, val[0], unit);
|
|
superclass.setAttribute.call(<span class="reserved">this</span>, <span class="literal">'top'</span>, val[1], unit);
|
|
} <span class="reserved">else</span> {
|
|
superclass.setAttribute.call(<span class="reserved">this</span>, attr, val, unit);
|
|
}
|
|
};
|
|
|
|
<span class="comment">/**
|
|
* Sets the default value to be used when "from" is not supplied.
|
|
* <span class="attrib">@param</span> {String} attr The attribute being set.
|
|
* <span class="attrib">@param</span> {Number} val The default value to be applied to the attribute.
|
|
*/</span>
|
|
<span class="reserved">prototype</span>.getAttribute = <span class="reserved">function</span>(attr) {
|
|
<span class="reserved">if</span> ( <span class="reserved">this</span>.patterns.points.test(attr) ) {
|
|
var val = [
|
|
superclass.getAttribute.call(<span class="reserved">this</span>, <span class="literal">'left'</span>),
|
|
superclass.getAttribute.call(<span class="reserved">this</span>, <span class="literal">'top'</span>)
|
|
];
|
|
} <span class="reserved">else</span> {
|
|
val = superclass.getAttribute.call(<span class="reserved">this</span>, attr);
|
|
}
|
|
|
|
<span class="reserved">return</span> val;
|
|
};
|
|
|
|
<span class="comment">/**
|
|
* Returns the value computed by the animation's "method".
|
|
* <span class="attrib">@param</span> {String} attr The name of the attribute.
|
|
* <span class="attrib">@param</span> {Number} start The value this attribute should start from for this animation.
|
|
* <span class="attrib">@param</span> {Number} end The value this attribute should end at for this animation.
|
|
* <span class="attrib">@return</span> {Number} The Value to be applied to the attribute.
|
|
*/</span>
|
|
<span class="reserved">prototype</span>.doMethod = <span class="reserved">function</span>(attr, start, end) {
|
|
var val = null;
|
|
|
|
<span class="reserved">if</span> ( <span class="reserved">this</span>.patterns.points.test(attr) ) {
|
|
var t = <span class="reserved">this</span>.method(<span class="reserved">this</span>.currentFrame, 0, 100, <span class="reserved">this</span>.totalFrames) / 100;
|
|
val = Y.Bezier.getPosition(<span class="reserved">this</span>.runtimeAttributes[attr], t);
|
|
} <span class="reserved">else</span> {
|
|
val = superclass.doMethod.call(<span class="reserved">this</span>, attr, start, end);
|
|
}
|
|
<span class="reserved">return</span> val;
|
|
};
|
|
|
|
<span class="comment">/**
|
|
* Sets the actual values to be used during the animation.
|
|
* Should only be needed for subclass use.
|
|
* <span class="attrib">@param</span> {Object} attr The attribute object
|
|
* <span class="attrib">@private</span>
|
|
*/</span>
|
|
<span class="reserved">prototype</span>.setRuntimeAttribute = <span class="reserved">function</span>(attr) {
|
|
<span class="reserved">if</span> ( <span class="reserved">this</span>.patterns.points.test(attr) ) {
|
|
var el = <span class="reserved">this</span>.getEl();
|
|
var attributes = <span class="reserved">this</span>.attributes;
|
|
var start;
|
|
var control = attributes[<span class="literal">'points'</span>][<span class="literal">'control'</span>] || [];
|
|
var end;
|
|
var i, len;
|
|
|
|
<span class="reserved">if</span> (control.length > 0 && control[0].constructor.toString().indexOf(<span class="literal">'Array'</span>) < 0) { <span class="comment">// could be single point or array of points (using toString in case passed from a frame)</span>
|
|
control = [control];
|
|
} <span class="reserved">else</span> { <span class="comment">// break reference to attributes.points.control</span>
|
|
var tmp = [];
|
|
<span class="reserved">for</span> (i = 0, len = control.length; i< len; ++i) {
|
|
tmp[i] = control[i];
|
|
}
|
|
control = tmp;
|
|
}
|
|
|
|
<span class="reserved">if</span> (Y.Dom.getStyle(el, <span class="literal">'position'</span>) == <span class="literal">'static'</span>) { <span class="comment">// default to relative</span>
|
|
Y.Dom.setStyle(el, <span class="literal">'position'</span>, <span class="literal">'relative'</span>);
|
|
}
|
|
|
|
<span class="reserved">if</span> ( isset(attributes[<span class="literal">'points'</span>][<span class="literal">'from'</span>]) ) {
|
|
Y.Dom.setXY(el, attributes[<span class="literal">'points'</span>][<span class="literal">'from'</span>]); <span class="comment">// set position to from point</span>
|
|
}
|
|
<span class="reserved">else</span> { Y.Dom.setXY( el, Y.Dom.getXY(el) ); } <span class="comment">// set it to current position</span>
|
|
|
|
start = <span class="reserved">this</span>.getAttribute(<span class="literal">'points'</span>); <span class="comment">// get actual top & left</span>
|
|
|
|
<span class="comment">// TO beats BY, per SMIL 2.1 spec</span>
|
|
<span class="reserved">if</span> ( isset(attributes[<span class="literal">'points'</span>][<span class="literal">'to'</span>]) ) {
|
|
end = translateValues.call(<span class="reserved">this</span>, attributes[<span class="literal">'points'</span>][<span class="literal">'to'</span>], start);
|
|
|
|
var pageXY = Y.Dom.getXY(<span class="reserved">this</span>.getEl());
|
|
<span class="reserved">for</span> (i = 0, len = control.length; i < len; ++i) {
|
|
control[i] = translateValues.call(<span class="reserved">this</span>, control[i], start);
|
|
}
|
|
|
|
|
|
} <span class="reserved">else</span> <span class="reserved">if</span> ( isset(attributes[<span class="literal">'points'</span>][<span class="literal">'by'</span>]) ) {
|
|
end = [ start[0] + attributes[<span class="literal">'points'</span>][<span class="literal">'by'</span>][0], start[1] + attributes[<span class="literal">'points'</span>][<span class="literal">'by'</span>][1] ];
|
|
|
|
<span class="reserved">for</span> (i = 0, len = control.length; i < len; ++i) {
|
|
control[i] = [ start[0] + control[i][0], start[1] + control[i][1] ];
|
|
}
|
|
}
|
|
|
|
<span class="reserved">this</span>.runtimeAttributes[attr] = [start];
|
|
|
|
<span class="reserved">if</span> (control.length > 0) {
|
|
<span class="reserved">this</span>.runtimeAttributes[attr] = <span class="reserved">this</span>.runtimeAttributes[attr].concat(control);
|
|
}
|
|
|
|
<span class="reserved">this</span>.runtimeAttributes[attr][<span class="reserved">this</span>.runtimeAttributes[attr].length] = end;
|
|
}
|
|
<span class="reserved">else</span> {
|
|
superclass.setRuntimeAttribute.call(<span class="reserved">this</span>, attr);
|
|
}
|
|
};
|
|
|
|
var translateValues = <span class="reserved">function</span>(val, start) {
|
|
var pageXY = Y.Dom.getXY(<span class="reserved">this</span>.getEl());
|
|
val = [ val[0] - pageXY[0] + start[0], val[1] - pageXY[1] + start[1] ];
|
|
|
|
<span class="reserved">return</span> val;
|
|
};
|
|
|
|
var isset = <span class="reserved">function</span>(prop) {
|
|
<span class="reserved">return</span> (typeof prop !== <span class="literal">'undefined'</span>);
|
|
};
|
|
})();
|
|
</pre>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="footer">
|
|
<hr />
|
|
Copyright © 2004 - 2005 Yahoo! Inc. All rights reserved.
|
|
<br />
|
|
Yahoo! Confidential.
|
|
<br /><br />
|
|
Documentation generated by <a href="http://jsdoc.sourceforge.net/">JSDoc</a>
|
|
version 1.9.5.8
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html>
|