-
Notifications
You must be signed in to change notification settings - Fork 703
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(coloranimation): First implementation of ColorAnimationUsingKeyF…
…rames
- Loading branch information
1 parent
2a037e2
commit 0091a9f
Showing
33 changed files
with
973 additions
and
441 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
197 changes: 197 additions & 0 deletions
197
...App/UITests.Shared/Windows_UI_Xaml_Media_Animation/ColorAnimationUsingKeyFrames_Fill.xaml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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">->StateOff</Button> | ||
<Button Click="GoToState" x:Name="btn2" Tag="StateCool" Background="Transparent">->StateCool</Button> | ||
<Button Click="GoToState" x:Name="btn3" Tag="StateGray" Background="Transparent">->StateGray</Button> | ||
<Button Click="GoToState" x:Name="btn4" Tag="StateStrobe" Background="Transparent">->StateStrobe</Button> | ||
<Button Click="GoToState" x:Name="btn6" Tag="StateXmas" Background="Transparent">->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
26
.../UITests.Shared/Windows_UI_Xaml_Media_Animation/ColorAnimationUsingKeyFrames_Fill.xaml.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
89
src/Uno.UI.Wasm/ts/Windows/UI/Xaml/Animation/RenderingLoopFloatAnimator.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.