Animate graphic position change

ae

The GpsLayer has a nice animation feature where the current location marker glide gracefully to new positions in the map. In my application I would like to have similar animations in a graphicslayer, so that when I update the position of a graphic, it will glide to this new position intead of just changing its location in the blink of a second.

Does anyone know if and how this can be achieved?

MichaelBranscomb

Hi,

You should be able to replicate the smoother animation of the gps layer symbol by incrementally updating the geometry (still calling MoveTo) on a timer.

The GPSLayer source code is on codeplex so you can take a look at how it works - but I just put this together this basic sample based on the GPSLayer code with an easing function from http://www.gizma.com/easing/ to allow for some acceleration and deceleration.

Code behind:

using System.Windows; using ESRI.ArcGIS.Client; using ESRI.ArcGIS.Client.Symbols; using System.Windows.Media; using ESRI.ArcGIS.Client.Geometry; using System; using System.Windows.Threading;  namespace SmoothAnimation {     public partial class MainWindow : Window     {         GraphicsLayer _gl;         private DateTime animateStartTime;         private DispatcherTimer animationTimer;         private int animationDuration = 5000;         SimpleMarkerSymbol defaultSymbol;         SimpleMarkerSymbol animatingSymbol;                  public MainWindow()         {             InitializeComponent();              _gl = new GraphicsLayer();                        MyMap.Layers.Add(_gl);         }          private void MyMap_MouseClick(object sender, Map.MouseEventArgs e)         {             if (defaultSymbol == null)             {                 defaultSymbol = new SimpleMarkerSymbol() { Color = Brushes.Red, Size = 12, Style = SimpleMarkerSymbol.SimpleMarkerStyle.Circle };             }              if (animatingSymbol == null)             {                 animatingSymbol = new SimpleMarkerSymbol() { Color = Brushes.Blue, Size = 12, Style = SimpleMarkerSymbol.SimpleMarkerStyle.Circle };             }              if (_gl.Graphics.Count == 3)                 _gl.Graphics.Clear();              if (_gl.Graphics.Count == 2)                 _gl.Graphics.Remove(_gl.Graphics[0]);              _gl.Graphics.Add(new Graphic() { Symbol = defaultSymbol, Geometry = e.MapPoint });         }          private void AnimateButton_Click(object sender, RoutedEventArgs e)         {             MapPoint startPoint = _gl.Graphics[0].Geometry as MapPoint;             MapPoint finishPoint = _gl.Graphics[1].Geometry as MapPoint;              MapPoint animatingPoint = startPoint;             _gl.Graphics.Add(new Graphic() { Geometry = animatingPoint,Symbol = animatingSymbol });              animationTimer= new DispatcherTimer();             animationTimer.Interval = TimeSpan.FromMilliseconds(33);             animateStartTime = DateTime.Now;             animationTimer.Tick += (s, ex) =>              {                 double fraction = (DateTime.Now - animateStartTime).TotalMilliseconds / animationDuration;                 fraction = QuinticEasingInOut(fraction, 0, 1, 1);                 var x = (finishPoint.X - startPoint.X) * fraction + startPoint.X;                 var y = (finishPoint.Y - startPoint.Y) * fraction + startPoint.Y;                 animatingPoint.MoveTo(x, y);             };             animationTimer.Start();         }          public double QuinticEasingInOut(double t, double b, double c, double d)         {             t /= d / 2;             if (t < 1) return c / 2 * t * t * t * t * t + b;             t -= 2;             return c / 2 * (t * t * t * t * t + 2) + b;         }     } }

XAML:

<Window x:Class="SmoothAnimation.MainWindow"      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         xmlns:esri="http://schemas.esri.com/arcgis/client/2009"         Title="MainWindow" Height="350" Width="525">     <Grid>         <esri:Map x:Name="MyMap" UseAcceleratedDisplay="True" MouseClick="MyMap_MouseClick">             <esri:ArcGISTiledMapServiceLayer ID="World Topo Map"                         Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"/>         </esri:Map>         <Button Content="Animate" x:Name="AnimateButton" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="10"                  Click="AnimateButton_Click">         </Button>     </Grid> </Window>

Cheers

Mike