Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Rotating DropShadow



  • I'm quite new to QtGraphicalEffect. Please consider this short code:

    import QtQuick 2.9
    import QtQuick.Window 2.2
    import QtGraphicalEffects 1.0
    
    Window {
        visible: true
        property double spinAngle: 0
    
        Image {
            id: imgBackground
            source: "file:///images/background.png"
    
            Image {
                id: imgSpinner
                source: "file:///images/spinner.png"
                x: imgBackground.width / 2 - imgSpinner.width / 2
                y: 260
                visible: false
                antialiasing: true
            }
    
            DropShadow {
                 id: sdwSpinner
                 anchors.fill: imgSpinner
                 horizontalOffset: 8
                 verticalOffset: 8
                 radius: 4.0
                 samples: 17
                 color: "#AA000000"
                 source: imgSpinner
    
                 transform: Rotation {
                     id: rotSpinner
                 }
    
                 SequentialAnimation {
                     id: anim1
                     PropertyAction { target: rotSpinner; property: "origin.x"; value: imgSpinner.width / 2 }
                     PropertyAction { target: rotSpinner; property: "origin.y"; value: 240 }
                     NumberAnimation { target: rotSpinner; property: "angle"; easing.type: Easing.Linear; to: 360; duration: 1000 }
                 }
            }
    
            MouseArea {
                anchors.fill: parent;
                onClicked: {
                    anim1.loops = Animation.Infinite
                    anim1.start()
                }
            }
        }
    }
    

    It just paint an image (spinner) over a background and when you click with the mouse, the spinner start rotating.
    The problem is the DropShadow rotates with the image, instead of being projected to the same direction I specified initially (offset 8,8 px).

    What is the right way to animate a DropShadow in the way it is recalculated when it rotates?


  • Moderators

    @Mark81
    i think the only possibility is to counter-rotate the shadow along the item rotation, so it appears that the shadow looks static.
    Please someone correct me if i am wrong and if there is a better/easier solution.

    Heres an example:

    import QtQuick 2.9
    import QtQuick.Window 2.2
    import QtGraphicalEffects 1.0
    
    Window {
        visible: true
    
        width: 800
        height: 600
    
        Image {
            id: imgSpinner
            source: "qrc:///qt_logo.png"
            x: 100
            y: 50
            visible: true
            antialiasing: true
    
            layer.enabled: true
            layer.effect: DropShadow
            {
                transparentBorder: true
    
                horizontalOffset: baseOffset + Math.cos(-angleRad)*imgSpinner.width
                verticalOffset: baseOffset + Math.sin(-angleRad)*imgSpinner.height
    
                property real baseOffset: 8
                property real angleRad: imgSpinner.rotation*(2* Math.PI/360)
            }
        }
    
        ParallelAnimation {
            id: anim1
            NumberAnimation { target: imgSpinner; property: "rotation"; easing.type: Easing.Linear; to: 360; duration: 1000 }
        }
    
        MouseArea {
            anchors.fill: parent;
            onClicked: {
                anim1.loops = Animation.Infinite
                anim1.start()
            }
        }
    }
    

    In the code you just have to fiddle around a bit to place shadow correctly. But i think it mostly does what you want (at least if i understood you correctly).
    In my example the shadow is misplaced next to the item for some reason, i haven't debugged very much into it. But at least i think this brings you very close to the your desired result.



  • @raven-worx Thanks! I will try your solution as soon as possible and I will come back with a feedback.


Log in to reply