wallpaper: transition blurred wallpaper layer fixes #579

Modules/BlurredWallpaperBackground.qml

@@ -54,17 +54,25 @@ Variants {
             }
 
             function getFillMode(modeName) {
-                switch(modeName) {
+                switch (modeName) {
-                    case "Stretch": return Image.Stretch
+                case "Stretch":
-                    case "Fit":
+                    return Image.Stretch
-                    case "PreserveAspectFit": return Image.PreserveAspectFit
+                case "Fit":
-                    case "Fill":
+                case "PreserveAspectFit":
-                    case "PreserveAspectCrop": return Image.PreserveAspectCrop
+                    return Image.PreserveAspectFit
-                    case "Tile": return Image.Tile
+                case "Fill":
-                    case "TileVertically": return Image.TileVertically
+                case "PreserveAspectCrop":
-                    case "TileHorizontally": return Image.TileHorizontally
+                    return Image.PreserveAspectCrop
-                    case "Pad": return Image.Pad
+                case "Tile":
-                    default: return Image.PreserveAspectCrop
+                    return Image.Tile
+                case "TileVertically":
+                    return Image.TileVertically
+                case "TileHorizontally":
+                    return Image.TileHorizontally
+                case "Pad":
+                    return Image.Pad
+                default:
+                    return Image.PreserveAspectCrop
                 }
             }
 
@@ -76,33 +84,77 @@ Variants {
             Component.onCompleted: {
                 if (source) {
                     const formattedSource = source.startsWith("file://") ? source : "file://" + source
-                    wallpaperImage.source = formattedSource
+                    setWallpaperImmediate(formattedSource)
                 }
+                isInitialized = true
             }
 
             Component.onDestruction: {
                 weProc.stop()
             }
 
+            property bool isInitialized: false
+            property real transitionProgress: 0
+            readonly property bool transitioning: transitionAnimation.running
+
             onSourceChanged: {
                 const isWE = source.startsWith("we:")
                 const isColor = source.startsWith("#")
 
                 if (isWE) {
-                    wallpaperImage.source = ""
+                    setWallpaperImmediate("")
                     weProc.start(source.substring(3))
                 } else {
                     weProc.stop()
                     if (!source) {
-                        wallpaperImage.source = ""
+                        setWallpaperImmediate("")
                     } else if (isColor) {
-                        wallpaperImage.source = ""
+                        setWallpaperImmediate("")
                     } else {
-                        wallpaperImage.source = source.startsWith("file://") ? source : "file://" + source
+                        if (!isInitialized || !currentWallpaper.source) {
+                            setWallpaperImmediate(source.startsWith("file://") ? source : "file://" + source)
+                            isInitialized = true
+                        } else {
+                            changeWallpaper(source.startsWith("file://") ? source : "file://" + source)
+                        }
                     }
                 }
             }
 
+            function setWallpaperImmediate(newSource) {
+                transitionAnimation.stop()
+                root.transitionProgress = 0.0
+                currentWallpaper.source = newSource
+                nextWallpaper.source = ""
+                currentWallpaper.opacity = 1
+                nextWallpaper.opacity = 0
+            }
+
+            function changeWallpaper(newPath) {
+                if (newPath === currentWallpaper.source)
+                    return
+                if (!newPath || newPath.startsWith("#"))
+                    return
+
+                if (root.transitioning) {
+                    transitionAnimation.stop()
+                    root.transitionProgress = 0
+                    currentWallpaper.source = nextWallpaper.source
+                    nextWallpaper.source = ""
+                }
+
+                if (!currentWallpaper.source) {
+                    setWallpaperImmediate(newPath)
+                    return
+                }
+
+                nextWallpaper.source = newPath
+
+                if (nextWallpaper.status === Image.Ready) {
+                    transitionAnimation.start()
+                }
+            }
+
             Loader {
                 anchors.fill: parent
                 active: !root.source || root.isColorSource
@@ -114,21 +166,78 @@ Variants {
             }
 
             Image {
-                id: wallpaperImage
+                id: currentWallpaper
                 anchors.fill: parent
                 visible: false
+                opacity: 1
                 asynchronous: true
                 smooth: true
                 cache: true
                 fillMode: root.getFillMode(SettingsData.wallpaperFillMode)
             }
 
-            MultiEffect {
+            Image {
+                id: nextWallpaper
                 anchors.fill: parent
-                source: wallpaperImage
+                visible: false
-                blurEnabled: true
+                opacity: 0
-                blur: 0.8
+                asynchronous: true
-                blurMax: 75
+                smooth: true
+                cache: true
+                fillMode: root.getFillMode(SettingsData.wallpaperFillMode)
+
+                onStatusChanged: {
+                    if (status !== Image.Ready)
+                        return
+
+                    if (!root.transitioning) {
+                        transitionAnimation.start()
+                    }
+                }
+            }
+
+            Item {
+                id: blurredLayer
+                anchors.fill: parent
+
+                MultiEffect {
+                    anchors.fill: parent
+                    source: currentWallpaper
+                    blurEnabled: true
+                    blur: 0.8
+                    blurMax: 75
+                    opacity: 1 - root.transitionProgress
+                }
+
+                MultiEffect {
+                    anchors.fill: parent
+                    source: nextWallpaper
+                    blurEnabled: true
+                    blur: 0.8
+                    blurMax: 75
+                    opacity: root.transitionProgress
+                }
+            }
+
+            NumberAnimation {
+                id: transitionAnimation
+                target: root
+                property: "transitionProgress"
+                from: 0.0
+                to: 1.0
+                duration: 1000
+                easing.type: Easing.InOutCubic
+                onFinished: {
+                    Qt.callLater(() => {
+                                     if (nextWallpaper.source && nextWallpaper.status === Image.Ready && !nextWallpaper.source.toString().startsWith("#")) {
+                                         currentWallpaper.source = nextWallpaper.source
+                                     }
+                                     nextWallpaper.source = ""
+                                     currentWallpaper.opacity = 1
+                                     nextWallpaper.opacity = 0
+                                     root.transitionProgress = 0.0
+                                 })
+                }
             }
         }
     }