Skip to content

Commit

Permalink
feat(coloranimation): First implementation of ColorAnimationUsingKeyF…
Browse files Browse the repository at this point in the history 
…rames
  • Loading branch information
@carldebilly
carldebilly committed Jun 16, 2020
1 parent 2a037e2 commit 0091a9f
Show file tree
Hide file tree
Showing 33 changed files with 973 additions and 441 deletions.
7 changes: 7 additions & 0 deletions src/SamplesApp/UITests.Shared/UITests.Shared.projitems
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2673,6 +2673,10 @@
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
</Page>
<Page Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Media_Animation\ColorAnimationUsingKeyFrames_Fill.xaml">
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
</Page>
<Page Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Media_Animation\ColorAnimation_Background.xaml">
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
Expand Down Expand Up @@ -4629,6 +4633,9 @@
<Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Media\ImageBrushTests\ImageBrush_WriteableBitmap.xaml.cs">
<DependentUpon>ImageBrush_WriteableBitmap.xaml</DependentUpon>
</Compile>
<Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Media_Animation\ColorAnimationUsingKeyFrames_Fill.xaml.cs">
<DependentUpon>ColorAnimationUsingKeyFrames_Fill.xaml</DependentUpon>
</Compile>
<Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Media_Animation\ColorAnimation_Background.xaml.cs">
<DependentUpon>ColorAnimation_Background.xaml</DependentUpon>
</Compile>
Expand Down
197 changes: 197 additions & 0 deletions ...App/UITests.Shared/Windows_UI_Xaml_Media_Animation/ColorAnimationUsingKeyFrames_Fill.xaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,197 @@
<Page
x:Class="UITests.Windows_UI_Xaml_Media_Animation.ColorAnimationUsingKeyFrames_Fill"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UITests.Windows_UI_Xaml_Media_Animation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Page.Resources>
<SolidColorBrush x:Key="Color1" Color="#FF0000" />
<SolidColorBrush x:Key="Color2" Color="#FF8000" />
<SolidColorBrush x:Key="Color3" Color="#FFFF00" />
<SolidColorBrush x:Key="Color4" Color="#008000" />
<SolidColorBrush x:Key="Color5" Color="#0000FF" />
<SolidColorBrush x:Key="Color6" Color="#A000C0" />
</Page.Resources>

<StackPanel Spacing="10">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="States">
<VisualState x:Name="StateOff">
</VisualState>
<VisualState x:Name="StateCool">
<Storyboard RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="btn2"
Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)">
<LinearColorKeyFrame Value="{StaticResource Color1}" KeyTime="0:0:0.25" />
<LinearColorKeyFrame Value="{StaticResource Color2}" KeyTime="0:0:0.5" />
<LinearColorKeyFrame Value="{StaticResource Color3}" KeyTime="0:0:0.75" />
<LinearColorKeyFrame Value="{StaticResource Color4}" KeyTime="0:0:1.0" />
<LinearColorKeyFrame Value="{StaticResource Color5}" KeyTime="0:0:1.25" />
<LinearColorKeyFrame Value="{StaticResource Color6}" KeyTime="0:0:1.5" />
</ColorAnimationUsingKeyFrames>
</Storyboard>

</VisualState>
<VisualState x:Name="StateGray">
<Storyboard RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="border1"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
<DiscreteColorKeyFrame Value="White" KeyTime="0:0:0.15" />
<LinearColorKeyFrame Value="LightGray" KeyTime="0:0:0.30" />
<LinearColorKeyFrame Value="DarkGray" KeyTime="0:0:0.45" />
<DiscreteColorKeyFrame Value="Black" KeyTime="0:0:0.60" />
<LinearColorKeyFrame Value="DarkGray" KeyTime="0:0:0.75" />
<LinearColorKeyFrame Value="LightGray" KeyTime="0:0:0.90" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="border2"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
<LinearColorKeyFrame Value="LightGray" KeyTime="0:0:0.15" />
<DiscreteColorKeyFrame Value="White" KeyTime="0:0:0.30" />
<LinearColorKeyFrame Value="LightGray" KeyTime="0:0:0.45" />
<LinearColorKeyFrame Value="DarkGray" KeyTime="0:0:0.60" />
<DiscreteColorKeyFrame Value="Black" KeyTime="0:0:0.75" />
<LinearColorKeyFrame Value="DarkGray" KeyTime="0:0:0.90" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="border3"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
<LinearColorKeyFrame Value="DarkGray" KeyTime="0:0:0.15" />
<LinearColorKeyFrame Value="LightGray" KeyTime="0:0:0.30" />
<DiscreteColorKeyFrame Value="White" KeyTime="0:0:0.45" />
<LinearColorKeyFrame Value="LightGray" KeyTime="0:0:0.60" />
<LinearColorKeyFrame Value="DarkGray" KeyTime="0:0:0.75" />
<DiscreteColorKeyFrame Value="Black" KeyTime="0:0:0.90" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="border4"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
<DiscreteColorKeyFrame Value="Black" KeyTime="0:0:0.15" />
<LinearColorKeyFrame Value="DarkGray" KeyTime="0:0:0.30" />
<LinearColorKeyFrame Value="LightGray" KeyTime="0:0:0.45" />
<DiscreteColorKeyFrame Value="White" KeyTime="0:0:0.60" />
<LinearColorKeyFrame Value="LightGray" KeyTime="0:0:0.75" />
<LinearColorKeyFrame Value="DarkGray" KeyTime="0:0:0.90" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="border5"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
<LinearColorKeyFrame Value="DarkGray" KeyTime="0:0:0.15" />
<DiscreteColorKeyFrame Value="Black" KeyTime="0:0:0.30" />
<LinearColorKeyFrame Value="DarkGray" KeyTime="0:0:0.45" />
<LinearColorKeyFrame Value="LightGray" KeyTime="0:0:0.60" />
<DiscreteColorKeyFrame Value="White" KeyTime="0:0:0.75" />
<LinearColorKeyFrame Value="LightGray" KeyTime="0:0:0.90" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="border6"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
<LinearColorKeyFrame Value="LightGray" KeyTime="0:0:0.15" />
<LinearColorKeyFrame Value="DarkGray" KeyTime="0:0:0.30" />
<DiscreteColorKeyFrame Value="Black" KeyTime="0:0:0.45" />
<LinearColorKeyFrame Value="DarkGray" KeyTime="0:0:0.60" />
<LinearColorKeyFrame Value="LightGray" KeyTime="0:0:0.75" />
<DiscreteColorKeyFrame Value="White" KeyTime="0:0:0.90" />
</ColorAnimationUsingKeyFrames>
</Storyboard>

</VisualState>
<VisualState x:Name="StateStrobe">
<Storyboard RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="border1"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
<DiscreteColorKeyFrame Value="White" KeyTime="0:0:0.12" />
<DiscreteColorKeyFrame Value="Black" KeyTime="0:0:0.24"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="border2"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
<DiscreteColorKeyFrame Value="White" KeyTime="0:0:0.8" />
<DiscreteColorKeyFrame Value="Black" KeyTime="0:0:0.31"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="border3"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
<DiscreteColorKeyFrame Value="Black" KeyTime="0:0:0.23" />
<DiscreteColorKeyFrame Value="White" KeyTime="0:0:0.5"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="border4"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
<DiscreteColorKeyFrame Value="Black" KeyTime="0:0:0.17" />
<DiscreteColorKeyFrame Value="White" KeyTime="0:0:0.34"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="border5"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
<DiscreteColorKeyFrame Value="Black" KeyTime="0:0:0.9" />
<DiscreteColorKeyFrame Value="White" KeyTime="0:0:0.19"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="border6"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
<DiscreteColorKeyFrame Value="White" KeyTime="0:0:0.20" />
<DiscreteColorKeyFrame Value="Black" KeyTime="0:0:0.40"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>

</VisualState>
<VisualState x:Name="StateXmas">
<Storyboard RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="border6"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
<DiscreteColorKeyFrame Value="Green" KeyTime="0:0:2" />
<DiscreteColorKeyFrame Value="Red" KeyTime="0:0:4"/>
<DiscreteColorKeyFrame Value="Yellow" KeyTime="0:0:6" />
<DiscreteColorKeyFrame Value="Purple" KeyTime="0:0:8"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>

