Adding documentation

README.md

@@ -148,4 +148,5 @@ It also needs to fetch the token to send to the requests of the atlas library. F
 - [Layers](docs/layers)
 - [Popups](docs/popups)
 - [Traffic](docs/traffic)
-- [Expressions](docs/expressions)
+- [Expressions](docs/expressions)
+- [Animations](docs/animations)

docs/animations/README.md

@@ -0,0 +1,84 @@
+## Animations
+
+The `animations` are not part of the `atlas` library, so you need to include the js file directly into your application via a script tag. It can be found on the [GitHub repository of the animations](https://github.com/Azure-Samples/azure-maps-animations).
+
+To create an animation, you can inject an instance of `IAnimationService` inside your razor views or services. The following animations can be created via this service : 
+
+- `DropAsync` : Adds an offset array property to point shapes and animates its y value to simulate dropping.
+- `DropMarkersAsync` : Adds an offset to HtmlMarkers to animate its y value to simulate dropping.
+- `GroupAnimationAsync` : Group multiple animations
+- `FlowingDashedLineAsync` : Animates the dash-array of a line layer to make it appear to flow. 
+- `MoveAlongPath` : Animates a Point shape or a marker along a path.
+- `MoveAlongRouteAsync` : Animates a Point shape along a route path. 
+- `MorphAsync` : Animates the morphing of a shape from one geometry type or set of coordinates to another.
+- `SetCoordinatesAsync` : Animates the update of coordinates on a shape.
+- `SnakelineAsync` : Animates the path of a LineString. 
+
+Each of those methods gives back an Animation which you can further control using its `PlayAsync`, `PauseAsync`, `ResetAsync`, `SeekAsync`, `StopAsync` and `DisposeAsync` methods. Not all the animations exposes those methods.
+
+Note that if you try to use an animation which has already been disposed, the library will raise an `AnimationAlreadyDisposedException`.
+
+The following example shows how to create a drop animation.
+
+```
+@page "/Animations/Drop"
+@inject Components.Animations.IAnimationService AnimationService
+
+@using AzureMapsControl.Components.Map
+<AzureMap Id="map"
+          CameraOptions="new CameraOptions { Center = new Components.Atlas.Position(-122.33825, 47.53945), Zoom = 7 }"
+          StyleOptions="StyleOptions"
+          EventActivationFlags="MapEventActivationFlags
+                                .None()
+                                .Enable(MapEventType.Click, MapEventType.Ready)"
+          OnClick="OnMapClick"
+          OnReady="OnMapReady" />
+
+@code  {
+    private AzureMapsControl.Components.Data.DataSource _dataSource;
+    private AzureMapsControl.Components.Animations.IDropAnimation _animation;
+
+    public StyleOptions StyleOptions = new StyleOptions
+    {
+        Style = MapStyle.GrayscaleDark
+    };
+
+    public async Task OnMapReady(MapEventArgs eventArgs)
+    {
+        _dataSource = new Components.Data.DataSource();
+        await eventArgs.Map.AddSourceAsync(_dataSource);
+
+        await eventArgs.Map.AddLayerAsync(new AzureMapsControl.Components.Layers.SymbolLayer
+        {
+            Options = new Components.Layers.SymbolLayerOptions
+            {
+                Source = _dataSource.Id,
+                IconOptions = new Components.Layers.IconOptions
+                {
+                    AllowOverlap = true,
+                    IgnorePlacement = true,
+                    Offset = new Components.Atlas.Expression(new AzureMapsControl.Components.Atlas.Expression[]
+                    {
+                        new AzureMapsControl.Components.Atlas.ExpressionOrString("get"),
+                        new AzureMapsControl.Components.Atlas.ExpressionOrString("offset")
+                    })
+                }
+            }
+        });
+    }
+
+    public async Task OnMapClick(MapMouseEventArgs eventArgs)
+    {
+        if(_animation != null)
+        {
+            await _animation.DisposeAsync();
+        }
+        
+        _animation = await AnimationService.DropAsync(new AzureMapsControl.Components.Atlas.Point(eventArgs.Position), _dataSource, null, new AzureMapsControl.Components.Animations.Options.DropAnimationOptions
+        {
+            AutoPlay = true,
+            Easing = AzureMapsControl.Components.Animations.Options.Easing.EaseOutBounce
+        });
+    }
+}
+```

src/AzureMapsControl.Components/Animations/IAnimationService.cs

@@ -21,7 +21,7 @@ public interface IAnimationService
         Task<ISnakeLineAnimation> SnakelineAsync(LineString line, DataSource source, SnakeLineAnimationOptions options = default);
 
         /// <summary>
-        /// Animates a map and/or a Point shape, or marker along a path.
+        /// Animates a Point shape along a path.
         /// </summary>
         /// <param name="path">The path to animate the point along.</param>
         /// <param name="pathSource">The data source the given line is attached to</param>
@@ -32,7 +32,7 @@ public interface IAnimationService
         Task<IMoveAlongPathAnimation> MoveAlongPathAsync(LineString path, DataSource pathSource, Point pin, DataSource pinSource, MoveAlongPathAnimationOptions options = default);
 
         /// <summary>
-        /// Animates a map and/or a Point shape, or marker along a path.
+        /// Animates a marker along a path.
         /// </summary>
         /// <param name="path">The path to animate the point along.</param>
         /// <param name="lineSource">The data source the given line is attached to</param>
@@ -42,7 +42,7 @@ public interface IAnimationService
         Task<IMoveAlongPathAnimation> MoveAlongPathAsync(LineString path, DataSource pathSource, HtmlMarker pin, MoveAlongPathAnimationOptions options = default);
 
         /// <summary>
-        /// Animates a map and/or a Point shape, or marker along a path.
+        /// Animates a Point shape along a path.
         /// </summary>
         /// <param name="path">The path to animate the point along.</param>
         /// <param name="pin">A point to animate along the path</param>
@@ -52,7 +52,7 @@ public interface IAnimationService
         Task<IMoveAlongPathAnimation> MoveAlongPathAsync(IEnumerable<Position> path, Point pin, DataSource pinSource, MoveAlongPathAnimationOptions options = default);
 
         /// <summary>
-        /// Animates a map and/or a Point shape, or marker along a path.
+        /// Animates a marker along a path.
         /// </summary>
         /// <param name="path">The path to animate the point along.</param>
         /// <param name="pin">A point to animate along the path</param>
@@ -69,7 +69,7 @@ public interface IAnimationService
         Task<IFlowingDashedLineAnimation> FlowingDashedLineAsync(LineLayer layer, MovingDashLineOptions options = default);
 
         /// <summary>
-        /// Adds an offset to HtmlMarkers to animate its y value to simulate dropping. Animation modifies `pixelOffset` value of HtmlMarkers.
+        /// Adds an offset to HtmlMarkers to animate its y value to simulate dropping.
         /// </summary>
         /// <param name="markers">HtmlMarkers to drop in.</param>
         /// <param name="height">The height at which to drop the shape from.</param>
@@ -78,7 +78,7 @@ public interface IAnimationService
         Task<IDropMarkersAnimation> DropMarkersAsync(IEnumerable<HtmlMarker> markers, decimal? height = null, DropMarkersAnimationOptions options = default);
 
         /// <summary>
-        /// Adds an offset to an HtmlMarker to animate its y value to simulate dropping. Animation modifies `pixelOffset` value of HtmlMarker.
+        /// Adds an offset to an HtmlMarker to animate its y value to simulate dropping.
         /// </summary>
         /// <param name="markers">HtmlMarkers to drop in.</param>
         /// <param name="height">The height at which to drop the shape from.</param>