Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How to animate HSL filter as a colour animation (or equivalent)?

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

Scheduled Pinned Locked Moved QML and Qt Quick
1 Posts 1 Posters 684 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • O Offline
    O Offline
    oneWonders
    wrote on last edited by
    #1

    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!

    1 Reply Last reply
    0

    • Login

    • Login or register to search.
    • First post
      Last post
    0
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Get Qt Extensions
    • Unsolved