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!
↧
