Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update ProgressRing Lottie File #6691

Merged
merged 4 commits into from
Feb 16, 2022
Merged

Update ProgressRing Lottie File #6691

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
26ef56f
update test page
karkarl Feb 7, 2022
2d3a2f9
update Lottie file
karkarl Feb 8, 2022
09e7de5
update keyframes
karkarl Feb 10, 2022
48abcea
changes from comments
karkarl Feb 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 24 additions & 5 deletions dev/ProgressRing/AnimatedVisuals/ProgressRingDeterminate.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,21 @@
// <auto-generated>
// This code was generated by a tool.
//
// LottieGen version:
// 6.1.0+gd30fc5741e
//
// Command:
// LottieGen -GenerateDependencyObject -Language Cppwinrt -InputFile ProgressRingDeterminate.json
//
// Input file:
// ProgressRingDeterminate.json (2627 bytes created 14:08-07:00 Feb 7 2022)
//
// Invoked on:
// KAREN @ 17:39-07:00 Feb 7 2022
//
// LottieGen source:
// http://aka.ms/Lottie
//
// Changes to this file may cause incorrect behavior and will be lost if
// the code is regenerated.
// </auto-generated>
Expand Down Expand Up @@ -36,6 +51,7 @@ using namespace winrt::Windows::Foundation::Numerics;
using namespace winrt::Windows::Graphics;
using namespace winrt::Windows::UI;
using namespace winrt::Windows::UI::Composition;
using namespace winrt::Windows::UI::Xaml;

namespace
{
Expand Down Expand Up @@ -176,7 +192,7 @@ namespace
{
const auto result = _c.CreateEllipseGeometry();
result.Radius({ 8.0F, 8.0F });
StartProgressBoundAnimation(result, L"TrimEnd", TrimEndScalarAnimation_0_to_0p99(), RootProgress());
StartProgressBoundAnimation(result, L"TrimEnd", TrimEndScalarAnimation_0_to_1(), RootProgress());
return result;
}

Expand Down Expand Up @@ -250,12 +266,15 @@ namespace
// - Offset:<16, 16>
// Ellipse Path.EllipseGeometry
// TrimEnd
ScalarKeyFrameAnimation TrimEndScalarAnimation_0_to_0p99()
ScalarKeyFrameAnimation TrimEndScalarAnimation_0_to_1()
{
const auto result = CreateScalarKeyFrameAnimation(0.0F, 9.99999975E-05F, StepThenHoldEasingFunction());
result.InsertKeyFrame(0.00833333377F, 9.99999975E-05F, HoldThenStepEasingFunction());
result.InsertKeyFrame(0.983333349F, 0.899999976F, CubicBezierEasingFunction_0());
result.InsertKeyFrame(0.991666675F, 0.99000001F, _cubicBezierEasingFunction_0);
result.InsertKeyFrame(0.25F, 0.25F, CubicBezierEasingFunction_0());
result.InsertKeyFrame(0.5F, 0.5F, _cubicBezierEasingFunction_0);
result.InsertKeyFrame(0.75F, 0.75F, _cubicBezierEasingFunction_0);
result.InsertKeyFrame(0.983333349F, 0.96666666F, _cubicBezierEasingFunction_0);
result.InsertKeyFrame(0.991666675F, 1.0F, _cubicBezierEasingFunction_0);
return result;
}

Expand Down Expand Up @@ -335,7 +354,7 @@ namespace

static bool IsRuntimeCompatible()
{
return winrt::Windows::Foundation::Metadata::ApiInformation::IsApiContractPresent(L"Windows.Foundation.UniversalApiContract", 7);
return winrt::Windows::Foundation::Metadata::ApiInformation::IsApiContractPresent(L"Windows.Foundation.UniversalApiContract", 7);
}
};
} // end namespace
Expand Down
27 changes: 18 additions & 9 deletions dev/ProgressRing/AnimatedVisuals/ProgressRingDeterminate.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,32 @@
// <auto-generated>
// This code was generated by a tool.
//
// LottieGen version:
// 6.1.0+gd30fc5741e
//
// Command:
// LottieGen -GenerateDependencyObject -Language Cppwinrt -InputFile ProgressRingDeterminate.json
//
// Input file:
// ProgressRingDeterminate.json (2627 bytes created 14:08-07:00 Feb 7 2022)
//
// Invoked on:
// KAREN @ 17:39-07:00 Feb 7 2022
//
// LottieGen source:
// http://aka.ms/Lottie
//
// Changes to this file may cause incorrect behavior and will be lost if
// the code is regenerated.
// </auto-generated>
//------------------------------------------------------------------------------

