OpenLayers OpenLayers

Ticket #1308: tween.patch

File tween.patch, 14.9 kB (added by crschmidt, 1 year ago)

With licensing bits

  • tests/test_Tween.html

    old new  
     1<html>  
     2<head>  
     3    <script src="../lib/OpenLayers.js"></script>  
     4    <script type="text/javascript"> 
     5 
     6    function test_Tween_constructor(t) {  
     7        t.plan(3); 
     8         
     9        var tween = new OpenLayers.Tween(); 
     10        t.ok(tween instanceof OpenLayers.Tween,  
     11             "new OpenLayers.Tween returns object" ); 
     12        t.eq(typeof tween.easing, "function",  
     13            "constructor sets easing correctly");  
     14        t.eq(typeof tween.start, "function", "tween has a start function");  
     15    } 
     16     
     17    function test_Tween_start(t) { 
     18        t.plan(5); 
     19         
     20        var tween = new OpenLayers.Tween(); 
     21 
     22        var start = {foo: 0, bar: 10}; 
     23        var finish = {foo: 10, bar: 0}; 
     24        var _start = false; 
     25        var _done = false; 
     26        var _eachStep = false; 
     27        var callbacks = { 
     28            start: function() { 
     29                _start = true; 
     30            }, 
     31            done: function() { 
     32                _done = true; 
     33            }, 
     34            eachStep: function() { 
     35                _eachStep = true; 
     36            } 
     37        } 
     38        tween.start(start, finish, 10, {callbacks: callbacks}); 
     39        t.ok(tween.interval != null, "interval correctly set"); 
     40        t.delay_call(0.8, function() { 
     41            t.eq(_start, true, "start callback called"); 
     42            t.eq(_done, true, "finish callback called"); 
     43            t.eq(_eachStep, true, "eachStep callback called"); 
     44            t.eq(tween.time, 11, "Number of steps reached is correct"); 
     45        }); 
     46    } 
     47 
     48    function test_Tween_stop(t) { 
     49        t.plan(1); 
     50         
     51        var tween = new OpenLayers.Tween(); 
     52        tween.interval = window.setInterval(function() {}, 10); 
     53        tween.stop(); 
     54        t.eq(tween.interval, null, "tween correctly stopped"); 
     55    } 
     56 
     57    </script>  
     58</head>  
     59<body>  
     60  <div id="map" style="width:500px;height:500px"></div> 
     61</body>  
     62</html>  

  • tests/manual/tween.html

    old new  
     1<html xmlns="http://www.w3.org/1999/xhtml"> 
     2  <head> 
     3    <title>Tween Example</title> 
     4    <style type="text/css"> 
     5        #viewport { 
     6            width: 500px; 
     7            height: 300px; 
     8            border: 1px solid black; 
     9        } 
     10        #block { 
     11            width: 10px; 
     12            height: 10px; 
     13            background-color: red; 
     14            position: absolute; 
     15        } 
     16    </style> 
     17    <script src="../../lib/OpenLayers.js"></script> 
     18    <script type="text/javascript"> 
     19        var tween, events; 
     20 
     21        function init(){ 
     22            tween = new OpenLayers.Tween(OpenLayers.Easing.Linear.easeIn); 
     23             
     24            events = new OpenLayers.Events(null, OpenLayers.Util.getElement('viewport'), null, true); 
     25            events.register("mousedown", null, moveBlock); 
     26             
     27            changeTween(); 
     28        } 
     29        function moveBlock(e) { 
     30            var block = OpenLayers.Util.getElement('block'); 
     31            var viewport = OpenLayers.Util.getElement('viewport'); 
     32            var blockPosition = OpenLayers.Util.pagePosition(block); 
     33            var viewportPosition = OpenLayers.Util.pagePosition(viewport); 
     34            e.xy = events.getMousePosition(e); 
     35            var from = { 
     36                x: blockPosition[0] - viewportPosition[0], 
     37                y: blockPosition[1] - viewportPosition[1] 
     38            }; 
     39            var to = { 
     40                x: e.xy.x, 
     41                y: e.xy.y 
     42            } 
     43            var duration = OpenLayers.Util.getElement('duration').value; 
     44            var callbacks = { 
     45                eachStep: function(value) { 
     46                    block.style.left = (value.x + viewportPosition[0]) + 'px'; 
     47                    block.style.top = (value.y + viewportPosition[1]) + 'px'; 
     48                } 
     49            } 
     50            tween.start(from, to, duration, {callbacks: callbacks}); 
     51             
     52        } 
     53        function changeTween() { 
     54            var transition = OpenLayers.Util.getElement('transition').value; 
     55            var easing = OpenLayers.Util.getElement('easing').value; 
     56            tween.stop(); 
     57            tween.easing = OpenLayers.Easing[transition][easing]; 
     58        } 
     59    </script> 
     60  </head> 
     61  <body onload="init()"> 
     62    <div id="title">Tween Example</div> 
     63    <div id="tags"></div> 
     64    <div id="shortdesc">Show transition effects</div> 
     65    <select name="transition" id="transition" onchange="changeTween()"> 
     66        <option value="Linear">Linear</option> 
     67        <option value="Expo">Expo</option> 
     68    </select> 
     69    <select name="easing" id="easing" onchange="changeTween()"> 
     70        <option value="easeIn">EaseIn</option> 
     71        <option value="easeOut">EaseOut</option> 
     72    </select> 
     73    <input type="text" name="duration" id="duration" value="100"></input> 
     74    <div id="viewport"> 
     75        <div id="block"></div> 
     76    </div> 
     77    <div id="docs"> 
     78        This is an example of transition effects. 
     79    </div> 
     80  </body> 
     81</html> 

  • tests/list-tests.html

    old new  
    108108    <li>Renderer/test_SVG.html</li> 
    109109    <li>Renderer/test_VML.html</li> 
    110110    <li>test_Map.html</li> 
     111    <li>test_Tween.html</li> 
    111112</ul> 

  • doc/authors.txt

    old new  
    3232 
    3333Some portions of OpenLayers are used under the MIT license, availabie in  
    3434doc/licenses/MIT-LICENSE.txt. 
     35 
     36Some portions of OpenLayers are Copyright 2001 Robert Penner, and are used  
     37under the BSD license, available in doc/licenses/BSD-LICENSE.txt 

  • doc/licenses/BSD-LICENSE.txt

    old new  
     1Redistribution and use of this software in source and binary forms, with or 
     2without modification, are permitted provided that the following conditions are 
     3met: 
     4 
     5* Redistributions of source code must retain the above 
     6  copyright notice, this list of conditions and the 
     7  following disclaimer. 
     8 
     9* Redistributions in binary form must reproduce the above 
     10  copyright notice, this list of conditions and the 
     11  following disclaimer in the documentation and/or other 
     12  materials provided with the distribution. 
     13 
     14* Neither the name of Yahoo! Inc. nor the names of its 
     15  contributors may be used to endorse or promote products 
     16  derived from this software without specific prior 
     17  written permission of Yahoo! Inc. 
     18 
     19THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 
     20ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 
     21WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 
     22DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR 
     23ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 
     24(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 
     25LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 
     26ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 
     27(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 
     28SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 

  • lib/OpenLayers/Tween.js

    old new  
     1/* Copyright (c) 2006-2008 MetaCarta, Inc., published under the Clear BSD 
     2 * license.  See http://svn.openlayers.org/trunk/openlayers/license.txt for the 
     3 * full text of the license. */ 
     4 
     5/** 
     6 * Namespace: OpenLayers.Tween 
     7 */ 
     8OpenLayers.Tween = OpenLayers.Class({ 
     9     
     10    /** 
     11     * Constant: INTERVAL 
     12     * {int} Interval in milliseconds between 2 steps 
     13     */ 
     14    INTERVAL: 10, 
     15     
     16    /** 
     17     * APIProperty: easing 
     18     * {<OpenLayers.Easing>(Function)} Easing equation used for the animation 
     19     *     Defaultly set to OpenLayers.Easing.Expo.easeOut 
     20     */ 
     21    easing: null, 
     22     
     23    /** 
     24     * APIProperty: begin 
     25     * {Object} Values to start the animation with 
     26     */ 
     27    begin: null, 
     28     
     29    /** 
     30     * APIProperty: finish 
     31     * {Object} Values to finish the animation with 
     32     */ 
     33    finish: null, 
     34     
     35    /** 
     36     * APIProperty: duration 
     37     * {int} duration of the tween (number of steps) 
     38     */ 
     39    duration: null, 
     40     
     41    /** 
     42     * APIProperty: callbacks 
     43     * {Object} An object with start, eachStep and done properties whose values 
     44     *     are functions to be call during the animation. They are passed the 
     45     *     current computed value as argument. 
     46     */ 
     47    callbacks: null, 
     48     
     49    /** 
     50     * Property: time 
     51     * {int} Step counter 
     52     */ 
     53    time: null, 
     54     
     55    /** 
     56     * Property: interval 
     57     * {int} Interval id returned by window.setInterval 
     58     */ 
     59    interval: null, 
     60     
     61    /**  
     62     * Constructor: OpenLayers.Tween 
     63     * Creates a Tween. 
     64     * 
     65     * Parameters: 
     66     * easing - {<OpenLayers.Easing>(Function)} easing function method to use 
     67     */  
     68    initialize: function(easing) { 
     69        this.easing = (easing) ? easing : OpenLayers.Easing.Expo.easeOut; 
     70    }, 
     71     
     72    /** 
     73     * APIMethod: start 
     74     * Plays the Tween, and calls the callback method on each step 
     75     *  
     76     * Parameters: 
     77     * begin - {Object} values to start the animation with 
     78     * finish - {Object} values to finish the animation with 
     79     * duration - {int} duration of the tween (number of steps) 
     80     * options - {Object} hash of options (for example callbacks (start, eachStep, done)) 
     81     */ 
     82    start: function(begin, finish, duration, options) { 
     83        this.begin = begin; 
     84        this.finish = finish; 
     85        this.duration = duration; 
     86        this.callbacks = options.callbacks; 
     87        this.time = 0; 
     88        if (this.interval) { 
     89            window.clearInterval(this.interval); 
     90            this.interval = null; 
     91        } 
     92        if (this.callbacks && this.callbacks.start) { 
     93            this.callbacks.start.call(this, this.begin); 
     94        } 
     95        this.interval = window.setInterval( 
     96            OpenLayers.Function.bind(this.play, this), this.INTERVAL); 
     97    }, 
     98     
     99    /** 
     100     * APIMethod: stop 
     101     * Stops the Tween, and calls the finish callback 
     102     */ 
     103    stop: function() { 
     104        if (this.callbacks && this.callbacks.done) { 
     105            this.callbacks.done.call(this, this.finish); 
     106        } 
     107        window.clearInterval(this.interval); 
     108        this.interval = null; 
     109    }, 
     110     
     111    /** 
     112     * Method: play 
     113     * Calls the appropriate easing method 
     114     */ 
     115    play: function() { 
     116        var value = {}; 
     117        for (var i in this.begin) { 
     118            var b = this.begin[i]; 
     119            var f = this.finish[i]; 
     120            if (b == null || f == null || isNaN(b) || isNaN(f)) { 
     121                OpenLayers.Console.error('invalid value for Tween'); 
     122            } 
     123             
     124            var c = f - b; 
     125            value[i] = this.easing.apply(this, [this.time, b, c, this.duration]); 
     126        } 
     127        this.time++; 
     128         
     129        if (this.callbacks && this.callbacks.eachStep) { 
     130            this.callbacks.eachStep.call(this, value); 
     131        } 
     132         
     133        if (this.time > this.duration) { 
     134            if (this.callbacks && this.callbacks.done) { 
     135                this.callbacks.done.call(this, this.finish); 
     136            } 
     137            window.clearInterval(this.interval); 
     138            this.interval = null; 
     139        } 
     140    }, 
     141     
     142    /** 
     143     * Create empty functions for all easing methods. 
     144     */ 
     145    CLASS_NAME: "OpenLayers.Tween" 
     146}); 
     147 
     148/** 
     149 * Namespace: OpenLayers.Easing 
     150 *  
     151 * Credits: 
     152 *      Easing Equations by Robert Penner, <http://www.robertpenner.com/easing/> 
     153 */ 
     154OpenLayers.Easing = { 
     155    /** 
     156     * Create empty functions for all easing methods. 
     157     */ 
     158    CLASS_NAME: "OpenLayers.Easing" 
     159}; 
     160 
     161/** 
     162 * Namespace: OpenLayers.Easing.Linear 
     163 */ 
     164OpenLayers.Easing.Linear = { 
     165     
     166    /** 
     167     * Function: easeIn 
     168     *  
     169     * Parameters: 
     170     * t - {Float} time 
     171     * b - {Float} beginning position 
     172     * c - {Float} total change 
     173     * d - {Float} duration of the transition 
     174     */ 
     175    easeIn: function(t, b, c, d) { 
     176        return c*t/d + b; 
     177    }, 
     178     
     179    /** 
     180     * Function: easeOut 
     181     *  
     182     * Parameters: 
     183     * t - {Float} time 
     184     * b - {Float} beginning position 
     185     * c - {Float} total change 
     186     * d - {Float} duration of the transition 
     187     */ 
     188    easeOut: function(t, b, c, d) { 
     189        return c*t/d + b; 
     190    }, 
     191     
     192    /** 
     193     * Function: easeInOut 
     194     *  
     195     * Parameters: 
     196     * t - {Float} time 
     197     * b - {Float} beginning position 
     198     * c - {Float} total change 
     199     * d - {Float} duration of the transition 
     200     */ 
     201    easeInOut: function(t, b, c, d) { 
     202        return c*t/d + b; 
     203    }, 
     204 
     205    CLASS_NAME: "OpenLayers.Easing.Linear" 
     206}; 
     207 
     208/** 
     209 * Namespace: OpenLayers.Easing.Expo 
     210 */ 
     211OpenLayers.Easing.Expo = { 
     212     
     213    /** 
     214     * Function: easeIn 
     215     *  
     216     * Parameters: 
     217     * t - {Float} time 
     218     * b - {Float} beginning position 
     219     * c - {Float} total change 
     220     * d - {Float} duration of the transition 
     221     */ 
     222    easeIn: function(t, b, c, d) { 
     223        return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; 
     224    }, 
     225     
     226    /** 
     227     * Function: easeOut 
     228     *  
     229     * Parameters: 
     230     * t - {Float} time 
     231     * b - {Float} beginning position 
     232     * c - {Float} total change 
     233     * d - {Float} duration of the transition 
     234     */ 
     235    easeOut: function(t, b, c, d) { 
     236        return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; 
     237    }, 
     238     
     239    /** 
     240     * Function: easeInOut 
     241     *  
     242     * Parameters: 
     243     * t - {Float} time 
     244     * b - {Float} beginning position 
     245     * c - {Float} total change 
     246     * d - {Float} duration of the transition 
     247     */ 
     248    easeInOut: function(t, b, c, d) { 
     249        if (t==0) return b; 
     250        if (t==d) return b+c; 
     251        if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; 
     252        return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; 
     253    }, 
     254 
     255    CLASS_NAME: "OpenLayers.Easing.Expo" 
     256}; 

  • lib/OpenLayers.js

    old new  
    7979            "OpenLayers/BaseTypes/Pixel.js", 
    8080            "OpenLayers/BaseTypes/Size.js", 
    8181            "OpenLayers/Console.js", 
     82            "OpenLayers/Tween.js", 
    8283            "Rico/Corner.js", 
    8384            "Rico/Color.js", 
    8485            "OpenLayers/Ajax.js",