OpenLayers OpenLayers

Ticket #1308: patch-1308-r5926-B0.diff

File patch-1308-r5926-B0.diff, 12.7 kB (added by pgiraud, 1 year ago)

same patch with minor fixes and without the animated panning code

  • 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/list-tests.html

    old new  
    107107    <li>Renderer/test_SVG.html</li> 
    108108    <li>Renderer/test_VML.html</li> 
    109109    <li>test_Map.html</li> 
     110    <li>test_Tween.html</li> 
    110111</ul> 

  • lib/OpenLayers/Tween.js

    old new  
     1/* Copyright (c) 2006-2007 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     * Property: 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     * Property: begin 
     25     * {Object} Values to start the animation with 
     26     */ 
     27    begin: null, 
     28     
     29    /** 
     30     * Property: finish 
     31     * {Object} Values to finish the animation with 
     32     */ 
     33    finish: null, 
     34     
     35    /** 
     36     * Property: duration 
     37     * {int} duration of the tween (number of steps) 
     38     */ 
     39    duration: null, 
     40     
     41    /** 
     42     * Property: 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     *  
     63     * Params: 
     64     * easing - {<OpenLayers.Easing>(Function)} easing function method to use 
     65     */  
     66    initialize: function(easing) { 
     67        this.easing = (easing) ? easing : OpenLayers.Easing.Expo.easeOut; 
     68    }, 
     69     
     70    /** 
     71     * APIMethod: start 
     72     * Plays the Tween, and calls the callback method on each step 
     73     *  
     74     * begin - {Object} values to start the animation with 
     75     * finish - {Object} values to finish the animation with 
     76     * duration - {int} duration of the tween (number of steps) 
     77     * options - {Object} hash of options (for example callbacks (start, eachStep, done)) 
     78     */ 
     79    start: function(begin, finish, duration, options) { 
     80        this.begin = begin; 
     81        this.finish = finish; 
     82        this.duration = duration; 
     83        this.callbacks = options.callbacks; 
     84        this.time = 0; 
     85        if (this.interval) { 
     86            window.clearInterval(this.interval); 
     87            this.interval = null; 
     88        } 
     89        if (this.callbacks && this.callbacks.start) { 
     90            this.callbacks.start.call(this, this.begin); 
     91        } 
     92        this.interval = window.setInterval( 
     93            OpenLayers.Function.bind(this.play, this), this.INTERVAL); 
     94    }, 
     95     
     96    /** 
     97     * APIMethod: stop 
     98     * Stops the Tween, and calls the finish callback 
     99     */ 
     100    stop: function() { 
     101        if (this.callbacks && this.callbacks.done) { 
     102            this.callbacks.done.call(this, this.finish); 
     103        } 
     104        window.clearInterval(this.interval); 
     105        this.interval = null; 
     106    }, 
     107     
     108    /** 
     109     * Method: play 
     110     * Calls the appropriate easing method 
     111     */ 
     112    play: function() { 
     113        var value = {}; 
     114        for (var i in this.begin) { 
     115            var b = this.begin[i]; 
     116            var f = this.finish[i]; 
     117            if (b == null || f == null || isNaN(b) || isNaN(f)) { 
     118                OpenLayers.Console.error('invalid value for Tween'); 
     119            } 
     120             
     121            var c = f - b; 
     122            value[i] = this.easing.apply(this, [this.time, b, c, this.duration]); 
     123        } 
     124        this.time++; 
     125         
     126        if (this.callbacks && this.callbacks.eachStep) { 
     127            this.callbacks.eachStep.call(this, value); 
     128        } 
     129         
     130        if (this.time > this.duration) { 
     131            if (this.callbacks && this.callbacks.done) { 
     132                this.callbacks.done.call(this, this.finish); 
     133            } 
     134            window.clearInterval(this.interval); 
     135            this.interval = null; 
     136        } 
     137    }, 
     138     
     139    /** 
     140     * Create empty functions for all easing methods. 
     141     */ 
     142    CLASS_NAME: "OpenLayers.Tween" 
     143}); 
     144 
     145/** 
     146 * Namespace: OpenLayers.Easing 
     147 *  
     148 * Credits: 
     149 *      Easing Equations by Robert Penner, <http://www.robertpenner.com/easing/> 
     150 */ 
     151OpenLayers.Easing = { 
     152    /** 
     153     * Create empty functions for all easing methods. 
     154     */ 
     155    CLASS_NAME: "OpenLayers.Easing" 
     156} 
     157 
     158/** 
     159 * Namespace: OpenLayers.Easing.Linear 
     160 */ 
     161OpenLayers.Easing.Linear = { 
     162     
     163    /** 
     164     * APIFunction: easeIn 
     165     *  
     166     * Parameters: 
     167     * t - {Float} time 
     168     * b - {Float} beginning position 
     169     * c - {Float} total change 
     170     * d - {Float} duration of the transition 
     171     */ 
     172    easeIn: function(t, b, c, d) { 
     173        return c*t/d + b; 
     174    }, 
     175     
     176    /** 
     177     * APIFunction: easeOut 
     178     *  
     179     * Parameters: 
     180     * t - {Float} time 
     181     * b - {Float} beginning position 
     182     * c - {Float} total change 
     183     * d - {Float} duration of the transition 
     184     */ 
     185    easeOut: function(t, b, c, d) { 
     186        return c*t/d + b; 
     187    }, 
     188     
     189    /** 
     190     * APIFunction: easeInOut 
     191     *  
     192     * Parameters: 
     193     * t - {Float} time 
     194     * b - {Float} beginning position 
     195     * c - {Float} total change 
     196     * d - {Float} duration of the transition 
     197     */ 
     198    easeInOut: function(t, b, c, d) { 
     199        return c*t/d + b; 
     200    }, 
     201 
     202    CLASS_NAME: "OpenLayers.Easing.Linear" 
     203}; 
     204 
     205/** 
     206 * Namespace: OpenLayers.Easing.Expo 
     207 */ 
     208OpenLayers.Easing.Expo = { 
     209     
     210    /** 
     211     * APIFunction: easeIn 
     212     *  
     213     * Parameters: 
     214     * t - {Float} time 
     215     * b - {Float} beginning position 
     216     * c - {Float} total change 
     217     * d - {Float} duration of the transition 
     218     */ 
     219    easeIn: function(t, b, c, d) { 
     220        return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; 
     221    }, 
     222     
     223    /** 
     224     * APIFunction: easeOut 
     225     *  
     226     * Parameters: 
     227     * t - {Float} time 
     228     * b - {Float} beginning position 
     229     * c - {Float} total change 
     230     * d - {Float} duration of the transition 
     231     */ 
     232    easeOut: function(t, b, c, d) { 
     233        return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; 
     234    }, 
     235     
     236    /** 
     237     * APIFunction: easeInOut 
     238     *  
     239     * Parameters: 
     240     * t - {Float} time 
     241     * b - {Float} beginning position 
     242     * c - {Float} total change 
     243     * d - {Float} duration of the transition 
     244     */ 
     245    easeInOut: function(t, b, c, d) { 
     246        if (t==0) return b; 
     247        if (t==d) return b+c; 
     248        if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; 
     249        return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; 
     250    }, 
     251 
     252    CLASS_NAME: "OpenLayers.Easing.Expo" 
     253}; 

  • 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", 

  • examples/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 = new OpenLayers.Tween(OpenLayers.Easing[transition][easing]); 
     57        } 
     58    </script> 
     59  </head> 
     60  <body onload="init()"> 
     61    <div id="title">Tween Example</div> 
     62    <div id="tags"></div> 
     63    <div id="shortdesc">Show transition effects</div> 
     64    <select name="transition" id="transition" onchange="changeTween()"> 
     65        <option value="Linear">Linear</option> 
     66        <option value="Expo">Expo</option> 
     67    </select> 
     68    <select name="easing" id="easing" onchange="changeTween()"> 
     69        <option value="easeIn">EaseIn</option> 
     70        <option value="easeOut">EaseOut</option> 
     71    </select> 
     72    <input type="text" name="duration" id="duration" value="100"></input> 
     73    <div id="viewport"> 
     74        <div id="block"></div> 
     75    </div> 
     76    <div id="docs"> 
     77        This is an example of transition effects. 
     78    </div> 
     79  </body> 
     80</html>