namespace AnimatedVisuals
{
// Name: ProgressRingDeterminate
// Name: ProgressRingDeterminate - 32x32
// Frame rate: 60 fps
// Frame count: 120
// Duration: 2000.0 mS
// ________________________________________________
// | Theme property | Type | Default value |
// |________________|_______|_____________________|
// | Background | Color | #FFD3D3D3 LightGray |
// | Foreground | Color | #FF0078D7 |
// ------------------------------------------------
class ProgressRingDeterminate
: public winrt::implements<ProgressRingDeterminate, winrt::Microsoft::UI::Xaml::Controls::IAnimatedVisualSource>
{
Expand All @@ -35,10 +44,10 @@ namespace AnimatedVisuals
static constexpr int64_t c_durationTicks{ 20000000L };

// Theme property: Background.
static inline const winrt::Windows::UI::Color c_themeBackground{ 0xFF, 0xD3, 0xD3, 0xD3 };
static inline const winrt::Windows::UI::Color c_themeBackground{ 0xFF, 0xD3, 0xD3, 0xD3 };

// Theme property: Foreground.
static inline const winrt::Windows::UI::Color c_themeForeground{ 0xFF, 0x00, 0x78, 0xD7 };
static inline const winrt::Windows::UI::Color c_themeForeground{ 0xFF, 0x00, 0x78, 0xD7 };

winrt::Windows::UI::Color Background();
void Background(winrt::Windows::UI::Color value);
Expand Down
8 changes: 4 additions & 4 deletions dev/ProgressRing/ProgressRing.vcxitems.filters
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@
<ClCompile Include="$(MSBuildThisFileDirectory)ProgressRingAutomationPeer.cpp" />
<ClCompile Include="$(MSBuildThisFileDirectory)ProgressRingTemplateSettings.cpp" />
<ClCompile Include="$(MSBuildThisFileDirectory)..\Generated\ProgressRingTemplateSettings.properties.cpp" />
<ClCompile Include="$(MSBuildThisFileDirectory)AnimatedVisuals\ProgressRingDeterminate.cpp">
<ClCompile Include="$(MSBuildThisFileDirectory)AnimatedVisuals\ProgressRingIndeterminate.cpp">
<Filter>AnimatedVisuals</Filter>
</ClCompile>
<ClCompile Include="$(MSBuildThisFileDirectory)AnimatedVisuals\ProgressRingIndeterminate.cpp">
<ClCompile Include="$(MSBuildThisFileDirectory)AnimatedVisuals\ProgressRingDeterminate.cpp">
<Filter>AnimatedVisuals</Filter>
</ClCompile>
</ItemGroup>
Expand All @@ -19,10 +19,10 @@
<ClInclude Include="$(MSBuildThisFileDirectory)ProgressRingTemplateSettings.h" />
<ClInclude Include="$(MSBuildThisFileDirectory)..\Generated\ProgressRingTemplateSettings.properties.h" />
<ClInclude Include="$(MSBuildThisFileDirectory)..\Generated\ProgressRing.properties.h" />
<ClInclude Include="$(MSBuildThisFileDirectory)AnimatedVisuals\ProgressRingDeterminate.h">
<ClInclude Include="$(MSBuildThisFileDirectory)AnimatedVisuals\ProgressRingIndeterminate.h">
<Filter>AnimatedVisuals</Filter>
</ClInclude>
<ClInclude Include="$(MSBuildThisFileDirectory)AnimatedVisuals\ProgressRingIndeterminate.h">
<ClInclude Include="$(MSBuildThisFileDirectory)AnimatedVisuals\ProgressRingDeterminate.h">
<Filter>AnimatedVisuals</Filter>
</ClInclude>
</ItemGroup>
Expand Down
118 changes: 63 additions & 55 deletions dev/ProgressRing/TestUI/ProgressRingPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,69 +15,77 @@
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<controls:ProgressRing
x:Name="TestProgressRing"
AutomationProperties.Name="TestProgressRing"
IsActive="{x:Bind ShowIsActiveCheckBox.IsChecked, Converter={StaticResource NullableBooleanToBooleanConverter}, Mode=OneWay}"
IsIndeterminate="{x:Bind ShowIsIndeterminateCheckBox.IsChecked, Converter={StaticResource NullableBooleanToBooleanConverter}, Mode=OneWay}"
/>

<Grid VerticalAlignment="Stretch" Margin="5" Width="100" Height="100">
<controls:ProgressRing IsActive="True" VerticalAlignment="Center" HorizontalAlignment="Center" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

<StackPanel Padding="12" Width="250">
<Grid Width="200px" HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>

<TextBox x:Name="MaximumInput" AutomationProperties.Name="MaximumInput" Header="Maximum" PlaceholderText="100" Width="50" HorizontalAlignment="Left" Grid.ColumnSpan="1"/>
<TextBlock x:Name="MaximumInputText" AutomationProperties.Name="MaximumInputText" Grid.Column="1" Text="{Binding ElementName=TestProgressRing, Path=Maximum, Mode=TwoWay}"/>

<TextBox x:Name="MinimumInput" AutomationProperties.Name="MinimumInput" Header="Minimum" PlaceholderText="0" Width="50" HorizontalAlignment="Left" Grid.Row="2" Grid.ColumnSpan="1"/>
<TextBlock x:Name="MinimumInputText" AutomationProperties.Name="MinimumInputText" Grid.Row="2" Grid.Column="1" Text="{Binding ElementName=TestProgressRing, Path=Minimum, Mode=TwoWay}"/>

<TextBox x:Name="WidthInput" AutomationProperties.Name="WidthInput" Header="Width" PlaceholderText="0" Width="50" HorizontalAlignment="Left" Grid.Row="3" Grid.ColumnSpan="1"/>
<TextBlock x:Name="WidthInputText" AutomationProperties.Name="WidthInputText" Grid.Row="3" Grid.Column="1" Text="{Binding ElementName=TestProgressRing, Path=Width, Mode=TwoWay}"/>

<TextBox x:Name="ValueInput" AutomationProperties.Name="ValueInput" Header="Value" PlaceholderText="0" Width="50" HorizontalAlignment="Left" Grid.Row="4" Grid.ColumnSpan="1"/>
<TextBlock x:Name="ValueText" AutomationProperties.Name="ValueText" Grid.Row="4" Grid.Column="1" Text="{Binding ElementName=TestProgressRing, Path=Value, Mode=TwoWay}"/>
</Grid>
</StackPanel>

<Grid Width="200px" HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>

<TextBox x:Name="MaximumInput" AutomationProperties.Name="MaximumInput" Header="Maximum" PlaceholderText="100" Width="50" HorizontalAlignment="Left" Grid.ColumnSpan="1"/>
<TextBlock x:Name="MaximumInputText" AutomationProperties.Name="MaximumInputText" Grid.Column="1" Text="{Binding ElementName=TestProgressRing, Path=Maximum, Mode=TwoWay}"/>

<TextBox x:Name="MinimumInput" AutomationProperties.Name="MinimumInput" Header="Minimum" PlaceholderText="0" Width="50" HorizontalAlignment="Left" Grid.Row="2" Grid.ColumnSpan="1"/>
<TextBlock x:Name="MinimumInputText" AutomationProperties.Name="MinimumInputText" Grid.Row="2" Grid.Column="1" Text="{Binding ElementName=TestProgressRing, Path=Minimum, Mode=TwoWay}"/>

<TextBox x:Name="WidthInput" AutomationProperties.Name="WidthInput" Header="Width" PlaceholderText="0" Width="50" HorizontalAlignment="Left" Grid.Row="3" Grid.ColumnSpan="1"/>
<TextBlock x:Name="WidthInputText" AutomationProperties.Name="WidthInputText" Grid.Row="3" Grid.Column="1" Text="{Binding ElementName=TestProgressRing, Path=Width, Mode=TwoWay}"/>
<TextBlock x:Name="VisualStateText" AutomationProperties.Name="VisualStateText" Margin="0, 20, 0, 20"/>

<TextBox x:Name="ValueInput" AutomationProperties.Name="ValueInput" Header="Value" PlaceholderText="0" Width="50" HorizontalAlignment="Left" Grid.Row="4" Grid.ColumnSpan="1"/>
<TextBlock x:Name="ValueText" AutomationProperties.Name="ValueText" Grid.Row="4" Grid.Column="1" Text="{Binding ElementName=TestProgressRing, Path=Value, Mode=TwoWay}"/>
</Grid>

<TextBlock x:Name="VisualStateText" AutomationProperties.Name="VisualStateText" Margin="0, 20, 0, 20"/>
<TextBlock Text="Animated Visual Player IsPlaying:"/>
<TextBlock x:Name="IsPlayingText" AutomationProperties.Name="IsPlayingText" Margin="0, 0, 0, 20"/>

<TextBlock Text="Animated Visual Player IsPlaying:"/>
<TextBlock x:Name="IsPlayingText" AutomationProperties.Name="IsPlayingText" Margin="0, 0, 0, 20"/>
<TextBlock AutomationProperties.Name="ShowIsActiveText" Text="{x:Bind ShowIsActiveCheckBox.IsChecked, Mode=OneWay}"/>
<CheckBox x:Name="ShowIsActiveCheckBox" AutomationProperties.Name="ShowIsActiveCheckBox" Content="IsActive" IsChecked="True"/>

<TextBlock AutomationProperties.Name="ShowIsActiveText" Text="{x:Bind ShowIsActiveCheckBox.IsChecked, Mode=OneWay}"/>
<CheckBox x:Name="ShowIsActiveCheckBox" AutomationProperties.Name="ShowIsActiveCheckBox" Content="IsActive" IsChecked="True"/>

<TextBlock AutomationProperties.Name="ShowIsIndeterminateText" Text="{x:Bind ShowIsIndeterminateCheckBox.IsChecked, Mode=OneWay}"/>
<CheckBox x:Name="ShowIsIndeterminateCheckBox" AutomationProperties.Name="ShowIsIndeterminateCheckBox" Content="IsIndeterminate" IsChecked="True"/>
<TextBlock AutomationProperties.Name="ShowIsIndeterminateText" Text="{x:Bind ShowIsIndeterminateCheckBox.IsChecked, Mode=OneWay}"/>
<CheckBox x:Name="ShowIsIndeterminateCheckBox" AutomationProperties.Name="ShowIsIndeterminateCheckBox" Content="IsIndeterminate" IsChecked="True"/>

<TextBlock Text="Animated Visual Player Opacity:"/>
<TextBlock x:Name="OpacityText" AutomationProperties.Name="OpacityText" Margin="0, 0, 0, 20"/>
</StackPanel>

<TextBlock Text="Animated Visual Player Opacity:"/>
<TextBlock x:Name="OpacityText" AutomationProperties.Name="OpacityText" Margin="0, 0, 0, 20"/>
<StackPanel Grid.Column="1" Padding="12" Width="250">
<Button x:Name="UpdateMinMaxButton" AutomationProperties.Name="UpdateMinMaxButton" Content="Update Min and Max" Click="UpdateMinMax_Click"/>
<Button x:Name="UpdateWidthButton" AutomationProperties.Name="UpdateWidthButton" Content="Update Width" Click="UpdateWidth_Click"/>
<Button x:Name="UpdateValueButton" AutomationProperties.Name="UpdateValueButton" Content="Update Value" Click="UpdateValue_Click"/>
<RepeatButton x:Name="ChangeValueButton" AutomationProperties.Name="ChangeValueButton" Content="Hold and Change Value" Click="ChangeValue_Click" />

<Button x:Name="UpdateMinMaxButton" AutomationProperties.Name="UpdateMinMaxButton" Content="Update Min and Max" Click="UpdateMinMax_Click"/>
<Button x:Name="UpdateWidthButton" AutomationProperties.Name="UpdateWidthButton" Content="Update Width" Click="UpdateWidth_Click"/>
<Button x:Name="UpdateValueButton" AutomationProperties.Name="UpdateValueButton" Content="Update Value" Click="UpdateValue_Click"/>
<RepeatButton x:Name="ChangeValueButton" AutomationProperties.Name="ChangeValueButton" Content="Hold and Change Value" Click="ChangeValue_Click" />
<Button x:Name="NavigateToCustomLottieSourcePage" AutomationProperties.Name="NavigateToCustomLottieSourcePage">Progress Ring Custom Lottie Source</Button>
<Button x:Name="NavigateToStoryboardAnimationPage" AutomationProperties.Name="NavigateToStoryBoardAnimationPage">Progress Ring Storyboard Animation</Button>
</StackPanel>

<Button x:Name="NavigateToCustomLottieSourcePage" AutomationProperties.Name="NavigateToCustomLottieSourcePage">Progress Ring Custom Lottie Source</Button>
<Button x:Name="NavigateToStoryboardAnimationPage" AutomationProperties.Name="NavigateToStoryBoardAnimationPage">Progress Ring Storyboard Animation</Button>
</StackPanel>
<Grid Grid.Column="2">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<controls:ProgressRing
x:Name="TestProgressRing"
AutomationProperties.Name="TestProgressRing"
IsActive="{x:Bind ShowIsActiveCheckBox.IsChecked, Converter={StaticResource NullableBooleanToBooleanConverter}, Mode=OneWay}"
IsIndeterminate="{x:Bind ShowIsIndeterminateCheckBox.IsChecked, Converter={StaticResource NullableBooleanToBooleanConverter}, Mode=OneWay}"
/>
</StackPanel>
</Grid>

</Grid>

</Grid>
</local:TestPage>