Problems with Open-Source Downloads read https://www.qt.io/blog/problem-with-open-source-downloads and https://forum.qt.io/post/638946

How to animate HSL filter as a colour animation (or equivalent)?



  • Okay, so I want to change the hue of an object with the HSL filter effect, so that the hues in the image change relatively.
    The problem is that, when animating this, i can only animate the "hue" property - there is no "colour" property that i can animate.

    This means that the animation ends up as a rainbow flash of "inbetween hues" rather than a kind of "blend transition" of the two hues that would happen if you were animating by colour.

    The reason for using a HSL filter as opposed to another kind of colourising approach is that it is the only one that keeps the relative hues / saturations separate and is not a "blanked overlay".

    For anyone wishing to try this out:

    @import QtQuick 2.0
    import QtGraphicalEffects 1.0
    Row {
    Rectangle {
    id: color_animation
    width: 266
    height: 266
    color: "#00adee"

        Behavior on color {
    //    ColorAnimation on color {
            ColorAnimation {
                duration: 360
                easing.type: Easing.Linear
            }
        }
    
    }
    Item {
        width: 266
        height: 266
        HueSaturation {
            id: filter
            width: 266
            height: 266
            source: filter_rect
            hue: -0.35933147632311977715877437325905
    
            Behavior on hue {
                NumberAnimation {
                    duration: 360
                    easing.type: Easing.Linear
                }
            }
        }
        Image {
            id: filter_rect
            width: 266
            height: 266
            source:"images/pink_rect.png"
            visible: false
        }
    }
    focus: true
    Keys.onReturnPressed: {
        color_animation.color == "#00adee" ? color_animation.color = "#ed008a" : color_animation.color = "#00adee"
        filter.hue == 0 ? filter.hue = -0.35933147632311977715877437325905 : filter.hue = 0
    

    }
    }@

    Where pink_rect.png is a single pixel image of colour #ed008a .

    Thanks!


Log in to reply