Skip to content

Commit

Permalink
fix: [iOS/Android][macOS][CheckBox][Ripple Effect] Ripple Effect does…
Browse files Browse the repository at this point in the history 
… not display correctly if checkbox is tapped multiple times in quick succession #219
  • Loading branch information
@MaximeDion-Work
MaximeDion-Work committed Jul 27, 2020
1 parent a766bc2 commit 6fc8665
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 184 deletions.
130 changes: 19 additions & 111 deletions src/library/Uno.Material/Styles/Controls/CheckBox.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,27 +161,13 @@
<VisualTransition From="UncheckedNormal"
To="UncheckedPressed">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="PressRingTransform"
Storyboard.TargetProperty="ScaleX"
Duration="0:0:0.4"
EasingFunction="{StaticResource Material_EaseInOutFunction}"
From="0"
To="1" />

<DoubleAnimation Storyboard.TargetName="PressRingTransform"
Storyboard.TargetProperty="ScaleY"
Duration="0:0:0.4"
EasingFunction="{StaticResource Material_EaseInOutFunction}"
From="0"
To="1" />

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Opacity)"
Storyboard.TargetName="PressRing">
<EasingDoubleKeyFrame KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.1"
Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:0.2"
Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:0.4"
<EasingDoubleKeyFrame KeyTime="0:0:0.25"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
Expand All @@ -190,27 +176,13 @@
<VisualTransition From="UncheckedPointerOver"
To="UncheckedPressed">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="PressRingTransform"
Storyboard.TargetProperty="ScaleX"
Duration="0:0:0.4"
EasingFunction="{StaticResource Material_EaseInOutFunction}"
From="0"
To="1" />

<DoubleAnimation Storyboard.TargetName="PressRingTransform"
Storyboard.TargetProperty="ScaleY"
Duration="0:0:0.4"
EasingFunction="{StaticResource Material_EaseInOutFunction}"
From="0"
To="1" />

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Opacity)"
Storyboard.TargetName="PressRing">
<EasingDoubleKeyFrame KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.1"
Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:0.2"
Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:0.4"
<EasingDoubleKeyFrame KeyTime="0:0:0.25"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
Expand All @@ -219,27 +191,13 @@
<VisualTransition From="CheckedNormal"
To="CheckedPressed">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="PressRingTransform"
Storyboard.TargetProperty="ScaleX"
Duration="0:0:0.4"
EasingFunction="{StaticResource Material_EaseInOutFunction}"
From="0"
To="1" />

<DoubleAnimation Storyboard.TargetName="PressRingTransform"
Storyboard.TargetProperty="ScaleY"
Duration="0:0:0.4"
EasingFunction="{StaticResource Material_EaseInOutFunction}"
From="0"
To="1" />

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Opacity)"
Storyboard.TargetName="PressRing">
<EasingDoubleKeyFrame KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.1"
Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:0.2"
Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:0.4"
<EasingDoubleKeyFrame KeyTime="0:0:0.25"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
Expand All @@ -248,27 +206,13 @@
<VisualTransition From="CheckedPointerOver"
To="CheckedPressed">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="PressRingTransform"
Storyboard.TargetProperty="ScaleX"
Duration="0:0:0.4"
EasingFunction="{StaticResource Material_EaseInOutFunction}"
From="0"
To="1" />

<DoubleAnimation Storyboard.TargetName="PressRingTransform"
Storyboard.TargetProperty="ScaleY"
Duration="0:0:0.4"
EasingFunction="{StaticResource Material_EaseInOutFunction}"
From="0"
To="1" />

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Opacity)"
Storyboard.TargetName="PressRing">
<EasingDoubleKeyFrame KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.1"
Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:0.2"
Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:0.4"
<EasingDoubleKeyFrame KeyTime="0:0:0.25"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
Expand All @@ -278,27 +222,13 @@
To="IndeterminatePressed">

<Storyboard>
<DoubleAnimation Storyboard.TargetName="PressRingTransform"
Storyboard.TargetProperty="ScaleX"
Duration="0:0:0.4"
EasingFunction="{StaticResource Material_EaseInOutFunction}"
From="0"
To="1" />

<DoubleAnimation Storyboard.TargetName="PressRingTransform"
Storyboard.TargetProperty="ScaleY"
Duration="0:0:0.4"
EasingFunction="{StaticResource Material_EaseInOutFunction}"
From="0"
To="1" />

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Opacity)"
Storyboard.TargetName="PressRing">
<EasingDoubleKeyFrame KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.1"
Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:0.2"
Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:0.4"
<EasingDoubleKeyFrame KeyTime="0:0:0.25"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
Expand All @@ -308,27 +238,13 @@
To="IndeterminatePressed">

<Storyboard>
<DoubleAnimation Storyboard.TargetName="PressRingTransform"
Storyboard.TargetProperty="ScaleX"
Duration="0:0:0.4"
EasingFunction="{StaticResource Material_EaseInOutFunction}"
From="0"
To="1" />

<DoubleAnimation Storyboard.TargetName="PressRingTransform"
Storyboard.TargetProperty="ScaleY"
Duration="0:0:0.4"
EasingFunction="{StaticResource Material_EaseInOutFunction}"
From="0"
To="1" />

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Opacity)"
Storyboard.TargetName="PressRing">
<EasingDoubleKeyFrame KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.1"
Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:0.2"
Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:0.4"
<EasingDoubleKeyFrame KeyTime="0:0:0.25"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
Expand Down Expand Up @@ -378,15 +294,7 @@
Height="{StaticResource FocusAreaSize}"
Fill="{StaticResource MaterialOnSurfaceDisabledBrush}"
IsHitTestVisible="False"
Opacity="0">
<Ellipse.RenderTransform>
<CompositeTransform x:Name="PressRingTransform"
ScaleX="0"
ScaleY="0"
CenterX="20"
CenterY="20" />
</Ellipse.RenderTransform>
</Ellipse>
Opacity="0" />

<Grid x:Name="CheckBoxContainer"
Height="{StaticResource CheckAreaSize}"
Expand Down
111 changes: 38 additions & 73 deletions src/library/Uno.Material/Styles/Controls/RadioButton.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,77 +64,50 @@
</VisualState.Setters>
</VisualState>


<VisualStateGroup.Transitions>
<VisualTransition From="Normal"
To="Pressed">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="PressRingTransform"
Storyboard.TargetProperty="ScaleX"
Duration="0:0:0.4"
EasingFunction="{StaticResource Material_EaseInOutFunction}"
From="0"
To="1" />

<DoubleAnimation Storyboard.TargetName="PressRingTransform"
Storyboard.TargetProperty="ScaleY"
Duration="0:0:0.4"
EasingFunction="{StaticResource Material_EaseInOutFunction}"
From="0"
To="1" />

<android:DoubleAnimation Storyboard.TargetName="PressRing"
Storyboard.TargetProperty="Opacity"
Duration="0:0:0.5"
EasingFunction="{StaticResource Material_EaseInOutFunction}"
From="1"
To="0" />

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="PressRing">
<EasingDoubleKeyFrame KeyTime="0"
Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:0.2"
Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:0.4"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<android:DoubleAnimation Storyboard.TargetName="PressRing"
Storyboard.TargetProperty="Opacity"
Duration="0:0:0.25"
EasingFunction="{StaticResource Material_EaseInOutFunction}"
From="1"
To="0" />

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="PressRing">
<EasingDoubleKeyFrame KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.1"
Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:0.25"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition From="PointerOver"
To="Pressed">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="PressRingTransform"
Storyboard.TargetProperty="ScaleX"
Duration="0:0:0.4"
EasingFunction="{StaticResource Material_EaseInOutFunction}"
From="0"
To="1" />

<DoubleAnimation Storyboard.TargetName="PressRingTransform"
Storyboard.TargetProperty="ScaleY"
Duration="0:0:0.4"
EasingFunction="{StaticResource Material_EaseInOutFunction}"
From="0"
To="1" />

<android:DoubleAnimation Storyboard.TargetName="PressRing"
Storyboard.TargetProperty="Opacity"
Duration="0:0:0.5"
EasingFunction="{StaticResource Material_EaseInOutFunction}"
From="1"
To="0" />

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="PressRing">
<EasingDoubleKeyFrame KeyTime="0"
Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:0.2"
Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:0.4"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<android:DoubleAnimation Storyboard.TargetName="PressRing"
Storyboard.TargetProperty="Opacity"
Duration="0:0:0.25"
EasingFunction="{StaticResource Material_EaseInOutFunction}"
From="1"
To="0" />

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="PressRing">
<EasingDoubleKeyFrame KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.1"
Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:0.25"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
</VisualStateGroup>
Expand Down Expand Up @@ -181,7 +154,7 @@
<ColumnDefinition Width="{StaticResource RadioCheckAreaLength}" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<Ellipse x:Name="FocusRing"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Expand All @@ -201,15 +174,7 @@
Height="{StaticResource FocusAreaSize}"
Fill="{StaticResource MaterialOnSurfaceDisabledBrush}"
IsHitTestVisible="False"
Opacity="0">
<Ellipse.RenderTransform>
<CompositeTransform x:Name="PressRingTransform"
ScaleX="0"
ScaleY="0"
CenterX="20"
CenterY="20" />
</Ellipse.RenderTransform>
</Ellipse>
Opacity="0" />

<Grid Height="{StaticResource RadioCheckAreaSize}"
Width="{StaticResource RadioCheckAreaSize}">
Expand All @@ -221,7 +186,7 @@
UseLayoutRounding="False"
Stroke="{TemplateBinding Background}"
StrokeThickness="{StaticResource RadioBorderThickness}"
Opacity="0"/>
Opacity="0" />

<Ellipse x:Name="OuterEllipse_Unchecked"
HorizontalAlignment="Stretch"
Expand Down Expand Up @@ -267,5 +232,5 @@
<Setter Property="BorderBrush"
Value="{StaticResource SelectControlStrokeColor}" />
</Style>

</ResourceDictionary>

0 comments on commit 6fc8665

Please sign in to comment.