|
16 | 16 | <RowDefinition Height="*" /> |
17 | 17 | </Grid.RowDefinitions> |
18 | 18 |
|
19 | | - <!-- Drifting-blob storyboards (started in code-behind on Loaded). The |
20 | | - soft radial blobs fading to transparent approximate the web's |
21 | | - blur(60px); CompositeTransform translate/scale are composition-thread |
22 | | - animations, so no EnableDependentAnimation needed. --> |
23 | 19 | <Grid.Resources> |
24 | | - <!-- Soft cyan ring (transparent core, glowing mid-radius, fading edge) |
25 | | - used by every ripple pulse; shared since only each Ellipse's |
26 | | - Opacity/scale is animated, never the brush itself. --> |
27 | | - <RadialGradientBrush x:Key="RippleRingBrush"> |
28 | | - <GradientStop Color="#006EC9E2" Offset="0.0" /> |
29 | | - <GradientStop Color="#006EC9E2" Offset="0.42" /> |
30 | | - <GradientStop Color="#806EC9E2" Offset="0.60" /> |
31 | | - <GradientStop Color="#006EC9E2" Offset="0.80" /> |
32 | | - </RadialGradientBrush> |
33 | | - |
34 | | - <Storyboard x:Key="DriftA" RepeatBehavior="Forever" AutoReverse="True"> |
35 | | - <DoubleAnimation Storyboard.TargetName="LayerATransform" Storyboard.TargetProperty="TranslateX" |
36 | | - From="-70" To="30" Duration="0:0:14"> |
37 | | - <DoubleAnimation.EasingFunction><SineEase EasingMode="EaseInOut" /></DoubleAnimation.EasingFunction> |
38 | | - </DoubleAnimation> |
39 | | - <DoubleAnimation Storyboard.TargetName="LayerATransform" Storyboard.TargetProperty="TranslateY" |
40 | | - From="-40" To="40" Duration="0:0:14"> |
41 | | - <DoubleAnimation.EasingFunction><SineEase EasingMode="EaseInOut" /></DoubleAnimation.EasingFunction> |
42 | | - </DoubleAnimation> |
43 | | - <DoubleAnimation Storyboard.TargetName="LayerATransform" Storyboard.TargetProperty="ScaleX" |
44 | | - From="1" To="1.12" Duration="0:0:14" /> |
45 | | - <DoubleAnimation Storyboard.TargetName="LayerATransform" Storyboard.TargetProperty="ScaleY" |
46 | | - From="1" To="1.12" Duration="0:0:14" /> |
47 | | - </Storyboard> |
48 | | - <Storyboard x:Key="DriftB" RepeatBehavior="Forever" AutoReverse="True"> |
49 | | - <DoubleAnimation Storyboard.TargetName="LayerBTransform" Storyboard.TargetProperty="TranslateX" |
50 | | - From="80" To="-20" Duration="0:0:18"> |
51 | | - <DoubleAnimation.EasingFunction><SineEase EasingMode="EaseInOut" /></DoubleAnimation.EasingFunction> |
52 | | - </DoubleAnimation> |
53 | | - <DoubleAnimation Storyboard.TargetName="LayerBTransform" Storyboard.TargetProperty="TranslateY" |
54 | | - From="50" To="-30" Duration="0:0:18"> |
55 | | - <DoubleAnimation.EasingFunction><SineEase EasingMode="EaseInOut" /></DoubleAnimation.EasingFunction> |
56 | | - </DoubleAnimation> |
57 | | - <DoubleAnimation Storyboard.TargetName="LayerBTransform" Storyboard.TargetProperty="ScaleX" |
58 | | - From="1" To="1.18" Duration="0:0:18" /> |
59 | | - <DoubleAnimation Storyboard.TargetName="LayerBTransform" Storyboard.TargetProperty="ScaleY" |
60 | | - From="1" To="1.18" Duration="0:0:18" /> |
61 | | - </Storyboard> |
62 | | - <Storyboard x:Key="DriftC" RepeatBehavior="Forever" AutoReverse="True"> |
63 | | - <DoubleAnimation Storyboard.TargetName="LayerCTransform" Storyboard.TargetProperty="TranslateY" |
64 | | - From="120" To="-40" Duration="0:0:11"> |
65 | | - <DoubleAnimation.EasingFunction><SineEase EasingMode="EaseInOut" /></DoubleAnimation.EasingFunction> |
66 | | - </DoubleAnimation> |
67 | | - <DoubleAnimation Storyboard.TargetName="LayerCTransform" Storyboard.TargetProperty="ScaleX" |
68 | | - From="1" To="1.22" Duration="0:0:11" /> |
69 | | - <DoubleAnimation Storyboard.TargetName="LayerCTransform" Storyboard.TargetProperty="ScaleY" |
70 | | - From="1" To="1.22" Duration="0:0:11" /> |
71 | | - </Storyboard> |
| 20 | + <!-- Slow rotation for the play button's dashed outer ring. --> |
72 | 21 | <Storyboard x:Key="RingSpin" RepeatBehavior="Forever"> |
73 | 22 | <DoubleAnimation Storyboard.TargetName="OuterRingRotation" Storyboard.TargetProperty="Angle" |
74 | 23 | From="0" To="360" Duration="0:1:0" /> |
75 | 24 | </Storyboard> |
76 | | - |
77 | | - <!-- Water-ripple pulses: each phase expands a soft ring out of the |
78 | | - left + right glow blobs while fading it, on a 6s loop. The three |
79 | | - phases are seeked to 0/2/4s in code-behind so a fresh ripple |
80 | | - emanates every 2s. Scale/Opacity are composition-thread, so no |
81 | | - EnableDependentAnimation is needed. --> |
82 | | - <Storyboard x:Key="RippleP1" RepeatBehavior="Forever"> |
83 | | - <DoubleAnimation Storyboard.TargetName="RippleL1T" Storyboard.TargetProperty="ScaleX" From="0.25" To="1.5" Duration="0:0:18" /> |
84 | | - <DoubleAnimation Storyboard.TargetName="RippleL1T" Storyboard.TargetProperty="ScaleY" From="0.25" To="1.5" Duration="0:0:18" /> |
85 | | - <DoubleAnimation Storyboard.TargetName="RippleL1" Storyboard.TargetProperty="Opacity" From="0.55" To="0" Duration="0:0:18" /> |
86 | | - <DoubleAnimation Storyboard.TargetName="RippleR1T" Storyboard.TargetProperty="ScaleX" From="0.25" To="1.5" Duration="0:0:18" /> |
87 | | - <DoubleAnimation Storyboard.TargetName="RippleR1T" Storyboard.TargetProperty="ScaleY" From="0.25" To="1.5" Duration="0:0:18" /> |
88 | | - <DoubleAnimation Storyboard.TargetName="RippleR1" Storyboard.TargetProperty="Opacity" From="0.55" To="0" Duration="0:0:18" /> |
89 | | - </Storyboard> |
90 | | - <Storyboard x:Key="RippleP2" RepeatBehavior="Forever"> |
91 | | - <DoubleAnimation Storyboard.TargetName="RippleL2T" Storyboard.TargetProperty="ScaleX" From="0.25" To="1.5" Duration="0:0:18" /> |
92 | | - <DoubleAnimation Storyboard.TargetName="RippleL2T" Storyboard.TargetProperty="ScaleY" From="0.25" To="1.5" Duration="0:0:18" /> |
93 | | - <DoubleAnimation Storyboard.TargetName="RippleL2" Storyboard.TargetProperty="Opacity" From="0.55" To="0" Duration="0:0:18" /> |
94 | | - <DoubleAnimation Storyboard.TargetName="RippleR2T" Storyboard.TargetProperty="ScaleX" From="0.25" To="1.5" Duration="0:0:18" /> |
95 | | - <DoubleAnimation Storyboard.TargetName="RippleR2T" Storyboard.TargetProperty="ScaleY" From="0.25" To="1.5" Duration="0:0:18" /> |
96 | | - <DoubleAnimation Storyboard.TargetName="RippleR2" Storyboard.TargetProperty="Opacity" From="0.55" To="0" Duration="0:0:18" /> |
97 | | - </Storyboard> |
98 | | - <Storyboard x:Key="RippleP3" RepeatBehavior="Forever"> |
99 | | - <DoubleAnimation Storyboard.TargetName="RippleL3T" Storyboard.TargetProperty="ScaleX" From="0.25" To="1.5" Duration="0:0:18" /> |
100 | | - <DoubleAnimation Storyboard.TargetName="RippleL3T" Storyboard.TargetProperty="ScaleY" From="0.25" To="1.5" Duration="0:0:18" /> |
101 | | - <DoubleAnimation Storyboard.TargetName="RippleL3" Storyboard.TargetProperty="Opacity" From="0.55" To="0" Duration="0:0:18" /> |
102 | | - <DoubleAnimation Storyboard.TargetName="RippleR3T" Storyboard.TargetProperty="ScaleX" From="0.25" To="1.5" Duration="0:0:18" /> |
103 | | - <DoubleAnimation Storyboard.TargetName="RippleR3T" Storyboard.TargetProperty="ScaleY" From="0.25" To="1.5" Duration="0:0:18" /> |
104 | | - <DoubleAnimation Storyboard.TargetName="RippleR3" Storyboard.TargetProperty="Opacity" From="0.55" To="0" Duration="0:0:18" /> |
105 | | - </Storyboard> |
106 | 25 | </Grid.Resources> |
107 | 26 |
|
108 | | - <!-- ============================================ animated waterfall backdrop --> |
| 27 | + <!-- ============================================ static waterfall backdrop --> |
109 | 28 | <Grid x:Name="BackdropRoot" Grid.RowSpan="2" Opacity="0.55" IsHitTestVisible="False"> |
110 | 29 | <!-- Cyan top-glow wash (web: radial-gradient ellipse at 50% 0%). --> |
111 | 30 | <Rectangle> |
|
119 | 38 | <!-- Layer A: deep teal tint. --> |
120 | 39 | <Ellipse x:Name="BackdropLayerA" Width="640" Height="640" |
121 | 40 | HorizontalAlignment="Left" VerticalAlignment="Top" |
122 | | - Margin="-120,-120,0,0" RenderTransformOrigin="0.5,0.5"> |
123 | | - <Ellipse.RenderTransform><CompositeTransform x:Name="LayerATransform" /></Ellipse.RenderTransform> |
| 41 | + Margin="-120,-120,0,0"> |
124 | 42 | <Ellipse.Fill> |
125 | 43 | <RadialGradientBrush> |
126 | 44 | <GradientStop Color="#FF0B3A4B" Offset="0" /> |
|
131 | 49 | <!-- Layer B: accent cyan. --> |
132 | 50 | <Ellipse x:Name="BackdropLayerB" Width="560" Height="560" |
133 | 51 | HorizontalAlignment="Right" VerticalAlignment="Center" |
134 | | - Margin="0,0,-100,0" RenderTransformOrigin="0.5,0.5"> |
135 | | - <Ellipse.RenderTransform><CompositeTransform x:Name="LayerBTransform" /></Ellipse.RenderTransform> |
| 52 | + Margin="0,0,-100,0"> |
136 | 53 | <Ellipse.Fill> |
137 | 54 | <RadialGradientBrush> |
138 | 55 | <GradientStop Color="#596EC9E2" Offset="0" /> |
139 | 56 | <GradientStop Color="#006EC9E2" Offset="0.7" /> |
140 | 57 | </RadialGradientBrush> |
141 | 58 | </Ellipse.Fill> |
142 | 59 | </Ellipse> |
143 | | - <!-- Layer C: pale highlight (drifts up from the bottom). --> |
| 60 | + <!-- Layer C: pale highlight. --> |
144 | 61 | <Ellipse x:Name="BackdropLayerC" Width="520" Height="520" |
145 | 62 | HorizontalAlignment="Center" VerticalAlignment="Bottom" |
146 | | - Margin="0,0,0,-120" RenderTransformOrigin="0.5,0.5"> |
147 | | - <Ellipse.RenderTransform><CompositeTransform x:Name="LayerCTransform" /></Ellipse.RenderTransform> |
| 63 | + Margin="0,0,0,-120"> |
148 | 64 | <Ellipse.Fill> |
149 | 65 | <RadialGradientBrush> |
150 | 66 | <GradientStop Color="#2EB4EAF8" Offset="0" /> |
151 | 67 | <GradientStop Color="#00B4EAF8" Offset="0.7" /> |
152 | 68 | </RadialGradientBrush> |
153 | 69 | </Ellipse.Fill> |
154 | 70 | </Ellipse> |
155 | | - |
156 | | - <!-- Ripple pulses emanating from the left + right glow blobs. Three |
157 | | - phase-staggered rings per side (driven by RippleP1/2/3). --> |
158 | | - <Ellipse x:Name="RippleL1" Width="380" Height="380" Opacity="0" IsHitTestVisible="False" |
159 | | - HorizontalAlignment="Left" VerticalAlignment="Center" Margin="-60,0,0,0" |
160 | | - RenderTransformOrigin="0.5,0.5" Fill="{StaticResource RippleRingBrush}"> |
161 | | - <Ellipse.RenderTransform><CompositeTransform x:Name="RippleL1T" ScaleX="0.25" ScaleY="0.25" /></Ellipse.RenderTransform> |
162 | | - </Ellipse> |
163 | | - <Ellipse x:Name="RippleL2" Width="380" Height="380" Opacity="0" IsHitTestVisible="False" |
164 | | - HorizontalAlignment="Left" VerticalAlignment="Center" Margin="-60,0,0,0" |
165 | | - RenderTransformOrigin="0.5,0.5" Fill="{StaticResource RippleRingBrush}"> |
166 | | - <Ellipse.RenderTransform><CompositeTransform x:Name="RippleL2T" ScaleX="0.25" ScaleY="0.25" /></Ellipse.RenderTransform> |
167 | | - </Ellipse> |
168 | | - <Ellipse x:Name="RippleL3" Width="380" Height="380" Opacity="0" IsHitTestVisible="False" |
169 | | - HorizontalAlignment="Left" VerticalAlignment="Center" Margin="-60,0,0,0" |
170 | | - RenderTransformOrigin="0.5,0.5" Fill="{StaticResource RippleRingBrush}"> |
171 | | - <Ellipse.RenderTransform><CompositeTransform x:Name="RippleL3T" ScaleX="0.25" ScaleY="0.25" /></Ellipse.RenderTransform> |
172 | | - </Ellipse> |
173 | | - <Ellipse x:Name="RippleR1" Width="380" Height="380" Opacity="0" IsHitTestVisible="False" |
174 | | - HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,-60,0" |
175 | | - RenderTransformOrigin="0.5,0.5" Fill="{StaticResource RippleRingBrush}"> |
176 | | - <Ellipse.RenderTransform><CompositeTransform x:Name="RippleR1T" ScaleX="0.25" ScaleY="0.25" /></Ellipse.RenderTransform> |
177 | | - </Ellipse> |
178 | | - <Ellipse x:Name="RippleR2" Width="380" Height="380" Opacity="0" IsHitTestVisible="False" |
179 | | - HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,-60,0" |
180 | | - RenderTransformOrigin="0.5,0.5" Fill="{StaticResource RippleRingBrush}"> |
181 | | - <Ellipse.RenderTransform><CompositeTransform x:Name="RippleR2T" ScaleX="0.25" ScaleY="0.25" /></Ellipse.RenderTransform> |
182 | | - </Ellipse> |
183 | | - <Ellipse x:Name="RippleR3" Width="380" Height="380" Opacity="0" IsHitTestVisible="False" |
184 | | - HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,-60,0" |
185 | | - RenderTransformOrigin="0.5,0.5" Fill="{StaticResource RippleRingBrush}"> |
186 | | - <Ellipse.RenderTransform><CompositeTransform x:Name="RippleR3T" ScaleX="0.25" ScaleY="0.25" /></Ellipse.RenderTransform> |
187 | | - </Ellipse> |
188 | 71 | </Grid> |
189 | 72 |
|
190 | 73 | <!-- Extended-titlebar drag region (transparent; SetTitleBar in code-behind). --> |
|
0 commit comments