C

Qt Quick Ultralite timeline Example

/****************************************************************************** ** ** Copyright (C) 2020 The Qt Company Ltd. ** Contact: https://www.qt.io/licensing/ ** ** This file is part of the Qt Quick Ultralite module. ** ** $QT_BEGIN_LICENSE:COMM$ ** ** Commercial License Usage ** Licensees holding valid commercial Qt licenses may use this file in ** accordance with the commercial license agreement provided with the ** Software or, alternatively, in accordance with the terms contained in ** a written agreement between you and The Qt Company. For licensing terms ** and conditions see http://www.qt.io/terms-conditions. For further ** information use the contact form at http://www.qt.io/contact-us. ** ** $QT_END_LICENSE$ ** ******************************************************************************/
import QtQuick 2.15 import QtQuick.Timeline 1.0 Rectangle { id: root readonly property int rectSize: root.height / 5 color: "#c2c2c2" Timeline { id: timeline1 animations: [ TimelineAnimation { id: timelineAnimation pingPong: true running: true from: 0 duration: 5000 loops: Animation.Infinite to: 800 } ] startFrame: 0 enabled: true endFrame: 10000 KeyframeGroup { target: rectangle property: "x" Keyframe { id: d value: root.width - rectangle.width frame: 300 } Keyframe { value: root.width - rectangle.width frame: 548 } } KeyframeGroup { target: rectangle property: "y" Keyframe { value: 0 frame: 300 } Keyframe { value: root.height * 0.5 - rectangle.height frame: 552 } } KeyframeGroup { target: rectangle property: "color" Keyframe { value: "red" frame: 0 easing.type: Easing.InCubic } Keyframe { value: "green" frame: 552 easing.type: Easing.OutCubic } } KeyframeGroup { target: rectangle1 property: "x" Keyframe { value: root.width - rectangle1.width frame: 300 } Keyframe { value: root.width - rectangle1.width frame: 548 } } KeyframeGroup { target: rectangle1 property: "y" Keyframe { value: root.height - rectangle1.height frame: 0 } Keyframe { value: root.height - rectangle1.height frame: 300 } Keyframe { value: root.height * 0.5 frame: 548 } } KeyframeGroup { target: rectangle1 property: "color" Keyframe { value: "red" frame: 0 easing.type: Easing.OutCubic } Keyframe { value: "green" frame: 552 easing.type: Easing.OutCubic } } KeyframeGroup { target: text property: "text" Keyframe { value: "2" frame: 300 } Keyframe { value: "3" frame: 548 } } } Rectangle { id: rectangle x: 0 y: 0 width: rectSize height: rectSize color: "#ffffff" } Rectangle { id: rectangle1 x: 0 y: root.height - height width: rectSize height: rectSize color: "#ffffff" Text { id: text anchors.centerIn: parent text: "1" } } }