|
| 1 | +namespace DevWinUI; |
| 2 | + |
| 3 | +[TemplatePart(Name = nameof(PART_Canvas), Type = typeof(CanvasAnimatedControl))] |
| 4 | +public partial class MorphingAnimation : Control |
| 5 | +{ |
| 6 | + private const string PART_Canvas = "PART_Canvas"; |
| 7 | + |
| 8 | + private CanvasAnimatedControl canvas; |
| 9 | + |
| 10 | + private Windows.UI.Color primaryColor = Windows.UI.Color.FromArgb(255, 0x1D, 0xA1, 0xF2); |
| 11 | + private Windows.UI.Color secondaryColor = Windows.UI.Color.FromArgb(255, 0x18, 0x77, 0xF2); |
| 12 | + |
| 13 | + private string primaryData; |
| 14 | + private string secondaryData; |
| 15 | + |
| 16 | + private enum MorphingAnimationPhase { ToSecondary, HoldSecondary, ToPrimary, HoldPrimary } |
| 17 | + |
| 18 | + private double animDuration = 0.5; // seconds – morph travel time |
| 19 | + private double holdDuration = 1.0; // seconds – pause at each end |
| 20 | + |
| 21 | + private List<Vector2> primaryShape; |
| 22 | + private List<Vector2> secondaryShape; |
| 23 | + |
| 24 | + private MorphingAnimationPhase phase = MorphingAnimationPhase.ToSecondary; |
| 25 | + private double phaseTime = 0.0; |
| 26 | + private float progress = 0f; // 0 = Primary, 1 = Secondary |
| 27 | + |
| 28 | + private int pointCount = 300; |
| 29 | + |
| 30 | + public MorphingAnimation() |
| 31 | + { |
| 32 | + DefaultStyleKey = typeof(MorphingAnimation); |
| 33 | + } |
| 34 | + |
| 35 | + protected override void OnApplyTemplate() |
| 36 | + { |
| 37 | + base.OnApplyTemplate(); |
| 38 | + |
| 39 | + canvas = GetTemplateChild(PART_Canvas) as CanvasAnimatedControl; |
| 40 | + |
| 41 | + GetShapesPoint(); |
| 42 | + |
| 43 | + canvas.Draw -= OnDraw; |
| 44 | + canvas.Draw += OnDraw; |
| 45 | + |
| 46 | + canvas.Update -= OnUpdate; |
| 47 | + canvas.Update += OnUpdate; |
| 48 | + } |
| 49 | + |
| 50 | + private void GetShapesPoint() |
| 51 | + { |
| 52 | + primaryShape = SamplePointsOnPath(primaryData, pointCount); |
| 53 | + secondaryShape = SamplePointsOnPath(secondaryData, pointCount); |
| 54 | + } |
| 55 | + |
| 56 | + private void OnUpdate(ICanvasAnimatedControl sender, CanvasAnimatedUpdateEventArgs args) |
| 57 | + { |
| 58 | + double dt = args.Timing.ElapsedTime.TotalSeconds; |
| 59 | + |
| 60 | + phaseTime += dt; |
| 61 | + |
| 62 | + switch (phase) |
| 63 | + { |
| 64 | + case MorphingAnimationPhase.ToSecondary: |
| 65 | + progress = (float)Math.Min(phaseTime / animDuration, 1.0); |
| 66 | + if (phaseTime >= animDuration) |
| 67 | + { |
| 68 | + progress = 1f; |
| 69 | + phaseTime = 0.0; |
| 70 | + phase = MorphingAnimationPhase.HoldSecondary; |
| 71 | + } |
| 72 | + break; |
| 73 | + |
| 74 | + case MorphingAnimationPhase.HoldSecondary: |
| 75 | + if (phaseTime >= holdDuration) |
| 76 | + { |
| 77 | + phaseTime = 0.0; |
| 78 | + phase = MorphingAnimationPhase.ToPrimary; |
| 79 | + } |
| 80 | + break; |
| 81 | + |
| 82 | + case MorphingAnimationPhase.ToPrimary: |
| 83 | + progress = (float)Math.Max(1.0 - phaseTime / animDuration, 0.0); |
| 84 | + if (phaseTime >= animDuration) |
| 85 | + { |
| 86 | + progress = 0f; |
| 87 | + phaseTime = 0.0; |
| 88 | + phase = MorphingAnimationPhase.HoldPrimary; |
| 89 | + } |
| 90 | + break; |
| 91 | + |
| 92 | + case MorphingAnimationPhase.HoldPrimary: |
| 93 | + if (phaseTime >= holdDuration) |
| 94 | + { |
| 95 | + phaseTime = 0.0; |
| 96 | + phase = MorphingAnimationPhase.ToSecondary; |
| 97 | + } |
| 98 | + break; |
| 99 | + } |
| 100 | + } |
| 101 | + |
| 102 | + private void OnDraw(ICanvasAnimatedControl sender, CanvasAnimatedDrawEventArgs args) |
| 103 | + { |
| 104 | + var ds = args.DrawingSession; |
| 105 | + |
| 106 | + float eased = EaseInOut(progress); |
| 107 | + |
| 108 | + if (primaryShape == null || secondaryShape == null) |
| 109 | + return; |
| 110 | + |
| 111 | + var morphed = Morph(primaryShape, secondaryShape, eased); |
| 112 | + |
| 113 | + // Scale and center the morphed points to always fit the current canvas size. |
| 114 | + var fitted = FitToCanvas(morphed, (float)sender.Size.Width, (float)sender.Size.Height); |
| 115 | + |
| 116 | + using var builder = new CanvasPathBuilder(sender.Device); |
| 117 | + |
| 118 | + builder.BeginFigure(fitted[0]); |
| 119 | + for (int i = 1; i < fitted.Count; i++) |
| 120 | + builder.AddLine(fitted[i]); |
| 121 | + builder.EndFigure(CanvasFigureLoop.Closed); |
| 122 | + |
| 123 | + using var geometry = CanvasGeometry.CreatePath(builder); |
| 124 | + |
| 125 | + var fillColor = LerpColor(primaryColor, secondaryColor, eased); |
| 126 | + ds.FillGeometry(geometry, fillColor); |
| 127 | + } |
| 128 | + |
| 129 | + /// <summary> |
| 130 | + /// Uniformly scales and centers <paramref name="points"/> to fit inside the given canvas |
| 131 | + /// dimensions with a small padding. Because it reads <c>sender.Size</c> every frame, |
| 132 | + /// this also handles any SizeChanged automatically. |
| 133 | + /// </summary> |
| 134 | + private static List<Vector2> FitToCanvas(List<Vector2> points, float canvasWidth, float canvasHeight, float padding = 8f) |
| 135 | + { |
| 136 | + if (points == null || points.Count == 0 || canvasWidth <= 0 || canvasHeight <= 0) |
| 137 | + return points; |
| 138 | + |
| 139 | + float minX = points[0].X, maxX = points[0].X; |
| 140 | + float minY = points[0].Y, maxY = points[0].Y; |
| 141 | + |
| 142 | + foreach (var p in points) |
| 143 | + { |
| 144 | + if (p.X < minX) minX = p.X; |
| 145 | + if (p.X > maxX) maxX = p.X; |
| 146 | + if (p.Y < minY) minY = p.Y; |
| 147 | + if (p.Y > maxY) maxY = p.Y; |
| 148 | + } |
| 149 | + |
| 150 | + float geomW = maxX - minX; |
| 151 | + float geomH = maxY - minY; |
| 152 | + |
| 153 | + float availW = canvasWidth - padding * 2f; |
| 154 | + float availH = canvasHeight - padding * 2f; |
| 155 | + |
| 156 | + // Uniform scale so the shape fits without distortion. |
| 157 | + float scale = (geomW > 0 && geomH > 0) |
| 158 | + ? Math.Min(availW / geomW, availH / geomH) |
| 159 | + : 1f; |
| 160 | + |
| 161 | + // Offset to center the scaled shape on the canvas. |
| 162 | + float offsetX = padding + (availW - geomW * scale) / 2f - minX * scale; |
| 163 | + float offsetY = padding + (availH - geomH * scale) / 2f - minY * scale; |
| 164 | + |
| 165 | + var result = new List<Vector2>(points.Count); |
| 166 | + foreach (var p in points) |
| 167 | + result.Add(new Vector2(p.X * scale + offsetX, p.Y * scale + offsetY)); |
| 168 | + |
| 169 | + return result; |
| 170 | + } |
| 171 | + |
| 172 | + private static List<Vector2> SamplePointsOnPath(string svgPath, int pointCount) |
| 173 | + { |
| 174 | + if (string.IsNullOrEmpty(svgPath)) |
| 175 | + return null; |
| 176 | + |
| 177 | + var device = CanvasDevice.GetSharedDevice(); |
| 178 | + using var geometry = CanvasObject.CreateGeometry(svgPath); |
| 179 | + float length = geometry.ComputePathLength(); |
| 180 | + |
| 181 | + var points = new List<Vector2>(pointCount); |
| 182 | + for (int i = 0; i < pointCount; i++) |
| 183 | + { |
| 184 | + float t = i / (float)(pointCount - 1); |
| 185 | + points.Add(geometry.ComputePointOnPath(t * length)); |
| 186 | + } |
| 187 | + return points; |
| 188 | + } |
| 189 | + |
| 190 | + private static Windows.UI.Color LerpColor(Windows.UI.Color a, Windows.UI.Color b, float t) => Windows.UI.Color.FromArgb( |
| 191 | + (byte)(a.A + (b.A - a.A) * t), |
| 192 | + (byte)(a.R + (b.R - a.R) * t), |
| 193 | + (byte)(a.G + (b.G - a.G) * t), |
| 194 | + (byte)(a.B + (b.B - a.B) * t)); |
| 195 | + |
| 196 | + private static float EaseInOut(float t) => t * t * (3f - 2f * t); |
| 197 | + |
| 198 | + private static List<Vector2> Morph(List<Vector2> a, List<Vector2> b, float t) |
| 199 | + { |
| 200 | + var result = new List<Vector2>(a.Count); |
| 201 | + |
| 202 | + for (int i = 0; i < a.Count; i++) |
| 203 | + { |
| 204 | + result.Add(Vector2.Lerp(a[i], b[i], t)); |
| 205 | + } |
| 206 | + |
| 207 | + return result; |
| 208 | + } |
| 209 | +} |
0 commit comments