chore: Reimplement notification animation

log: as title

Author: tsic404

panels/dock/taskmanager/package/AppItem.qml

@@ -165,14 +165,7 @@ Item {
             name: root.iconName
             sourceSize: Qt.size(Dock.MAX_DOCK_TASKMANAGER_ICON_SIZE, Dock.MAX_DOCK_TASKMANAGER_ICON_SIZE)
             anchors.centerIn: parent
-            scale: iconScale
-            BeatAnimation {
-                id: beatAnimation
-                target: icon
-                baseScale: iconScale
-                loops: Animation.Infinite
-                running: root.attention
-            }
+            scale: Panel.rootObject.isDragging ? iconScale : iconScale
 
             LaunchAnimation {
                 id: launchAnimation
@@ -204,20 +197,68 @@ Item {
                 loops: 1
                 running: false
             }
+        }
+
+        // TODO: value can set during debugPanel
+        Repeater {
+            model: 5
+            Rectangle {
+                id: rect
+                required property int index
+                property var originSize: Dock.MAX_DOCK_TASKMANAGER_ICON_SIZE * 1.2 * iconScale
+
+                visible: root.attention && !Panel.rootObject.isDragging
+                width: originSize * (index - 1)
+                height: width
+                radius: width / 2
+                color: Qt.rgba(1, 1, 1, 0.1)
+
+                anchors.centerIn: icon
+                z: -1
+                opacity: Math.min(3 - width / originSize, blendColorAlpha(D.DTK.themeType === D.ApplicationHelper.DarkType ? 0.25 : 1.0))
+
+                function blendColorAlpha(fallback) {
+                    var appearance = DS.applet("org.deepin.ds.dde-appearance")
+                    if (!appearance || appearance.opacity < 0 || appearance.opacity > fallback || appearance.opacity < fallback)
+                        return fallback
+                    return appearance.opacity
+                }
+
+                SequentialAnimation {
+                    running: root.attention && !Panel.rootObject.isDragging
+                    loops: Animation.Infinite
 
-            Connections {
-                target: Panel.rootObject
-                function onPressedAndDragging(isDragging) {
-                    if (isDragging) {
-                        beatAnimation.stop()
-                        icon.scale = Qt.binding(function() {
-                            return root.iconScale
-                        })
-                    } else {
-                        beatAnimation.running = Qt.binding(function() {
-                            return root.attention
-                        })
+                    // 弹出
+                    ParallelAnimation {
+                        NumberAnimation { target: rect; property: "width"; from: Math.max(originSize * (index - 1), 0); to: originSize * (index); duration: 1200 }
+                        ColorAnimation { target: rect; property: "color"; from: Qt.rgba(1, 1, 1, 0.4); to: Qt.rgba(1, 1, 1, 0.1); duration: 1200 }
+                        NumberAnimation { target: icon; property: "scale"; from: iconScale; to: iconScale * 1.15; duration: 1200; easing.type: Easing.OutElastic; easing.amplitude: 1; easing.period: 0.2 }
                     }
+
+                    // 收缩
+                    ParallelAnimation {
+                        NumberAnimation { target: rect; property: "width"; from: originSize * (index); to: originSize * (index + 1); duration: 1200 }
+                        ColorAnimation { target: rect; property: "color"; from: Qt.rgba(1, 1, 1, 0.4); to: Qt.rgba(1, 1, 1, 0.1); duration: 1200 }
+                        NumberAnimation { target: icon; property: "scale"; from: iconScale * 1.15; to: iconScale; duration: 1200; easing.type: Easing.OutElastic; easing.amplitude: 1; easing.period: 0.2 }
+                    }
+
+                    // 停顿
+                    ParallelAnimation {
+                        NumberAnimation { target: rect; property: "width"; from: originSize * (index + 1); to: originSize * (index + 2); duration: 1200 }
+                        ColorAnimation { target: rect; property: "color"; from: Qt.rgba(1, 1, 1, 0.4); to: Qt.rgba(1, 1, 1, 0.1); duration: 1200 }
+                    }
+                }
+
+                D.BoxShadow {
+                    visible: rect.visible
+                    anchors.fill: rect
+                    z: -2
+                    shadowBlur: 20
+                    shadowColor : Qt.rgba(0, 0, 0, 0.05)
+                    shadowOffsetX : 0
+                    shadowOffsetY : 0
+                    cornerRadius: rect.radius
+                    hollow: true
                 }
             }
         }

panels/dock/taskmanager/package/BeatAnimation.qml

@@ -41,6 +41,7 @@ ContainmentItem {
                 required property string menus
                 required property list<string> windows
                 keys: ["text/x-dde-dock-dnd-appid", "text/x-dde-launcher-dnd-desktopId"]
+                z: attention ? -1 : 0
 
                 // TODO: 临时溢出逻辑，待后面修改
                 // 1:4 the distance between app : dock height; get width/height≈0.8