Is it posible to animate color change without using color property in QML? - qt

Question

I have a QML component containing an Image{} object that has no "color: " property set, and the color is instead passed to "svg from string" function from a string type property, and is later used as the svg image's "fill" parameter. It looks like this:
property string color: "aliceblue"
I'm wondering if there's a way to animate the color change using ColorAnimation QML Type, because it targets the "color: " property of the object, and it's not used at all in my case. The format of the color doesn't matter as long as it's supported by XML. (could be #RRGGBBAA etc)

Answer 1

The ColorAnimation can be applied to any property, not necessary a color, for example, we can see the ColorAnimation being used on a text property:
import QtQuick
import QtQuick.Controls
Page {
Button {
anchors.centerIn: parent
ColorAnimation on text {
id: animation
from: "red"
to: "yellow"
duration: 1000
}
onClicked: animation.restart()
}
}
You can Try it Online!
In terms of recoloring an SVG, I always leverage from the icon property that can be found on many components, such as Button. The icon property has source, color, width and height. In the following example, we use icon.color to recolor a space invader:
import QtQuick
import QtQuick.Controls
Page {
IconButton {
anchors.centerIn: parent
height: 256
icon.source: "space-invader.svg"
ColorAnimation on icon.color {
id: animation
from: "red"
to: "yellow"
duration: 1000
}
onClicked: animation.restart()
}
}
// IconButton.qml
import QtQuick
import QtQuick.Controls
Item {
id: iconButton
width: height
height: 64
clip: true
property alias icon: btn.icon
property alias background: btn.background
signal clicked()
Button {
id: btn
anchors.centerIn: parent
background: Item { }
icon.width: parent.width
icon.height: parent.height
onClicked: iconButton.clicked()
}
}
// space-invader.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<rect x="4" y="4" width="1" height="1"/>
<rect x="10" y="4" width="1" height="1"/>
<rect x="5" y="5" width="1" height="1"/>
<rect x="9" y="5" width="1" height="1"/>
<rect x="4" y="6" width="7" height="1"/>
<rect x="3" y="7" width="2" height="1"/>
<rect x="6" y="7" width="3" height="1"/>
<rect x="10" y="7" width="2" height="1"/>
<rect x="2" y="8" width="11" height="1"/>
<rect x="2" y="9" width="1" height="1"/>
<rect x="4" y="9" width="7" height="1"/>
<rect x="12" y="9" width="1" height="1"/>
<rect x="2" y="10" width="1" height="1"/>
<rect x="4" y="10" width="1" height="1"/>
<rect x="10" y="10" width="1" height="1"/>
<rect x="12" y="10" width="1" height="1"/>
<rect x="5" y="11" width="2" height="1"/>
<rect x="8" y="11" width="2" height="1"/>
</svg>
You can Try it Online!
Another way to recolor an SVG, is through the use of data URI image:data/svg+xml, + svg_string so that you can generate a svg string on the fly, however, the way how this compiles causes flicker when used with ColorAnimation. In the following example we ColorAnimation on the color col property, but, we promptly type convert it to a string with col + "" when passing it to our getSvg() function. We make use of ES6 string interpolation to quickly embed this color into our target string.
import QtQuick
import QtQuick.Controls
Page {
Image {
anchors.centerIn: parent
property color col: "red"
width: 256
height: 256
sourceSize: Qt.size(width, height)
source: `data:image/svg+xml,` + getSvg(col + '')
ColorAnimation on col {
from: "red"
to: "yellow"
duration: 10000
}
}
function getSvg(col) {
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<rect x="4" y="4" width="1" fill="${col}" height="1"/>
<rect x="10" y="4" width="1" fill="${col}" height="1"/>
<rect x="5" y="5" width="1" fill="${col}" height="1"/>
<rect x="9" y="5" width="1" fill="${col}" height="1"/>
<rect x="4" y="6" width="7" fill="${col}" height="1"/>
<rect x="3" y="7" width="2" fill="${col}" height="1"/>
<rect x="6" y="7" width="3" fill="${col}" height="1"/>
<rect x="10" y="7" width="2" fill="${col}" height="1"/>
<rect x="2" y="8" width="11" fill="${col}" height="1"/>
<rect x="2" y="9" width="1" fill="${col}" height="1"/>
<rect x="4" y="9" width="7" fill="${col}" height="1"/>
<rect x="12" y="9" width="1" fill="${col}" height="1"/>
<rect x="2" y="10" width="1" fill="${col}" height="1"/>
<rect x="4" y="10" width="1" fill="${col}" height="1"/>
<rect x="10" y="10" width="1" fill="${col}" height="1"/>
<rect x="12" y="10" width="1" fill="${col}" height="1"/>
<rect x="5" y="11" width="2" fill="${col}" height="1"/>
<rect x="8" y="11" width="2" fill="${col}" height="1"/>
</svg>`
}
}
You can Try it Online!