import/qml/SlidingImage.qml

0001 /*
0002  * Copyright 2019 by Marco Martin <mart@kde.org>
0003  *
0004  * Licensed under the Apache License, Version 2.0 (the "License");
0005  * you may not use this file except in compliance with the License.
0006  * You may obtain a copy of the License at
0007  *
0008  *    http://www.apache.org/licenses/LICENSE-2.0
0009  *
0010  * Unless required by applicable law or agreed to in writing, software
0011  * distributed under the License is distributed on an "AS IS" BASIS,
0012  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
0013  * See the License for the specific language governing permissions and
0014  * limitations under the License.
0015  *
0016  */
0017
0018 import QtQuick 2.15
0019 import org.kde.kirigami 2.19 as Kirigami
0020
0021 /**
0022  * Contains an image that will slowly scroll in order to be shown completely
0023  * This is supoposed to be used as background item for a skill,
0024  * like in the following example.
0025  *
0026  * @code
0027  *  Mycroft.Delegate {
0028  *      background: Mycroft.SlidingImage {
0029  *          source: "foo.jpg"
0030  *      }
0031  *  }
0032  * @endcode
0033  */
0034 Item {
0035     id: root
0036
0037     /**
0038      * running: bool
0039      * If true the sliding animation is active
0040      */
0041     property bool running: true
0042
0043     /**
0044      * source: url
0045      * source for the image
0046      */
0047     property alias source: image.source
0048
0049     /**
0050      * speed: real
0051      * Animation speed in Kirigami.Units.gridUnit / second
0052      */
0053     property real speed: 1
0054
0055     clip: true
0056     Component.onCompleted: image.updateAnimsTimer.restart()
0057     onWidthChanged: image.updateAnimsTimer.restart()
0058     onHeightChanged: image.updateAnimsTimer.restart()
0059     onRunningChanged: image.updateAnimsTimer.restart()
0060
0061     Image {
0062         id: image
0063         fillMode: Image.PreserveAspectFit
0064
0065         readonly property bool horizontal: sourceSize.width / sourceSize.height > root.width / root.height
0066         //Transforms the speed into duration
0067         readonly property real duration: horizontal
0068             ? ((image.width - root.width) / (root.speed * Kirigami.Units.gridUnit)) * (1000 / Kirigami.Units.gridUnit)
0069             : ((image.height - root.height) / (root.speed * Kirigami.Units.gridUnit)) * (1000 / Kirigami.Units.gridUnit)
0070
0071         width: horizontal
0072             ? root.height * (sourceSize.width / sourceSize.height)
0073             : root.width
0074         height: horizontal
0075             ? root.height
0076             : root.width * (sourceSize.height / sourceSize.width)
0077         onWidthChanged: updateAnimsTimer.restart()
0078         onHeightChanged: updateAnimsTimer.restart()
0079         onSourceSizeChanged: updateAnimsTimer.restart()
0080
0081         Timer {
0082             id: updateAnimsTimer
0083             interval: 100
0084             onTriggered: {
0085                 xAnim.running = false;
0086                 yAnim.running = false;
0087                 if (!root.running) {
0088                     return;
0089                 }
0090
0091                 xAnim.running = image.width > root.width;
0092                 yAnim.running = image.height > root.height;
0093             }
0094         }
0095     }
0096
0097     SequentialAnimation {
0098         id: xAnim
0099         loops: Animation.Infinite
0100         XAnimator {id: bah
0101             target: image
0102             from: 0
0103             to: root.width - image.width
0104             duration: image.duration
0105             easing.type: Easing.InOutQuad
0106         }
0107         PauseAnimation {
0108             duration: 500
0109         }
0110         XAnimator {
0111             target: image
0112             from: root.width - image.width
0113             to: 0
0114             duration: image.duration
0115             easing.type: Easing.InOutQuad
0116         }
0117         PauseAnimation {
0118             duration: 500
0119         }
0120     }
0121
0122     SequentialAnimation {
0123         id: yAnim
0124         loops: Animation.Infinite
0125         YAnimator {
0126             target: image
0127             from: 0
0128             to: root.height - image.height
0129             duration: image.duration
0130             easing.type: Easing.InOutQuad
0131         }
0132         PauseAnimation {
0133             duration: 500
0134         }
0135         YAnimator {
0136             target: image
0137             from: root.height - image.height
0138             to: 0
0139             duration: image.duration
0140             easing.type: Easing.InOutQuad
0141         }
0142         PauseAnimation {
0143             duration: 500
0144         }
0145     }
0146 }