feat: add ScaleY animation.

This commit is contained in:
Zhang Dian
2024-09-12 16:11:21 +08:00
parent c724a71aeb
commit 4258e4bbea
2 changed files with 199 additions and 135 deletions

View File

@@ -98,25 +98,41 @@
</ControlTemplate>
</Setter>
<ControlTheme.Animations>
<Animation
Easing="QuadraticEaseIn"
FillMode="Forward"
Duration="0:0:0.3">
<KeyFrame Cue="0%">
<Setter Property="Opacity" Value="0" />
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="Opacity" Value="1" />
</KeyFrame>
<KeyFrame KeySpline="0.22,0.57,0.02,1.2" Cue="0%">
<Setter Property="TranslateTransform.Y" Value="-100" />
</KeyFrame>
<KeyFrame KeySpline="0.22,0.57,0.02,1.2" Cue="100%">
<Setter Property="TranslateTransform.Y" Value="0" />
</KeyFrame>
</Animation>
</ControlTheme.Animations>
<Style Selector="^ /template/ LayoutTransformControl#PART_LayoutTransformControl">
<Style.Animations>
<Animation
Easing="QuadraticEaseIn"
FillMode="Forward"
Duration="0:0:0.3">
<KeyFrame Cue="0%">
<Setter Property="Opacity" Value="0" />
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="Opacity" Value="1" />
</KeyFrame>
<KeyFrame KeySpline="0.22,0.57,0.02,1.2" Cue="0%">
<Setter Property="TranslateTransform.Y" Value="-100" />
</KeyFrame>
<KeyFrame KeySpline="0.22,0.57,0.02,1.2" Cue="100%">
<Setter Property="TranslateTransform.Y" Value="0" />
</KeyFrame>
</Animation>
<Animation
Easing="QuadraticEaseIn"
FillMode="Forward"
Duration="0:0:0.15">
<KeyFrame Cue="0%">
<Setter Property="ScaleTransform.ScaleY" Value="0" />
</KeyFrame>
<KeyFrame Cue="70%">
<Setter Property="ScaleTransform.ScaleY" Value="0" />
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="ScaleTransform.ScaleY" Value="1" />
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="^[IsClosing=true] /template/ LayoutTransformControl#PART_LayoutTransformControl">
<Style.Animations>
@@ -137,6 +153,20 @@
<Setter Property="TranslateTransform.Y" Value="-100" />
</KeyFrame>
</Animation>
<Animation
Easing="QuadraticEaseOut"
FillMode="Forward"
Duration="0:0:0.15">
<KeyFrame Cue="0%">
<Setter Property="ScaleTransform.ScaleY" Value="1" />
</KeyFrame>
<KeyFrame Cue="70%">
<Setter Property="ScaleTransform.ScaleY" Value="1" />
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="ScaleTransform.ScaleY" Value="0" />
</KeyFrame>
</Animation>
</Style.Animations>
</Style>