Question

import QtQuick 2.0

Rectangle {

id: rec
property int img_in:2
property int img_out:3

Image {
   id: imgout
   source:  "pics/"+img_out+".jpg"
   opacity: 1
   anchors.fill: parent
}

Image {
   id: imgin
   source:  "pics/"+img_in+".jpg"
   opacity: 0
   anchors.fill: imgout
  }

Timer {
    interval: 5000
    repeat: true
    running: true
    onTriggered: {
        img_in = img_in+1
        img_out = img_out+1
        anim.running = true;
     }
}

states: State {
    name: "state1"
    PropertyChanges { target: imgout; opacity: 0}
    PropertyChanges { target: imgin; opacity: 1}
}

SequentialAnimation {
    id: anim
    NumberAnimation { target: imgin; properties: "opacity"; easing.type: Easing.InOutQuad; duration: 1500 }
    NumberAnimation { target: imgout; properties: "opacity"; easing.type: Easing.InOutQuad; duration: 1500 }
}

}

我想知道问题是不透明度还是照片数量变化。 Pics确实发生了变化（突然），但没有动画。在onTriggered里面我试过使用这些选项：states，SequentialAnimation plus transition。没有帮助。

Answer 1

所以我拿了你的代码并对它进行了一些定制。它基本上从pics / 1.jpg开始逐渐消失，同时淡出pics / 2.jpg，然后继续下一个图像。您应该能够使用它并根据您的需要进行更改。

重要的是，States无需使用Behaviour Image元素上的opacity来执行此操作

希望这能回答你的问题！它确实是一个很棒的幻灯片！

import QtQuick 2.0

Rectangle {
    id: rec

    // [1] First image is to be display is pics/1.jpg,
    // followed by 2.jpg, 3.jpg, etc...
    property int currentIndex: 1
    property int nextIndex: 2

    // [2] When swapping the image sources we need
    // to block the animation behaviour.
    // By default turn it on.
    property bool allowBehaviour: true

    // [3] When the 'rec' is loaded
    // set the current image to fade out
    // and the next image to fade in.
    Component.onCompleted: {
        currentImage.opacity = 0;
        nextImage.opacity = 1;
    }

    Image {
        id: currentImage
        source:  "pics/" + currentIndex + ".jpg"
        opacity: 1
        anchors.fill: parent

        // [4] Here we define that whenever we change the
        // opacity we want it to animate. Notice the enable
        // is tied to `allowBehaviour`
        Behavior on opacity {
            enabled: allowBehaviour
            NumberAnimation { easing.type: Easing.InOutQuad; duration: 2500 }
        }
    }

    Image {
        id: nextImage
        source:  "pics/" + nextIndex + ".jpg"
        opacity: 0
        anchors.fill: currentImage

        // [5] See [4] above.
        Behavior on opacity {
            enabled: allowBehaviour
            NumberAnimation { easing.type: Easing.InOutQuad; duration: 2500 }
        }
    }

    Timer {
        interval: 2500
        repeat: true
        running: true

        onTriggered: {
            // [6] Block the Behaviour animation.
            allowBehaviour = false;

            // [7] Advance the indices.
            currentIndex = nextIndex;
            ++nextIndex;

            // [8] This is key, set the current
            // image to visible and the next
            // image to invisible. This happens
            // instantly as the Behaviour is off.
            currentImage.opacity = 1;
            nextImage.opacity = 0;

            // [9] Turn the behaviour so the
            // opacity change at [10] will
            // cause an animation.
            allowBehaviour = true;

            // [10] Like [3] set the current
            // image to fade out and the
            // next image to fade in.
            currentImage.opacity = 0;
            nextImage.opacity = 1;
        }
    }
}

QML计时器与转换相结合

1 个答案: