feat: 1. Ease and playback to avoid jumping color.
2. Temporarily use SemiGray color.
This commit is contained in:
@@ -10,47 +10,47 @@
|
|||||||
<ControlTheme x:Key="{x:Type u:Skeleton}" TargetType="u:Skeleton">
|
<ControlTheme x:Key="{x:Type u:Skeleton}" TargetType="u:Skeleton">
|
||||||
<Setter Property="Background" Value="Transparent" />
|
<Setter Property="Background" Value="Transparent" />
|
||||||
<Setter Property="Template">
|
<Setter Property="Template">
|
||||||
<Setter.Value>
|
<ControlTemplate TargetType="u:Skeleton">
|
||||||
<ControlTemplate TargetType="u:Skeleton">
|
<Border
|
||||||
<Border
|
Background="{TemplateBinding Background}"
|
||||||
Background="{TemplateBinding Background}"
|
BorderBrush="{TemplateBinding BorderBrush}"
|
||||||
BorderBrush="{TemplateBinding BorderBrush}"
|
BorderThickness="{TemplateBinding BorderThickness}"
|
||||||
BorderThickness="{TemplateBinding BorderThickness}"
|
ClipToBounds="{TemplateBinding ClipToBounds}"
|
||||||
ClipToBounds="{TemplateBinding ClipToBounds}"
|
CornerRadius="{TemplateBinding CornerRadius}">
|
||||||
CornerRadius="{TemplateBinding CornerRadius}">
|
<Panel>
|
||||||
<Grid>
|
<ContentPresenter
|
||||||
<ContentPresenter
|
x:Name="PART_ContentPresenter"
|
||||||
x:Name="PART_ContentPresenter"
|
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
|
||||||
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
|
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
|
||||||
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
|
Content="{TemplateBinding Content}"
|
||||||
Content="{TemplateBinding Content}"
|
ContentTemplate="{TemplateBinding ContentTemplate}" />
|
||||||
ContentTemplate="{TemplateBinding ContentTemplate}" />
|
<Border
|
||||||
<Border
|
x:Name="PART_Border"
|
||||||
x:Name="PART_Border"
|
IsHitTestVisible="{TemplateBinding IsActive}"
|
||||||
IsHitTestVisible="{TemplateBinding IsActive}"
|
IsVisible="{TemplateBinding IsActive}">
|
||||||
IsVisible="{TemplateBinding IsActive}">
|
<Border.Styles>
|
||||||
<Border.Styles>
|
<Style Selector="Border">
|
||||||
<Style Selector="Border">
|
<Style.Animations>
|
||||||
<Style.Animations>
|
<Animation
|
||||||
<Animation
|
FillMode="Both"
|
||||||
FillMode="None"
|
IterationCount="Infinite"
|
||||||
IterationCount="Infinite"
|
Easing="CubicEaseInOut"
|
||||||
Duration="0:0:1.4">
|
PlaybackDirection="Alternate"
|
||||||
<KeyFrame Cue="0%">
|
Duration="0:0:1.4">
|
||||||
<Setter Property="Background" Value="{DynamicResource SkeletonStartAnimationBackground}" />
|
<KeyFrame Cue="0%">
|
||||||
</KeyFrame>
|
<Setter Property="Background" Value="{DynamicResource SkeletonStartAnimationBackground}" />
|
||||||
<KeyFrame Cue="100%">
|
</KeyFrame>
|
||||||
<Setter Property="Background" Value="{DynamicResource SkeletonEndAnimationBackground}" />
|
<KeyFrame Cue="100%">
|
||||||
</KeyFrame>
|
<Setter Property="Background" Value="{DynamicResource SkeletonEndAnimationBackground}" />
|
||||||
</Animation>
|
</KeyFrame>
|
||||||
</Style.Animations>
|
</Animation>
|
||||||
</Style>
|
</Style.Animations>
|
||||||
</Border.Styles>
|
</Style>
|
||||||
</Border>
|
</Border.Styles>
|
||||||
</Grid>
|
</Border>
|
||||||
</Border>
|
</Panel>
|
||||||
</ControlTemplate>
|
</Border>
|
||||||
</Setter.Value>
|
</ControlTemplate>
|
||||||
</Setter>
|
</Setter>
|
||||||
</ControlTheme>
|
</ControlTheme>
|
||||||
<!-- Add Styles Here -->
|
<!-- Add Styles Here -->
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
||||||
<LinearGradientBrush x:Key="SkeletonStartAnimationBackground" StartPoint="0%,100%" EndPoint="100%,100%">
|
<LinearGradientBrush x:Key="SkeletonStartAnimationBackground" StartPoint="0%,100%" EndPoint="100%,100%">
|
||||||
<GradientStop Offset="0" Color="#EAEBEB" />
|
<GradientStop Offset="0" Color="#FF1C1F23" />
|
||||||
<GradientStop Offset="0" Color="#E2E3E4" />
|
<GradientStop Offset="0" Color="#FF2E3238" />
|
||||||
<GradientStop Offset="1" Color="#EAEBEB" />
|
<GradientStop Offset="1" Color="#FF1C1F23" />
|
||||||
</LinearGradientBrush>
|
</LinearGradientBrush>
|
||||||
<LinearGradientBrush x:Key="SkeletonEndAnimationBackground" StartPoint="0%,100%" EndPoint="100%,100%">
|
<LinearGradientBrush x:Key="SkeletonEndAnimationBackground" StartPoint="0%,100%" EndPoint="100%,100%">
|
||||||
<GradientStop Offset="0" Color="#EAEBEB" />
|
<GradientStop Offset="0" Color="#FF1C1F23" />
|
||||||
<GradientStop Offset="1" Color="#E2E3E4" />
|
<GradientStop Offset="1" Color="#FF2E3238" />
|
||||||
<GradientStop Offset="1" Color="#EAEBEB" />
|
<GradientStop Offset="1" Color="#FF1C1F23" />
|
||||||
</LinearGradientBrush>
|
</LinearGradientBrush>
|
||||||
<!-- Add Resources Here -->
|
<!-- Add Resources Here -->
|
||||||
</ResourceDictionary>
|
</ResourceDictionary>
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
||||||
<LinearGradientBrush x:Key="SkeletonStartAnimationBackground" StartPoint="0%,100%" EndPoint="100%,100%">
|
<LinearGradientBrush x:Key="SkeletonStartAnimationBackground" StartPoint="0%,100%" EndPoint="100%,100%">
|
||||||
<GradientStop Offset="0" Color="#EAEBEB" />
|
<GradientStop Offset="0" Color="#FFF9F9F9" />
|
||||||
<GradientStop Offset="0" Color="#E2E3E4" />
|
<GradientStop Offset="0" Color="#FFE6E8EA" />
|
||||||
<GradientStop Offset="1" Color="#EAEBEB" />
|
<GradientStop Offset="1" Color="#FFF9F9F9" />
|
||||||
</LinearGradientBrush>
|
</LinearGradientBrush>
|
||||||
<LinearGradientBrush x:Key="SkeletonEndAnimationBackground" StartPoint="0%,100%" EndPoint="100%,100%">
|
<LinearGradientBrush x:Key="SkeletonEndAnimationBackground" StartPoint="0%,100%" EndPoint="100%,100%">
|
||||||
<GradientStop Offset="0" Color="#EAEBEB" />
|
<GradientStop Offset="0" Color="#FFF9F9F9" />
|
||||||
<GradientStop Offset="1" Color="#E2E3E4" />
|
<GradientStop Offset="1" Color="#FFE6E8EA" />
|
||||||
<GradientStop Offset="1" Color="#EAEBEB" />
|
<GradientStop Offset="1" Color="#FFF9F9F9" />
|
||||||
</LinearGradientBrush>
|
</LinearGradientBrush>
|
||||||
<!-- Add Resources Here -->
|
<!-- Add Resources Here -->
|
||||||
</ResourceDictionary>
|
</ResourceDictionary>
|
||||||
|
|||||||
Reference in New Issue
Block a user