</VisualState>
</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<TextBlock>Original Colors: (should never change)</TextBlock>
<StackPanel Orientation="Horizontal" Height="40">
<Border Width="20" Background="{StaticResource Color1}" />
<Rectangle Width="20" Fill="{StaticResource Color1}" />
<Border Width="20" Background="{StaticResource Color2}" />
<Rectangle Width="20" Fill="{StaticResource Color2}" />
<Border Width="20" Background="{StaticResource Color3}" />
<Rectangle Width="20" Fill="{StaticResource Color3}" />
<Border Width="20" Background="{StaticResource Color4}" />
<Rectangle Width="20" Fill="{StaticResource Color4}" />
<Border Width="20" Background="{StaticResource Color5}" />
<Rectangle Width="20" Fill="{StaticResource Color5}" />
<Border Width="20" Background="{StaticResource Color6}" />
<Rectangle Width="20" Fill="{StaticResource Color6}" />
</StackPanel>

<StackPanel Orientation="Horizontal" Spacing="20">
<Button Click="GoToState" x:Name="btn1" Tag="StateOff" Background="Transparent">-&gt;StateOff</Button>
<Button Click="GoToState" x:Name="btn2" Tag="StateCool" Background="Transparent">-&gt;StateCool</Button>
<Button Click="GoToState" x:Name="btn3" Tag="StateGray" Background="Transparent">-&gt;StateGray</Button>
<Button Click="GoToState" x:Name="btn4" Tag="StateStrobe" Background="Transparent">-&gt;StateStrobe</Button>
<Button Click="GoToState" x:Name="btn6" Tag="StateXmas" Background="Transparent">-&gt;StateXmas</Button>
</StackPanel>

<TextBlock>Animated block:</TextBlock>
<StackPanel Orientation="Horizontal" Height="40">
<Border Width="40" x:Name="border1" Background="{StaticResource Color1}" />
<Border Width="40" x:Name="border2" Background="{StaticResource Color2}" />
<Border Width="40" x:Name="border3" Background="{StaticResource Color3}" />
<Border Width="40" x:Name="border4" Background="{StaticResource Color4}" />
<Border Width="40" x:Name="border5" Background="{StaticResource Color5}" />
<Border Width="40" x:Name="border6" Background="{StaticResource Color6}" />
</StackPanel>
</StackPanel>
</Page>
26 changes: 26 additions & 0 deletions .../UITests.Shared/Windows_UI_Xaml_Media_Animation/ColorAnimationUsingKeyFrames_Fill.xaml.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Uno.UI.Samples.Controls;

namespace UITests.Windows_UI_Xaml_Media_Animation
{
[Sample("Animations")]
public sealed partial class ColorAnimationUsingKeyFrames_Fill : Page
{
public ColorAnimationUsingKeyFrames_Fill()
{
this.InitializeComponent();
}

private void GoToState(object sender, RoutedEventArgs e)
{
if (sender is FrameworkElement o)
{
var state = o.Tag as string;
Console.WriteLine($"Activating state {state}");
VisualStateManager.GoToState(this, state, true);
}
}
}
}
89 changes: 89 additions & 0 deletions src/Uno.UI.Wasm/ts/Windows/UI/Xaml/Animation/RenderingLoopFloatAnimator.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
namespace Windows.UI.Xaml.Media.Animation {
export class RenderingLoopFloatAnimator {
static activeInstances: { [jsHandle: number]: RenderingLoopFloatAnimator} = {};

public static createInstance(managedHandle: string, jsHandle: number) {
RenderingLoopFloatAnimator.activeInstances[jsHandle] = new RenderingLoopFloatAnimator(managedHandle);
}

public static getInstance(jsHandle: number): RenderingLoopFloatAnimator {
return RenderingLoopFloatAnimator.activeInstances[jsHandle];
}

public static destroyInstance(jsHandle: number) {
delete RenderingLoopFloatAnimator.activeInstances[jsHandle];
}

private constructor(private managedHandle: string) {
}

public SetStartFrameDelay(delay: number) {
this.unscheduleFrame();

if (this._isEnabled) {
this.scheduleDelayedFrame(delay);
}
}

public SetAnimationFramesInterval() {
this.unscheduleFrame();

if (this._isEnabled) {
this.onFrame();
}
}

public EnableFrameReporting() {
if (this._isEnabled) {
return;
}

this._isEnabled = true;
this.scheduleAnimationFrame();
}

public DisableFrameReporting() {
this._isEnabled = false;
this.unscheduleFrame();
}

private onFrame() {
Uno.Foundation.Interop.ManagedObject.dispatch(this.managedHandle, "OnFrame", null);

// Schedule a new frame only if still enabled and no frame was scheduled by the managed OnFrame
if (this._isEnabled && this._frameRequestId == null && this._delayRequestId == null) {
this.scheduleAnimationFrame();
}
}

private unscheduleFrame() {
if (this._delayRequestId != null) {
clearTimeout(this._delayRequestId);
this._delayRequestId = null;
}
if (this._frameRequestId != null) {
window.cancelAnimationFrame(this._frameRequestId);
this._frameRequestId = null;
}
}

private scheduleDelayedFrame(delay: number) {
this._delayRequestId = setTimeout(() => {
this._delayRequestId = null;
this.onFrame();
},
delay);
}

private scheduleAnimationFrame() {
this._frameRequestId = window.requestAnimationFrame(() => {
this._frameRequestId = null;
this.onFrame();
});
}

private _delayRequestId?: number;
private _frameRequestId?: number;
private _isEnabled = false;
}
}
2 changes: 1 addition & 1 deletion src/Uno.UI/Extensions/TimelineExtensions.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ internal static string GetTimelineTargetFullName(this Timeline t)

internal static bool GetIsDurationZero(this Timeline timeline)
{
return timeline.Duration.TimeSpan == TimeSpan.Zero;
return timeline.GetCalculatedDuration() == TimeSpan.Zero;
}

/// <summary>
Expand Down
39 changes: 0 additions & 39 deletions src/Uno.UI/Generated/3.0.0.0/Windows.UI.Xaml.Media.Animation/ColorAnimationUsingKeyFrames.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,45 +7,6 @@ namespace Windows.UI.Xaml.Media.Animation
#endif
public partial class ColorAnimationUsingKeyFrames : global::Windows.UI.Xaml.Media.Animation.Timeline
{
#if __ANDROID__ || __IOS__ || NET461 || __WASM__ || __MACOS__
[global::Uno.NotImplemented]
public bool EnableDependentAnimation
{
get
{
return (bool)this.GetValue(EnableDependentAnimationProperty);
}
set
{
this.SetValue(EnableDependentAnimationProperty, value);
}
}
#endif
#if __ANDROID__ || __IOS__ || NET461 || __WASM__ || __MACOS__
[global::Uno.NotImplemented]
public global::Windows.UI.Xaml.Media.Animation.ColorKeyFrameCollection KeyFrames
{
get
{
throw new global::System.NotImplementedException("The member ColorKeyFrameCollection ColorAnimationUsingKeyFrames.KeyFrames is not implemented in Uno.");
}
}
#endif
#if __ANDROID__ || __IOS__ || NET461 || __WASM__ || __MACOS__
[global::Uno.NotImplemented]
public static global::Windows.UI.Xaml.DependencyProperty EnableDependentAnimationProperty { get; } =
Windows.UI.Xaml.DependencyProperty.Register(
nameof(EnableDependentAnimation), typeof(bool),
typeof(global::Windows.UI.Xaml.Media.Animation.ColorAnimationUsingKeyFrames),
new FrameworkPropertyMetadata(default(bool)));
#endif
#if __ANDROID__ || __IOS__ || NET461 || __WASM__ || __MACOS__
[global::Uno.NotImplemented]
public ColorAnimationUsingKeyFrames() : base()
{
global::Windows.Foundation.Metadata.ApiInformation.TryRaiseNotImplemented("Windows.UI.Xaml.Media.Animation.ColorAnimationUsingKeyFrames", "ColorAnimationUsingKeyFrames.ColorAnimationUsingKeyFrames()");
}
#endif
// Forced skipping of method Windows.UI.Xaml.Media.Animation.ColorAnimationUsingKeyFrames.ColorAnimationUsingKeyFrames()
// Forced skipping of method Windows.UI.Xaml.Media.Animation.ColorAnimationUsingKeyFrames.KeyFrames.get
// Forced skipping of method Windows.UI.Xaml.Media.Animation.ColorAnimationUsingKeyFrames.EnableDependentAnimation.get
Expand Down

0 comments on commit 0091a9f

Please sign in to comment.