Question

我想在鼠标悬停在图像上时制作动画，但是当鼠标离开图像时我不想制作动画。

Item{
width: 800
height:800
Rectangle{
    id: blueRec
    width: 100; height: 100; color: "blue"
    MouseArea{
        anchors.fill: parent
        onClicked: {
            im1.visible = true
            im1.source = "1.png"
        }
    }
}
Image {
    id: im1
    scale: im1MouseArea.containsMouse ? 0.8 : 1.0
    Behavior on scale {
        NumberAnimation{
            id: anim
            from: 0.95
            to: 1
            duration: 400
            easing.type: Easing.OutBounce
        }
    }
    MouseArea{
        id: im1MouseArea
        hoverEnabled: true
        anchors.fill: parent
    }
}

}

当鼠标离开图像时，上面的代码也会产生动画。

有人可以帮忙吗？

Answer 1

设置比例然后触发改变比例的动画似乎是一种奇怪的方法。如果我是你，我会将其分解为状态，并将动画设置为触发适当的过渡。

这是一个如何做到这一点的例子：

Image {
    id: im1

    states: [ "mouseIn", "mouseOut" ]
    state: "mouseOut"

    transitions: [
        Transition {
            from: "*"
            to: "mouseIn"
            NumberAnimation {
                target: im1
                properties: "scale"
                from: 0.95
                to: 1
                duration: 400
                easing.type: Easing.OutBounce
            }
        }
    ]

    MouseArea{
        id: im1MouseArea
        hoverEnabled: true
        anchors.fill: parent

        onContainsMouseChanged: {
            im1.state = containsMouse ? "mouseIn" : "mouseOut"
        }
    }
}

QML：仅在鼠标进入图像时动画

1 个答案: