feat: 1. Ease and playback to avoid jumping color.

2. Temporarily use SemiGray color.
This commit is contained in:
rabbitism
2023-12-27 16:55:42 +08:00
parent 30a303f524
commit 7890071cae
3 changed files with 53 additions and 53 deletions

View File

@@ -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 -->

View File

@@ -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>

View File

@@ -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>