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!