Merge pull request #1126 from andy840119/implement-tick-effect-in-lyr…

…ic-editor

Implement tick effect in lyric editor.

osu.Game.Rulesets.Karaoke/Edit/Lyrics/Rows/Extends/RecordingTimeTags/RecordingTimeTagPart.cs

@@ -22,6 +22,7 @@
 using osu.Game.Screens.Edit;
 using osu.Game.Screens.Edit.Components.Timelines.Summary.Parts;
 using osuTK;
+using osuTK.Graphics;
 
 namespace osu.Game.Rulesets.Karaoke.Edit.Lyrics.Rows.Extends.RecordingTimeTags
 {
@@ -120,9 +121,9 @@ private class RecordingTimeTagVisualization : CompositeDrawable, IHasCustomToolt
             [Resolved]
             private ILyricTimeTagsChangeHandler lyricTimeTagsChangeHandler { get; set; }
 
-            private readonly Bindable<double?> bindableTIme;
+            private readonly Bindable<double?> bindableTime;
 
-            private readonly RightTriangle timeTagTriangle;
+            private readonly TimeTagPiece timeTagPiece;
 
             private readonly Lyric lyric;
             private readonly TimeTag timeTag;
@@ -138,10 +139,10 @@ public RecordingTimeTagVisualization(Lyric lyric, TimeTag timeTag)
                 RelativePositionAxes = Axes.X;
                 Size = new Vector2(RecordingTimeTagEditor.TIMELINE_HEIGHT);
 
-                bindableTIme = timeTag.TimeBindable.GetBoundCopy();
+                bindableTime = timeTag.TimeBindable.GetBoundCopy();
                 InternalChildren = new Drawable[]
                 {
-                    timeTagTriangle = new RightTriangle
+                    timeTagPiece = new TimeTagPiece
                     {
                         Name = "Time tag triangle",
                         Anchor = Anchor.Centre,
@@ -159,19 +160,36 @@ public RecordingTimeTagVisualization(Lyric lyric, TimeTag timeTag)
             }
 
             [BackgroundDependencyLoader]
-            private void load(OsuColour colours, RecordingTimeTagEditor timeline)
+            private void load(EditorClock clock, OsuColour colours, RecordingTimeTagEditor timeline)
             {
-                timeTagTriangle.Colour = colours.GetTimeTagColour(timeTag);
+                timeTagPiece.Clock = clock;
+                timeTagPiece.Colour = colours.GetTimeTagColour(timeTag);
 
-                bindableTIme.BindValueChanged(e =>
+                bindableTime.BindValueChanged(e =>
                 {
                     bool hasValue = e.NewValue.HasValue;
                     Alpha = hasValue ? 1 : 0;
 
                     if (!hasValue)
                         return;
 
-                    X = (float)timeline.GetPreviewTime(timeTag);
+                    // should wait until all time-tag time has been modified.
+                    Schedule(() =>
+                    {
+                        double previewTime = timeline.GetPreviewTime(timeTag);
+
+                        // adjust position.
+                        X = (float)previewTime;
+
+                        // make tickle effect.
+                        timeTagPiece.ClearTransforms();
+
+                        using (timeTagPiece.BeginAbsoluteSequence(previewTime))
+                        {
+                            timeTagPiece.Colour = colours.GetTimeTagColour(timeTag);
+                            timeTagPiece.FlashColour(colours.RedDark, 750, Easing.OutQuint);
+                        }
+                    });
                 }, true);
             }
 
@@ -200,5 +218,10 @@ protected override bool OnClick(ClickEvent e)
                     })
                 };
         }
+
+        private class TimeTagPiece : RightTriangle
+        {
+            public override bool RemoveCompletedTransforms => false;
+        }
     }
 }

osu.Game.Rulesets.Karaoke/Edit/Lyrics/Rows/Extends/TimeTags/TimeTagEditorHitObjectBlueprint.cs

@@ -18,7 +18,9 @@
 using osu.Game.Rulesets.Karaoke.Graphics.Shapes;
 using osu.Game.Rulesets.Karaoke.Objects;
 using osu.Game.Rulesets.Karaoke.Utils;
+using osu.Game.Screens.Edit;
 using osuTK;
+using osuTK.Graphics;
 
 namespace osu.Game.Rulesets.Karaoke.Edit.Lyrics.Rows.Extends.TimeTags
 {
@@ -81,11 +83,14 @@ public TimeTagEditorHitObjectBlueprint(TimeTag item)
         }
 
         [BackgroundDependencyLoader]
-        private void load(TimeTagEditor timeline, OsuColour colours)
+        private void load(EditorClock clock, TimeTagEditor timeline, OsuColour colours)
         {
             // todo : should be able to let user able to select show from ruby or main text.
             timeTagText.Text = LyricUtils.GetTimeTagDisplayRubyText(timeline.HitObject, Item);
+
+            timeTagPiece.Clock = clock;
             timeTagPiece.Colour = colours.BlueLight;
+
             timeTagWithNoTimePiece.Colour = colours.Red;
             startTime.BindValueChanged(_ =>
             {
@@ -105,10 +110,22 @@ private void load(TimeTagEditor timeline, OsuColour colours)
                         break;
                 }
 
+                // should wait until all time-tag time has been modified.
                 Schedule(() =>
                 {
-                    // should wait until all time-tag time has been modified.
-                    X = (float)timeline.GetPreviewTime(Item);
+                    double previewTime = timeline.GetPreviewTime(Item);
+
+                    // adjust position.
+                    X = (float)previewTime;
+
+                    // make tickle effect.
+                    timeTagPiece.ClearTransforms();
+
+                    using (timeTagPiece.BeginAbsoluteSequence(previewTime))
+                    {
+                        timeTagPiece.Colour = colours.BlueLight;
+                        timeTagPiece.FlashColour(colours.PurpleDark, 750, Easing.OutQuint);
+                    }
                 });
             }, true);
         }
@@ -180,6 +197,8 @@ public TimeTagPiece(TimeTag timeTag)
                         throw new ArgumentOutOfRangeException(nameof(timeTag.Index.State));
                 }
             }
+
+            public override bool RemoveCompletedTransforms => false;
         }
 
         public class TimeTagWithNoTimePiece : CompositeDrawable