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。没有帮助。
答案 0 :(得分:3)
所以我拿了你的代码并对它进行了一些定制。它基本上从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;
}
}
}