Changeset 308

Show
Ignore:
Timestamp:
09/29/07 20:45:04 (6 years ago)
Author:
secondlife
Message:

* Add test
* Add new examples
* New tweening options(suffix/prefix) (thx os0x)
* refactoring
* Add JSTweener.Utils

Location:
lang/javascript/jstweener/trunk
Files:
5 added
1 modified
1 moved

Legend:

Unmodified
Added
Removed

  • lang/javascript/jstweener/trunk/examples/transitions.html

    r258 r308  
    44    <meta http-equiv="Content-Style-Type" content="text/css"> 
    55    <meta http-equiv="Content-Script-Type" content="text/javascript"> 
    6     <title>JSTweener Example</title> 
     6    <title>JSTweener Example - Transitoins</title> 
    77    <script language="JavaScript" src="../src/JSTweener.js"></script> 
    88    <script language="JavaScript"> 
    … …  
    7272  </head> 
    7373  <body> 
    74     <h1>JSTweener Example</h1> 
     74    <h1>JSTweener Example - Transitoins</h1> 
    7575    <p> 
    7676    <label for="time">Time:</label> <input id="time" size="4" type="text" value="1"></input> 

  • lang/javascript/jstweener/trunk/src/JSTweener.js

    r293 r308  
    11/* 
    2  * Yuichi Tateno. <hotch_potch@N0!spam@gmail.com> 
     2 * Yuichi Tateno. <hotchpotch@N0!spam@gmail.com> 
    33 * http://rails2u.com/ 
    44 *  
    … …  
    3434        transition: 'easeoutexpo', 
    3535        delay: 0, 
     36        prefix: {}, 
     37        suffix: {}, 
    3638        onStart: undefined, 
    3739        onStartParams: undefined, 
    … …  
    4951        } 
    5052    }, 
    51     toNumber: function(value) { 
     53    toNumber: function(value, prefix, suffix) { 
    5254        // for style 
    53         return value.match(/[0-9]/) ? Number(value.replace('px','')) : 0; 
     55        if (!suffix) suffix = 'px'; 
     56 
     57        return value.toString().match(/[0-9]/) ? Number(value.toString().replace( 
     58                                                        new RegExp(suffix + '$'), '' 
     59                                                       ).replace( 
     60                                                        new RegExp('^' + (prefix ? prefix : '')), '' 
     61                                                       )) 
     62                                               : 0; 
    5463    }, 
    5564    addTween: function(obj, options) { 
    … …  
    7685 
    7786        for (var key in options) { 
    78             o.targetPropeties[key] = [this.toNumber(obj[key]), options[key] - this.toNumber(obj[key])]; 
     87            if (!o.prefix[key]) o.prefix[key] = ''; 
     88            if (!o.suffix[key]) o.suffix[key] = ''; 
     89            var sB = this.toNumber(obj[key], o.prefix[key],  o.suffix[key]); 
     90            o.targetPropeties[key] = { 
     91                b: sB, 
     92                c: options[key] - sB 
     93            }; 
    7994        } 
    8095 
    … …  
    107122            if (t >= d) { 
    108123                for (var property in o.targetPropeties) { 
    109                     var b = o.targetPropeties[property][0]; 
    110                     var c = o.targetPropeties[property][1]; 
     124                    var tP = o.targetPropeties[property]; 
    111125                    try { 
    112                         o.target[property] = b + c; 
     126                        o.target[property] = o.prefix[property] + (tP.b + tP.c) + o.suffix[property]; 
    113127                    } catch(e) {} 
    114128                } 
    … …  
    132146            } else { 
    133147                for (var property in o.targetPropeties) { 
    134                     var b = o.targetPropeties[property][0]; 
    135                     var c = o.targetPropeties[property][1]; 
    136                     var val = o.easing(t, b, c, d); 
     148                    var tP = o.targetPropeties[property]; 
     149                    var val = o.easing(t, tP.b, tP.c, d); 
    137150                    try { 
    138                         // FIXME for IE. A Few times IE (style.width||style.height) = value is throw error... 
    139                         o.target[property] = val; 
     151                        // FIXME:For IE. A Few times IE (style.width||style.height) = value is throw error... 
     152                        o.target[property] = o.prefix[property] + val + o.suffix[property]; 
    140153                    } catch(e) {} 
    141154                } 
    … …  
    159172    } 
    160173}; 
     174 
     175JSTweener.Utils = { 
     176    bezier2: function(t, p0, p1, p2) { 
     177         return (1-t) * (1-t) * p0 + 2 * t * (1-t) * p1 + t * t * p2; 
     178    }, 
     179    bezier3: function(t, p0, p1, p2, p3) { 
     180         return Math.pow(1-t, 3) * p0 + 3 * t * Math.pow(1-t, 2) * p1 + 3 * t * t * (1-t) * p2 + t * t * t * p3; 
     181    }, 
     182    allSetStyleProperties: function(element) { 
     183         var css; 
     184         if (document.defaultView && document.defaultView.getComputedStyle) { 
     185             css = document.defaultView.getComputedStyle(element, null); 
     186         } else { 
     187             css = element.currentStyle 
     188         } 
     189         for (var key in css) { 
     190             if (!key.match(/^\d+$/)) { 
     191                 try { 
     192                 element.style[key] = css[key]; 
     193                 } catch(e) {}; 
     194             } 
     195         } 
     196    } 
     197} 
    161198 
    162199/*