weather data animation in arcgis

HumzaAkhtar

Is there a way to add animation of weather data using ARcGIS SDK for WPF? I am in particular talking about these kinds of data visualizations

http://earth.nullschool.net/#current/ocean/surface/currents/orthographic

[ATTACH=CONFIG]31717[/ATTACH]

2.PNG

MichaelBranscomb

Hi,

It is possible to create some animation effects, although we hope to add a more animation framework in the future. It depends on what type of data you have. Your example looked like it might be possible to achieve in a simple fashion by animating a point and leaving the trail of previous points on the map? You can update the coordinates of a MapPoint which forms the Geometry for a Graphic and internally the API will effect a move operation. If you wish to control the apparent speed of this you could use an easing function. The sample below calculates a Quintic easing in/out which means it effectively appears to speed up and then slow down again as the interpolated distance the MapPoint is moved increases and decreases.

<UserControl x:Class="SmoothGraphicAnimation"
             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/runtime/2013">
    <Grid>
        <esri:MapView x:Name="mapView1">
            <esri:Map x:Name="map1">
                <esri:ArcGISTiledMapServiceLayer ServiceUri="http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer" />
            </esri:Map>
        </esri:MapView>
    </Grid>
</UserControl>

using Esri.ArcGISRuntime.Geometry;
using Esri.ArcGISRuntime.Layers;
using Esri.ArcGISRuntime.Symbology;
using System;
using System.ComponentModel;
using System.Linq;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Threading;

namespace SmoothGraphicAnimation
{
    /// <summary>
    /// Animates a graphic smoothly between two user defined locations by calling the MapPoint.MoveTo method at regular intervals as defined by a DispatcherTimer.
    /// The distance the point is moved each time is calculated by a quintic easing function.
    /// </summary>
    /// <title>Smooth Graphic Animation</title>
  /// <category>Layers</category>
  /// <subcategory>Graphics Layers</subcategory>
  public partial class SmoothGraphicAnimation : UserControl
    {
        GraphicsLayer _animatingLayer;
        GraphicsLayer _userInteractionLayer;
        private DateTime animateStartTime;
        private DispatcherTimer animationTimer;
        private int animationDuration = 5000;

        /// <summary>
        /// Initializes a new instance of the <see cref="SmoothGraphicAnimation"/> class.
        /// </summary>
        public SmoothGraphicAnimation()
        {
            InitializeComponent();

            _userInteractionLayer = new GraphicsLayer()
            {
                Renderer = new SimpleRenderer()
                {
                    Symbol = new SimpleMarkerSymbol() { Color = Colors.Green, Size = 12, Style = SimpleMarkerStyle.Circle }
                }
            };

            _animatingLayer = new GraphicsLayer()
            {
                Renderer = new SimpleRenderer()
                {
                    Symbol = new SimpleMarkerSymbol() { Color = Colors.Red, Size = 12, Style = SimpleMarkerStyle.Circle }
                }
            };

            PropertyChangedEventHandler propertyChanged = null;
            propertyChanged += (s, e) =>
            {
                if (e.PropertyName == "SpatialReference")
                {
                    mapView1.PropertyChanged -= propertyChanged;
                    AddLayers();
                    WaitforMapClick();                   
                }
            };
            mapView1.PropertyChanged += propertyChanged;
        }

        private void AddLayers()
        {
            map1.Layers.Add(_userInteractionLayer);
            map1.Layers.Add(_animatingLayer);     
        }

        private async Task WaitforMapClick()
        {
           
            MapPoint m = await mapView1.Editor.RequestPointAsync();

            _userInteractionLayer.Graphics.Add(new Graphic(m));

            if (_userInteractionLayer.Graphics.Count == 2)
            {
                await AnimateGraphic();
                await Task.Delay(animationDuration);
                _userInteractionLayer.Graphics.Clear();
                _animatingLayer.Graphics.Clear();    
            }

            WaitforMapClick();  
        }

        private async Task AnimateGraphic()
        {
            MapPoint startPoint = _userInteractionLayer.Graphics[0].Geometry as MapPoint;
            MapPoint finishPoint = _userInteractionLayer.Graphics[1].Geometry as MapPoint;

            MapPoint animatingPoint = new MapPoint(startPoint.X, startPoint.Y);
            _animatingLayer.Graphics.Add(new Graphic() { Geometry = animatingPoint});

            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;
        }
    }
}

Cheers

Mike