Skip to content

Instantly share code, notes, and snippets.

@maxkatz6
Last active February 3, 2023 16:06
Show Gist options
  • Save maxkatz6/631e13e4b06f546f262c8538fd824449 to your computer and use it in GitHub Desktop.
Save maxkatz6/631e13e4b06f546f262c8538fd824449 to your computer and use it in GitHub Desktop.
<UserControl
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="clr-namespace:Avalonia.Xaml.Interactivity;assembly=Avalonia.Xaml.Interactivity"
xmlns:ia="clr-namespace:Avalonia.Xaml.Interactions.Core;assembly=Avalonia.Xaml.Interactions"
MaxWidth="600">
<UserControl.Styles>
<Styles>
<Style Selector="Border.animated">
<Style.Animations>
<Animation Duration="0:0:3"
IterationCount="Infinite"
PlaybackDirection="Normal">
<KeyFrame Cue="0%">
<Setter Property="OpacityMask">
<ConicGradientBrush Center="50%,50%" Angle="-70">
<GradientStop Offset="0" Color="Black"/>
<GradientStop Offset="0.001" Color="Transparent"/>
<GradientStop Offset="1" Color="Transparent"/>
</ConicGradientBrush>
</Setter>
<Setter Property="Opacity" Value="1" /> <!-- hack as OpacityMask doesn't invalidate visual -->
</KeyFrame>
<KeyFrame Cue="90%">
<Setter Property="OpacityMask">
<ConicGradientBrush Center="50%,50%" Angle="-70">
<GradientStop Offset="0" Color="Black"/>
<GradientStop Offset="1" Color="Transparent"/>
</ConicGradientBrush>
</Setter>
<Setter Property="Opacity" Value="0.9998" /> <!-- hack as OpacityMask doesn't invalidate visual -->
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="OpacityMask">
<ConicGradientBrush Center="50%,50%" Angle="-70">
<GradientStop Offset="0" Color="Black"/>
<GradientStop Offset="0.999" Color="Black"/>
<GradientStop Offset="1" Color="Transparent"/>
</ConicGradientBrush>
</Setter>
<Setter Property="Opacity" Value="0.9999" /> <!-- hack as OpacityMask doesn't invalidate visual -->
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
</Styles>
</UserControl.Styles>
<Grid>
<Border Classes="animated" BorderThickness="3" BorderBrush="Blue" Width="100" Height="40" CornerRadius="5">
</Border>
</Grid>
</UserControl>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment