Add in weather animations and area to display current weather

MAUI_Weather/MAUI_Weather.csproj

@@ -48,8 +48,25 @@
 		<MauiAsset Include="Resources\Raw\**" LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />
 	</ItemGroup>
 
+	<ItemGroup>
+	  <None Remove="Resources\Fonts\Rubik-Light.ttf" />
+	  <None Remove="Resources\Fonts\Rubik-Regular.ttf" />
+	  <None Remove="Resources\Raw\foggy.json" />
+	  <None Remove="Resources\Raw\mist.json" />
+	  <None Remove="Resources\Raw\partly-cloudy.json" />
+	  <None Remove="Resources\Raw\partly-shower.json" />
+	  <None Remove="Resources\Raw\snow-sunny.json" />
+	  <None Remove="Resources\Raw\snow.json" />
+	  <None Remove="Resources\Raw\storm.json" />
+	  <None Remove="Resources\Raw\stormshowersday.json" />
+	  <None Remove="Resources\Raw\sunny.json" />
+	  <None Remove="Resources\Raw\thunder.json" />
+	  <None Remove="Resources\Raw\windy.json" />
+	</ItemGroup>
+
 	<ItemGroup>
 		<PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="7.0.0" />
+		<PackageReference Include="SkiaSharp.Extended.UI.Maui" Version="2.0.0-preview.80" />
 	</ItemGroup>
 
 	<ItemGroup>

MAUI_Weather/MVVM/Views/WeatherView.xaml

@@ -2,6 +2,7 @@
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="MAUI_Weather.MVVM.Views.WeatherView"
+             xmlns:skia="clr-namespace:SkiaSharp.Extended.UI.Controls;assembly=SkiaSharp.Extended.UI"
              Title="WeatherView">
 
     <Grid Margin="15" RowDefinitions=".08*,.1*,.5*,.1*,.3*">
@@ -14,7 +15,11 @@
         <VerticalStackLayout Grid.Row="1" Style="{StaticResource MainStackLayout}">
             <Label Text="Rome" Style="{StaticResource Title}"/>
             <Label Text="November 2077"/>
-            
         </VerticalStackLayout>
+        <skia:SKLottieView
+            Grid.Row="2"
+            RepeatCount="-1"
+            Source="storm.json"/>
+
     </Grid>
 </ContentPage>

MAUI_Weather/MauiProgram.cs

@@ -1,4 +1,5 @@
 using Microsoft.Extensions.Logging;
+using SkiaSharp.Views.Maui.Controls.Hosting;
 
 namespace MAUI_Weather;
 
@@ -9,6 +10,7 @@ public static class MauiProgram
 		var builder = MauiApp.CreateBuilder();
 		builder
 			.UseMauiApp<App>()
+			.UseSkiaSharp()
 			.ConfigureFonts(fonts =>
 			{
 				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");

MAUI_Weather/Resources/Raw/windy.json

@@ -0,0 +1 @@
+{"v":"5.1.1","fr":60,"ip":0,"op":180,"w":256,"h":256,"nm":"Windy","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"cloud","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":0,"s":[117.135,125.78,0],"e":[123.135,125.78,0],"to":[1,0,0],"ti":[3.56038412974158e-7,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"n":"0p833_0p833_0p333_0","t":45,"s":[123.135,125.78,0],"e":[117.135,125.78,0],"to":[-3.56038412974158e-7,0,0],"ti":[0.33333370089531,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"n":"0p833_0p833_0p333_0","t":90,"s":[117.135,125.78,0],"e":[121.135,125.78,0],"to":[-0.33333370089531,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"n":"0p833_0p833_0p333_0","t":135,"s":[121.135,125.78,0],"e":[117.135,125.78,0],"to":[0,0,0],"ti":[0.66666668653488,0,0]},{"t":180}],"ix":2},"a":{"a":0,"k":[102.135,62.78,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,24.37],[-24.44,0],[-6.12,-3.18],[-27.6,0],[0,-34.67],[0.03,-0.7],[0,-12.29],[17.86,0],[0,0],[0,0],[0,0]],"o":[[0,0],[-24.44,0],[0,-24.36],[7.38,0],[8.51,-24.62],[34.78,0],[0,0.71],[10.16,5.44],[0,17.8],[0,0],[-0.1,0],[0,0],[0,0]],"v":[[123.61,125.56],[44.26,125.56],[0,81.44],[44.26,37.33],[64.71,42.31],[124.27,0],[187.25,62.78],[187.21,64.9],[204.27,93.32],[171.93,125.56],[124.27,125.56],[123.61,125.56],[124.27,125.56]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.909803986549,0.909803986549,0.909803986549,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":180,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"cloud","sr":1,"ks":{"o":{"a":0,"k":50,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"n":"0p833_0p833_0p333_0","t":0,"s":[195.37,81.5,0],"e":[199.37,81.5,0],"to":[0.66666668653488,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"n":"0p833_0p833_0p333_0","t":35,"s":[199.37,81.5,0],"e":[195.37,81.5,0],"to":[0,0,0],"ti":[4.57763661643185e-7,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"n":"0p833_0p833_0p333_0","t":80,"s":[195.37,81.5,0],"e":[199.37,81.5,0],"to":[-4.57763661643185e-7,0,0],"ti":[0.66666668653488,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"n":"0p833_0p833_0p333_0","t":125,"s":[199.37,81.5,0],"e":[195.37,81.5,0],"to":[-0.64289206266403,0,0],"ti":[0.03566187247634,0,0]},{"t":180}],"ix":2},"a":{"a":0,"k":[46.37,28.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,11.06],[-11.09,0],[-2.78,-1.45],[-12.52,0],[0,-15.74],[0.01,-0.32],[0,-5.58],[8.11,0],[0,0],[0,0],[0,0]],"o":[[0,0],[-11.09,0],[0,-11.06],[3.35,0],[3.86,-11.18],[15.8,0],[0,0.32],[4.61,2.47],[0,8.09],[0,0],[-0.04,0],[0,0],[0,0]],"v":[[56.11,57],[20.09,57],[0,36.97],[20.09,16.95],[29.38,19.21],[56.41,0],[85.01,28.5],[84.99,29.46],[92.74,42.36],[78.05,57],[56.41,57],[56.11,57],[56.41,57]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.909803986549,0.909803986549,0.909803986549,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":180,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"bond","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[128,128,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[256,256],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"bond","np":1,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":180,"st":0,"bm":0}],"markers":[]}

MAUI_Weather/Resources/Styles/AppStyles.xaml

@@ -6,7 +6,7 @@
 
 
     <Style x:Key="MainStackLayout" TargetType="VerticalStackLayout">
-        <Setter Property="Marign" Value="0,10,0,0"/>
+        <Setter Property="Margin" Value="0,10,0,0"/>
         <Setter Property="Spacing" Value="15"/>
         <Setter Property="VerticalOptions" Value="Center"/>
     </Style>