From 7890071caed7ad01a090fcaa7acf1bb89574ff43 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Wed, 27 Dec 2023 16:55:42 +0800
Subject: [PATCH] feat: 1. Ease and playback to avoid jumping color. 2.
 Temporarily use SemiGray color.

---
 src/Ursa.Themes.Semi/Controls/Skeleton.axaml  | 82 +++++++++----------
 .../Themes/Dark/Skeleton.axaml                | 12 +--
 .../Themes/Light/Skeleton.axaml               | 12 +--
 3 files changed, 53 insertions(+), 53 deletions(-)

diff --git a/src/Ursa.Themes.Semi/Controls/Skeleton.axaml b/src/Ursa.Themes.Semi/Controls/Skeleton.axaml
index 0397547..2f78068 100644
--- a/src/Ursa.Themes.Semi/Controls/Skeleton.axaml
+++ b/src/Ursa.Themes.Semi/Controls/Skeleton.axaml
@@ -10,47 +10,47 @@
     <ControlTheme x:Key="{x:Type u:Skeleton}" TargetType="u:Skeleton">
         <Setter Property="Background" Value="Transparent" />
         <Setter Property="Template">
-            <Setter.Value>
-                <ControlTemplate TargetType="u:Skeleton">
-                    <Border
-                        Background="{TemplateBinding Background}"
-                        BorderBrush="{TemplateBinding BorderBrush}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
-                        ClipToBounds="{TemplateBinding ClipToBounds}"
-                        CornerRadius="{TemplateBinding CornerRadius}">
-                        <Grid>
-                            <ContentPresenter
-                                x:Name="PART_ContentPresenter"
-                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                                Content="{TemplateBinding Content}"
-                                ContentTemplate="{TemplateBinding ContentTemplate}" />
-                            <Border
-                                x:Name="PART_Border"
-                                IsHitTestVisible="{TemplateBinding IsActive}"
-                                IsVisible="{TemplateBinding IsActive}">
-                                <Border.Styles>
-                                    <Style Selector="Border">
-                                        <Style.Animations>
-                                            <Animation
-                                                FillMode="None"
-                                                IterationCount="Infinite"
-                                                Duration="0:0:1.4">
-                                                <KeyFrame Cue="0%">
-                                                    <Setter Property="Background" Value="{DynamicResource SkeletonStartAnimationBackground}" />
-                                                </KeyFrame>
-                                                <KeyFrame Cue="100%">
-                                                    <Setter Property="Background" Value="{DynamicResource SkeletonEndAnimationBackground}" />
-                                                </KeyFrame>
-                                            </Animation>
-                                        </Style.Animations>
-                                    </Style>
-                                </Border.Styles>
-                            </Border>
-                        </Grid>
-                    </Border>
-                </ControlTemplate>
-            </Setter.Value>
+            <ControlTemplate TargetType="u:Skeleton">
+                <Border
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    ClipToBounds="{TemplateBinding ClipToBounds}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <Panel>
+                        <ContentPresenter
+                            x:Name="PART_ContentPresenter"
+                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}" />
+                        <Border
+                            x:Name="PART_Border"
+                            IsHitTestVisible="{TemplateBinding IsActive}"
+                            IsVisible="{TemplateBinding IsActive}">
+                            <Border.Styles>
+                                <Style Selector="Border">
+                                    <Style.Animations>
+                                        <Animation
+                                            FillMode="Both"
+                                            IterationCount="Infinite"
+                                            Easing="CubicEaseInOut"
+                                            PlaybackDirection="Alternate"
+                                            Duration="0:0:1.4">
+                                            <KeyFrame Cue="0%">
+                                                <Setter Property="Background" Value="{DynamicResource SkeletonStartAnimationBackground}" />
+                                            </KeyFrame>
+                                            <KeyFrame Cue="100%">
+                                                <Setter Property="Background" Value="{DynamicResource SkeletonEndAnimationBackground}" />
+                                            </KeyFrame>
+                                        </Animation>
+                                    </Style.Animations>
+                                </Style>
+                            </Border.Styles>
+                        </Border>
+                    </Panel>
+                </Border>
+            </ControlTemplate>
         </Setter>
     </ControlTheme>
     <!--  Add Styles Here  -->
diff --git a/src/Ursa.Themes.Semi/Themes/Dark/Skeleton.axaml b/src/Ursa.Themes.Semi/Themes/Dark/Skeleton.axaml
index fb45bc8..24f98fc 100644
--- a/src/Ursa.Themes.Semi/Themes/Dark/Skeleton.axaml
+++ b/src/Ursa.Themes.Semi/Themes/Dark/Skeleton.axaml
@@ -1,13 +1,13 @@
 <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%">
-        <GradientStop Offset="0" Color="#EAEBEB" />
-        <GradientStop Offset="0" Color="#E2E3E4" />
-        <GradientStop Offset="1" Color="#EAEBEB" />
+        <GradientStop Offset="0" Color="#FF1C1F23" />
+        <GradientStop Offset="0" Color="#FF2E3238" />
+        <GradientStop Offset="1" Color="#FF1C1F23" />
     </LinearGradientBrush>
     <LinearGradientBrush x:Key="SkeletonEndAnimationBackground" StartPoint="0%,100%" EndPoint="100%,100%">
-        <GradientStop Offset="0" Color="#EAEBEB" />
-        <GradientStop Offset="1" Color="#E2E3E4" />
-        <GradientStop Offset="1" Color="#EAEBEB" />
+        <GradientStop Offset="0" Color="#FF1C1F23" />
+        <GradientStop Offset="1" Color="#FF2E3238" />
+        <GradientStop Offset="1" Color="#FF1C1F23" />
     </LinearGradientBrush>
     <!--  Add Resources Here  -->
 </ResourceDictionary>
diff --git a/src/Ursa.Themes.Semi/Themes/Light/Skeleton.axaml b/src/Ursa.Themes.Semi/Themes/Light/Skeleton.axaml
index fb45bc8..d51f632 100644
--- a/src/Ursa.Themes.Semi/Themes/Light/Skeleton.axaml
+++ b/src/Ursa.Themes.Semi/Themes/Light/Skeleton.axaml
@@ -1,13 +1,13 @@
 <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%">
-        <GradientStop Offset="0" Color="#EAEBEB" />
-        <GradientStop Offset="0" Color="#E2E3E4" />
-        <GradientStop Offset="1" Color="#EAEBEB" />
+        <GradientStop Offset="0" Color="#FFF9F9F9" />
+        <GradientStop Offset="0" Color="#FFE6E8EA" />
+        <GradientStop Offset="1" Color="#FFF9F9F9" />
     </LinearGradientBrush>
     <LinearGradientBrush x:Key="SkeletonEndAnimationBackground" StartPoint="0%,100%" EndPoint="100%,100%">
-        <GradientStop Offset="0" Color="#EAEBEB" />
-        <GradientStop Offset="1" Color="#E2E3E4" />
-        <GradientStop Offset="1" Color="#EAEBEB" />
+        <GradientStop Offset="0" Color="#FFF9F9F9" />
+        <GradientStop Offset="1" Color="#FFE6E8EA" />
+        <GradientStop Offset="1" Color="#FFF9F9F9" />
     </LinearGradientBrush>
     <!--  Add Resources Here  -->
 </ResourceDictionary>