From 9d86ea32c6870cd54c863a0b40f9467c2afea60f Mon Sep 17 00:00:00 2001 From: Arnaud Leclerc Date: Mon, 8 Mar 2021 16:36:56 +0100 Subject: [PATCH] Adding documentation --- README.md | 3 +- docs/animations/README.md | 84 +++++++++++++++++++ .../Animations/IAnimationService.cs | 12 +-- 3 files changed, 92 insertions(+), 7 deletions(-) create mode 100644 docs/animations/README.md diff --git a/README.md b/README.md index 8c3d696..a0cf87e 100644 --- a/README.md +++ b/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) \ No newline at end of file +- [Expressions](docs/expressions) +- [Animations](docs/animations) \ No newline at end of file diff --git a/docs/animations/README.md b/docs/animations/README.md new file mode 100644 index 0000000..ea2dc64 --- /dev/null +++ b/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 + + +@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 + }); + } +} +``` \ No newline at end of file diff --git a/src/AzureMapsControl.Components/Animations/IAnimationService.cs b/src/AzureMapsControl.Components/Animations/IAnimationService.cs index 3d1ef8e..b565bcd 100644 --- a/src/AzureMapsControl.Components/Animations/IAnimationService.cs +++ b/src/AzureMapsControl.Components/Animations/IAnimationService.cs @@ -21,7 +21,7 @@ public interface IAnimationService Task SnakelineAsync(LineString line, DataSource source, SnakeLineAnimationOptions options = default); /// - /// Animates a map and/or a Point shape, or marker along a path. + /// Animates a Point shape along a path. /// /// The path to animate the point along. /// The data source the given line is attached to @@ -32,7 +32,7 @@ public interface IAnimationService Task MoveAlongPathAsync(LineString path, DataSource pathSource, Point pin, DataSource pinSource, MoveAlongPathAnimationOptions options = default); /// - /// Animates a map and/or a Point shape, or marker along a path. + /// Animates a marker along a path. /// /// The path to animate the point along. /// The data source the given line is attached to @@ -42,7 +42,7 @@ public interface IAnimationService Task MoveAlongPathAsync(LineString path, DataSource pathSource, HtmlMarker pin, MoveAlongPathAnimationOptions options = default); /// - /// Animates a map and/or a Point shape, or marker along a path. + /// Animates a Point shape along a path. /// /// The path to animate the point along. /// A point to animate along the path @@ -52,7 +52,7 @@ public interface IAnimationService Task MoveAlongPathAsync(IEnumerable path, Point pin, DataSource pinSource, MoveAlongPathAnimationOptions options = default); /// - /// Animates a map and/or a Point shape, or marker along a path. + /// Animates a marker along a path. /// /// The path to animate the point along. /// A point to animate along the path @@ -69,7 +69,7 @@ public interface IAnimationService Task FlowingDashedLineAsync(LineLayer layer, MovingDashLineOptions options = default); /// - /// 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. /// /// HtmlMarkers to drop in. /// The height at which to drop the shape from. @@ -78,7 +78,7 @@ public interface IAnimationService Task DropMarkersAsync(IEnumerable markers, decimal? height = null, DropMarkersAnimationOptions options = default); /// - /// 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. /// /// HtmlMarkers to drop in. /// The height at which to drop the shape from.