Question

我想要一个应用程序，总是在加载新图像时，它会从0大小缩放到默认大小。这种行为通常不起作用。在这张图片中，当鼠标进入图像时，我也使用动画进行弹跳。是否有可能，这两个动画并不爱自己，也就是说，为什么扩大规模往往不起作用？

我正在使用Linux Mint 13，Qt 5.3

这是我的Image元素：

Image {
        id: pic1
        width: appWindow.height*0.4
        height: appWindow.height*0.4
        smooth: { enabled = true
            pic1MouseArea.containsMouse
        }
        states: [ "mouseIn", "mouseOut" ]
        state: "mouseOut"

        transitions: [
            Transition {
                from: "*"
                to: "mouseIn"
                NumberAnimation {
                    target: pic1
                    properties: "scale"
                    from: 0.95
                    to: 1
                    duration: 400
                    easing.type: Easing.OutBounce
                }
            }
        ]
        scale: {
            status === Image.Ready ? 1 : 0
        }
        Behavior on scale {
            NumberAnimation{
                from: 0
                to: 1
                duration: 1000
                easing.type: Easing.OutBounce
            }
        }
        MouseArea{
            id: pic1MouseArea
            hoverEnabled: true
            anchors.fill: parent
            onContainsMouseChanged: {
                pic1.state = containsMouse ? "mouseIn" : "mouseOut"
            }
            onClicked: {    
                    MyScript.getRandomFile()   
            }
        }
    }

Answer 1

首先，请阅读此doc。 states属性必须定义为list<State>，而不是字符串数组。此外，State元素定义属性或属性集从默认配置更改时的某些状态。在您的示例中，状态无定义。详细了解State类型。

最后，这是一个帮助您上传的小例子：

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Window 2.2

Window {
    width: 600
    height: 400
    visible: true
    Image {
        id: img
        source: "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
        anchors.centerIn: parent
        opacity: 1
        state: "mouseOut"
        states: [
            State {
                name: "mouseIn"
                PropertyChanges { target: img; opacity: 0 }
            },
            State {
                name: "mouseOut"
                PropertyChanges { target: img; opacity: 1 }
            }
        ]
        transitions: Transition {
            PropertyAnimation {
                target: img
                property: "opacity"
                easing.type: Easing.InCirc
                duration: 1000
            }
        }

        MouseArea {
            anchors.fill: parent
            hoverEnabled: true
            onEntered: img.state = "mouseIn"
            onExited: img.state = "mouseOut"
        }
    }
}

当然，如果您需要此功能，可以将transitions替换为Behavior，如下所示：

Behavior on opacity {
    PropertyAnimation {
        duration: 1000
        easing.type: Easing.InCirc
    }
}

规模上的行为通常不起作用

1 个答案: