Skip to content

Commit e7befb4

Browse files
author
Simeon
authored
LottieViewer UI improvements for AnimatedIcon (#426)
* Tweak the nudging factor for markers, and better UI for markers. These changes are to improve AnimatedIcon workflow. The nudging value of 0.01 was insufficient, so this ups it to 0.05. The UI in LottieViewer for markers and the scrubber is confusing because it shows progress, which designers don't care about. So now it uses frames everywhere. Developers that need to convert to progress can do the math themselves (it's just (frame count) / (number of frames) plus a nudge. * Make the arrow keys on the scrubber move by a single frame. * LottieViewer UI now only deals in frames. Seeing as LottieViewer is for designers, and they don't know about progress, the markers and scrubber will now only show frames information. Also added more frame information to the Lottie properties. Arrow keys now move by a single frame on each press. * Fix the colors on hyperlinks and the playback rate slider. The default colors for hyperlinks and sliders are themed, which can cause the colors to become unreadble on the gray background of the main page..
1 parent 7e6f416 commit e7befb4

22 files changed

+641
-235
lines changed

‎Lottie-Windows.sln‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -170,8 +170,6 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "LottieGen", "LottieGen\Dotn
170170
EndProject
171171
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "LottieGen.win-x64", "LottieGen\win-x64\LottieGen.win-x64.csproj", "{E91E3CDE-3088-4B12-8472-D2C1C05B7229}"
172172
EndProject
173-
Project("{D954291E-2A0B-460D-934E-DC6B0785DB48}") = "CommandLine", "source\CommandLine\CommandLine.shproj", "{DB8248EB-8DD0-4EE0-86E3-F0BA9A405933}"
174-
EndProject
175173
Project("{D954291E-2A0B-460D-934E-DC6B0785DB48}") = "LottieGen", "source\LottieGen\LottieGen.shproj", "{7654A857-9A99-4185-9F8E-DD0CE662AF23}"
176174
EndProject
177175
Project("{D954291E-2A0B-460D-934E-DC6B0785DB48}") = "LottieGenExe", "source\LottieGenExe\LottieGenExe.shproj", "{DC7F7A39-B7A7-40B4-937A-601460CAE38C}"
@@ -241,7 +239,6 @@ Global
241239
source\YamlData\YamlData.projitems*{cb587630-3cfd-4bb3-867c-3f5b1ffbc738}*SharedItemsImports = 5
242240
source\WinCompData\WinCompData.projitems*{d02870de-7ded-4916-85d4-3175ceedef74}*SharedItemsImports = 13
243241
source\UIDataCodeGen\UIDataCodeGen.projitems*{d02be6c8-14db-4b4f-8600-f3c9b69c104d}*SharedItemsImports = 13
244-
source\CommandLine\CommandLine.projitems*{db8248eb-8dd0-4ee0-86e3-f0ba9a405933}*SharedItemsImports = 13
245242
source\LottieGenExe\LottieGenExe.projitems*{dc7f7a39-b7a7-40b4-937a-601460cae38c}*SharedItemsImports = 13
246243
source\NullablesAttributes\NullablesAttributes.projitems*{e32587a8-94e8-4b68-91ad-f3612a48a62b}*SharedItemsImports = 13
247244
source\Animatables\Animatables.projitems*{e392bad0-f936-4b64-a445-552597795cc7}*SharedItemsImports = 5
@@ -712,7 +709,6 @@ Global
712709
{AB2ACC11-DE31-4E47-8A5B-895D6934684F} = {C75BD686-21A6-4EB3-8D4B-D5A01C019C52}
713710
{88C07427-E8AF-4F9D-A4FE-07EB2D975723} = {C75BD686-21A6-4EB3-8D4B-D5A01C019C52}
714711
{FC89273A-B2DA-4625-8A73-EF02A658D65E} = {AB232F35-AAF7-4AE2-B1D2-45DD9BC2F7D7}
715-
{DB8248EB-8DD0-4EE0-86E3-F0BA9A405933} = {AB232F35-AAF7-4AE2-B1D2-45DD9BC2F7D7}
716712
{7654A857-9A99-4185-9F8E-DD0CE662AF23} = {AB232F35-AAF7-4AE2-B1D2-45DD9BC2F7D7}
717713
{DC7F7A39-B7A7-40B4-937A-601460CAE38C} = {AB232F35-AAF7-4AE2-B1D2-45DD9BC2F7D7}
718714
EndGlobalSection

‎LottieViewer/FloatFormatter.cs‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
// See the LICENSE file in the project root for more information.
4+
5+
#nullable enable
6+
7+
using System;
8+
using Windows.UI.Xaml.Data;
9+
10+
namespace LottieViewer
11+
{
12+
public sealed class FloatFormatter : IValueConverter
13+
{
14+
object IValueConverter.Convert(object value, Type targetType, object parameter, string language)
15+
{
16+
return ((double)value).ToString("0.#");
17+
}
18+
19+
object IValueConverter.ConvertBack(object value, Type targetType, object parameter, string language)
20+
{
21+
// Only support one way binding.
22+
throw new NotImplementedException();
23+
}
24+
}
25+
}

‎LottieViewer/LottieViewer.csproj‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,9 +95,12 @@
9595
<Compile Include="FeedbackLottie.xaml.cs">
9696
<DependentUpon>FeedbackLottie.xaml</DependentUpon>
9797
</Compile>
98+
<Compile Include="FloatFormatter.cs" />
9899
<Compile Include="PlayStopButton.xaml.cs">
99100
<DependentUpon>PlayStopButton.xaml</DependentUpon>
100101
</Compile>
102+
<Compile Include="PropertiesTemplateSelector.cs" />
103+
<Compile Include="ScrubberValueChangedEventArgs.cs" />
101104
<Compile Include="ViewModel\LottieVisualDiagnosticsViewModel.cs" />
102105
<Compile Include="MainPage.xaml.cs">
103106
<DependentUpon>MainPage.xaml</DependentUpon>
@@ -114,6 +117,7 @@
114117
<Compile Include="ViewModel\Marker.cs" />
115118
<Compile Include="ViewModel\MarkerWithDuration.cs" />
116119
<Compile Include="ViewModel\PairOfStrings.cs" />
120+
<Compile Include="VisibilityConverter.cs" />
117121
</ItemGroup>
118122
<ItemGroup>
119123
<AppxManifest Condition="'$(Configuration)' != 'BETA'" Include="Package.appxmanifest">

‎LottieViewer/MainPage.xaml‎

Lines changed: 96 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,23 @@
66
xmlns:lottie="using:Microsoft.Toolkit.Uwp.UI.Lottie"
77
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:viewmodel="using:LottieViewer.ViewModel"
88
Visibility="Visible"
9-
mc:Ignorable="d">
9+
mc:Ignorable="d"
10+
RequestedTheme="Dark"
11+
PointerPressed="Page_PointerPressed" >
1012
<Page.Resources>
11-
<local:VisiblityConverter x:Key="VisibilityConverter" />
13+
<local:VisibilityConverter x:Key="VisibilityConverter" />
1214
<local:FloatFormatter x:Key="floatFormatter" />
1315
<SolidColorBrush x:Name="ArtboardBrush"
1416
Color="{x:Bind BackgroundColor.Color, Mode=OneWay}" />
17+
18+
<!--
19+
Color for Hyperlink. Use this to override the default Foreground
20+
color on Hyperlink so that it is visible on the gray background
21+
(otherwise the Hyperlink color will be themed and may become
22+
unreadable).
23+
-->
24+
<StaticResource x:Key="LottieHyperlinkForegroundBrush"
25+
ResourceKey="LottieBasicBrush" />
1526
</Page.Resources>
1627

1728
<RelativePanel AllowDrop="True"
@@ -127,7 +138,7 @@
127138
<DataTemplate x:DataType="lottie:Issue">
128139
<StackPanel Orientation="Horizontal">
129140
<TextBlock MinWidth="60">
130-
<Hyperlink NavigateUri="{x:Bind Url}"><Run FontWeight="Bold"
141+
<Hyperlink Foreground="{StaticResource LottieHyperlinkForegroundBrush}" NavigateUri="{x:Bind Url}"><Run FontWeight="Bold"
131142
Text="{x:Bind Code}" Foreground="Orange" /></Hyperlink>
132143
</TextBlock>
133144
<TextBlock Text="{x:Bind Description}" TextWrapping="Wrap" MaxWidth="240" Foreground="White"/>
@@ -148,16 +159,28 @@
148159
<ColumnDefinition Width="50"/>
149160
</Grid.ColumnDefinitions>
150161
<Slider
151-
Padding="10, 0, 10, 0"
152-
HorizontalAlignment="Stretch"
153-
LargeChange="1"
154-
Maximum="2.0"
155-
Minimum="-2.0"
156-
SmallChange="0.1"
157-
StepFrequency="0.1"
158-
TickFrequency="0.5"
159-
TickPlacement="TopLeft"
160-
Value="{x:Bind _stage.Player.PlaybackRate, Mode=TwoWay}" />
162+
Padding="10, 0, 10, 0"
163+
HorizontalAlignment="Stretch"
164+
LargeChange="1"
165+
Maximum="2.0"
166+
Minimum="-2.0"
167+
SmallChange="0.1"
168+
StepFrequency="0.1"
169+
TickFrequency="0.5"
170+
TickPlacement="TopLeft"
171+
Value="{x:Bind _stage.Player.PlaybackRate, Mode=TwoWay}">
172+
<Slider.Resources>
173+
<!--
174+
Override the themed slider resources so that control ignores the accent colors.
175+
This is desirable because the accent colors may make the control hard to see
176+
on the gray background.
177+
-->
178+
<StaticResource x:Key="SliderThumbBackground" ResourceKey="LottieBasicBrush" />
179+
<StaticResource x:Key="SliderThumbBackgroundPointerOver" ResourceKey="LottieBasicBrush" />
180+
<StaticResource x:Key="SliderThumbBackgroundPressed" ResourceKey="LottieBasicBrush" />
181+
<StaticResource x:Key="SliderThumbBackgroundDisabled" ResourceKey="LottieBasicBrush" />
182+
</Slider.Resources>
183+
</Slider>
161184
<TextBlock Grid.Column="1" Margin="10,0,0,0">x <Run Text="{x:Bind _stage.Player.PlaybackRate, Mode=OneWay, Converter={StaticResource floatFormatter}}"/></TextBlock>
162185
</Grid>
163186
</StackPanel>
@@ -166,10 +189,11 @@
166189
<Border Style="{StaticResource SeparatorStyle}"/>
167190

168191
<!-- Properties list. Only visible if there is a Diagnostics object. -->
169-
<Grid Visibility="{x:Bind _stage.DiagnosticsViewModel.DiagnosticsObject, Converter={StaticResource VisibilityConverter}, ConverterParameter=whatthe, Mode=OneWay}">
192+
<Grid Visibility="{x:Bind _stage.DiagnosticsViewModel.DiagnosticsObject, Converter={StaticResource VisibilityConverter}, Mode=OneWay}">
170193
<Grid.RowDefinitions>
171194
<RowDefinition Height="26"/>
172195
<RowDefinition/>
196+
<RowDefinition/>
173197
</Grid.RowDefinitions>
174198
<Grid.Resources>
175199
<DataTemplate x:Key="NormalTemplate" x:DataType="viewmodel:PairOfStrings">
@@ -179,38 +203,59 @@
179203
</StackPanel>
180204
</DataTemplate>
181205

182-
<DataTemplate x:Key="MarkerTemplate" x:DataType="viewmodel:Marker">
183-
<StackPanel Orientation="Horizontal" Margin="0,0,0,2">
184-
<TextBlock Foreground="LightGray" MinWidth="60" Text="{x:Bind PropertyName}"/>
185-
<TextBlock Foreground="White" TextWrapping="Wrap" MaxWidth="250">
186-
<Hyperlink Click="MarkerClick"><Run Text="{x:Bind ProgressText}"/></Hyperlink> <Run Text="{x:Bind Name}"/>
187-
</TextBlock>
188-
</StackPanel>
189-
</DataTemplate>
190-
191-
<DataTemplate x:Key="MarkerWithDurationTemplate" x:DataType="viewmodel:MarkerWithDuration">
192-
<StackPanel Orientation="Horizontal" Margin="0,0,0,2">
193-
<TextBlock Foreground="LightGray" MinWidth="60" Text="{x:Bind PropertyName}"/>
194-
<TextBlock Foreground="White" TextWrapping="Wrap" MaxWidth="250">
195-
<Hyperlink Click="MarkerClick"><Run Text="{x:Bind ProgressText}"/></Hyperlink> -
196-
<Hyperlink Click="MarkerEndClick"><Run Text="{x:Bind ToProgressText}"/></Hyperlink> <Run Text="{x:Bind Name}"/>
197-
</TextBlock>
198-
</StackPanel>
199-
</DataTemplate>
200-
201206
<local:PropertiesTemplateSelector
202207
x:Key="PropertiesTemplateSelector"
203-
Normal="{StaticResource NormalTemplate}"
204-
Marker="{StaticResource MarkerTemplate}"
205-
MarkerWithDuration="{StaticResource MarkerWithDurationTemplate}"/>
208+
Normal="{StaticResource NormalTemplate}" />
206209
</Grid.Resources>
207210
<TextBlock FontWeight="Bold" >Lottie properties</TextBlock>
208-
<ItemsControl x:Name="InfoList" Grid.Row="1" ItemsSource="{x:Bind PropertiesList}" ItemTemplateSelector="{StaticResource PropertiesTemplateSelector}"/>
211+
212+
<!-- The list of Lottie properties. -->
213+
<ItemsControl Grid.Row="1" ItemsSource="{x:Bind PropertiesList}" ItemTemplateSelector="{StaticResource PropertiesTemplateSelector}"/>
214+
215+
<!-- Markers list. -->
216+
<Grid Grid.Row="2" Visibility="{x:Bind MarkersList.Count, Converter={StaticResource VisibilityConverter}, Mode=OneWay}">
217+
<Grid.Resources>
218+
<DataTemplate x:Key="MarkerTemplate" x:DataType="viewmodel:Marker">
219+
<StackPanel Orientation="Horizontal" Margin="0,0,0,2" MaxWidth="310">
220+
<TextBlock Foreground="White" TextAlignment="Right" TextWrapping="Wrap" MaxWidth="250" MinWidth="60" Padding="0,0,12,0">
221+
<Hyperlink Foreground="{StaticResource LottieHyperlinkForegroundBrush}" Click="MarkerClick"><Run Text="{x:Bind InFrame}"/></Hyperlink>
222+
</TextBlock>
223+
<TextBlock Foreground="White" TextAlignment="Right" TextWrapping="Wrap" Text="{x:Bind Name}"/>
224+
</StackPanel>
225+
</DataTemplate>
226+
227+
<DataTemplate x:Key="MarkerWithDurationTemplate" x:DataType="viewmodel:MarkerWithDuration">
228+
<StackPanel Orientation="Horizontal" Margin="0,0,0,2" MaxWidth="310">
229+
<TextBlock Foreground="White" TextAlignment="Right" TextWrapping="Wrap" MaxWidth="250" MinWidth="60" Padding="0,0,12,0">
230+
<Hyperlink Foreground="{StaticResource LottieHyperlinkForegroundBrush}" Click="MarkerClick"><Run Text="{x:Bind InFrame}"/></Hyperlink> -
231+
<Hyperlink Foreground="{StaticResource LottieHyperlinkForegroundBrush}" Click="MarkerEndClick"><Run Text="{x:Bind OutFrame}"/></Hyperlink>
232+
</TextBlock>
233+
<TextBlock Foreground="White" TextWrapping="Wrap" Text="{x:Bind Name}"/>
234+
</StackPanel>
235+
</DataTemplate>
236+
237+
<local:PropertiesTemplateSelector
238+
x:Key="PropertiesTemplateSelector"
239+
Marker="{StaticResource MarkerTemplate}"
240+
MarkerWithDuration="{StaticResource MarkerWithDurationTemplate}"/>
241+
</Grid.Resources>
242+
<StackPanel>
243+
<StackPanel Orientation="Horizontal" Margin="0,0,0,2">
244+
<TextBlock Foreground="LightGray" MinWidth="60" Text="Markers"/>
245+
<TextBlock Foreground="White" TextWrapping="Wrap" MaxWidth="250" />
246+
</StackPanel>
247+
<!--<StackPanel Orientation="Horizontal" Margin="0,0,0,2">
248+
<TextBlock Foreground="DimGray" MinWidth="60" Text="Frame" TextAlignment="Right"/>
249+
<TextBlock Foreground="DimGray" Text="Name" Margin="10,0,0,0"/>
250+
</StackPanel>-->
251+
<ItemsControl ItemsSource="{x:Bind MarkersList}" ItemTemplateSelector="{StaticResource PropertiesTemplateSelector}"/>
252+
</StackPanel>
253+
</Grid>
209254
</Grid>
210255

211256
<!-- Separator -->
212257
<Border Style="{StaticResource SeparatorStyle}"
213-
Visibility="{x:Bind _stage.DiagnosticsViewModel.DiagnosticsObject, Converter={StaticResource VisibilityConverter}, ConverterParameter=whatthe, Mode=OneWay}"/>
258+
Visibility="{x:Bind _stage.DiagnosticsViewModel.DiagnosticsObject, Converter={StaticResource VisibilityConverter}, Mode=OneWay}"/>
214259

215260
<!-- App version info. -->
216261
<Grid>
@@ -293,8 +338,8 @@
293338

294339
<!-- Play/stop button -->
295340
<local:PlayStopButton
296-
Margin="0,4,0,0"
297341
x:Name="_playStopButton"
342+
Margin="0,4,0,0"
298343
IsEnabled="{x:Bind _stage.Player.IsAnimatedVisualLoaded, Mode=OneWay}"
299344
Toggled="_playControl_Toggled"
300345
VerticalAlignment="Center"
@@ -305,18 +350,18 @@
305350
/>
306351

307352
<!-- Scrubber -->
308-
<!-- IsEnabled="{x:Bind _playStopButton.IsChecked, Mode=OneWay}" -->
309-
<local:Scrubber x:Name="_scrubber"
310-
AutomationProperties.Name="Animation progress"
311-
Margin="0,5,0,0"
312-
VerticalAlignment="Center"
313-
IsEnabled="{x:Bind _stage.Player.IsAnimatedVisualLoaded, Mode=OneWay}"
314-
RelativePanel.AlignBottomWithPanel="True"
315-
RelativePanel.AlignRightWithPanel="True"
316-
RelativePanel.AlignTopWithPanel="True"
317-
RelativePanel.RightOf="_playStopButton"
318-
ValueChanged="ProgressSliderChanged"
319-
DiagnosticsViewModel="{x:Bind _stage.DiagnosticsViewModel, Mode=OneWay}" />
353+
<local:Scrubber
354+
x:Name="_scrubber"
355+
AutomationProperties.Name="Animation progress"
356+
Margin="0,5,0,0"
357+
VerticalAlignment="Center"
358+
IsEnabled="{x:Bind _stage.Player.IsAnimatedVisualLoaded, Mode=OneWay}"
359+
RelativePanel.AlignBottomWithPanel="True"
360+
RelativePanel.AlignTopWithPanel="True"
361+
RelativePanel.RightOf="_playStopButton"
362+
RelativePanel.AlignRightWithPanel="True"
363+
ValueChanged="ProgressSliderChanged"
364+
DiagnosticsViewModel="{x:Bind _stage.DiagnosticsViewModel, Mode=OneWay}" />
320365
</RelativePanel>
321366
</Grid>
322367
</RelativePanel>

0 commit comments

Comments
 (0)