how to get animated zooming and pan with openlayers?

Like website:http://www.tomtom.com/livetraffic/

When I try pan or zoom on the above site, feels very good similar to Google map, it's very smoothly 开发者_如何学JAVAfor this user experience.

my question is how I can implement this effect with openlayers respectively for pan and zoom? I could not find them in openlayers examples at least.

thanks for you attention.

following is part of my source code, maybe it works but not smoothly as I think

        var map, layer; 
        function init() {
            var options = { 
                projection: "EPSG:900913",

                maxExtent: new OpenLayers.Bounds(18.203001,

47.078001, 399.909001, 261.796001),

                scales: [2400, 1200, 600, 300, 150],
                units: "m",

                panDuration: 100,
                controls: [new OpenLayers.Control.Navigation(
        {dragPanOptions: {enableKinetic: true}}
    )]
             var tile = new SimpleTileCache("map", 

"tilecache/8f/",

{ 'format': 'image/png', transitionEffect: 'resize' });

             map.addLayers([tile]);

---

Effect is called as transitionEffect
You can implement this effect to your code by changing layers property.
I suppose you have a WMS or TMS layer.

 var tiled_resize_effect = new OpenLayers.Layer.WMS(
     "WMS tiled resize", 
     "http://vmap0.tiles.osgeo.org/wms/vmap0?",
     {layers: 'basic'}, 
     {transitionEffect: 'resize'}
 );

Check these examples

WMS Transition
Google Transition

Best Regards

---

For panning, that’s what’s called kinetic dragging, see: http://dev.openlayers.org/examples/kinetic.html