contents/ui/TopBarAnim.qml

0001 /* Copyright 2016 Aditya Mehra <aix.m@outlook.com>
0002
0003     This library is free software; you can redistribute it and/or
0004     modify it under the terms of the GNU Lesser General Public
0005     License as published by the Free Software Foundation; either
0006     version 2.1 of the License, or (at your option) version 3, or any
0007     later version accepted by the membership of KDE e.V. (or its
0008     successor approved by the membership of KDE e.V.), which shall
0009     act as a proxy defined in Section 6 of version 3 of the license.
0010
0011     This library is distributed in the hope that it will be useful,
0012     but WITHOUT ANY WARRANTY; without even the implied warranty of
0013     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
0014     Lesser General Public License for more details.
0015
0016     You should have received a copy of the GNU Lesser General Public
0017     License along with this library.  If not, see <http://www.gnu.org/licenses/>.
0018 */
0019
0020 import QtQuick 2.9
0021
0022 Item {
0023
0024    property alias topanimrun: seqrun.running
0025
0026    //anchors.fill: parent
0027    function wsistalking() {
0028                 seqrun.running = true
0029                 canvasmiddlegraphics.visible = !canvasmiddlegraphics.visible
0030             }
0031
0032     SequentialAnimation{
0033         id: numanimtest
0034
0035     SequentialAnimation {
0036
0037     PropertyAnimation {
0038         id: n1test
0039         target: statusId
0040         property: "opacity"
0041         from: 1;
0042         to: 0;
0043         duration: 3000
0044         }
0045
0046     PropertyAnimation {
0047         id: n1testr
0048         target: statusId
0049         property: "visible"
0050         from: true;
0051         to: false;
0052         duration: 2000
0053         }
0054
0055     PropertyAnimation {
0056         id: n1testn
0057         target: statusId
0058         property: "opacity"
0059         from: 0;
0060         to: 1;
0061         duration: 20
0062         }
0063     }
0064
0065     NumberAnimation{
0066         id: n2testop
0067         target: canvasmiddlegraphics
0068         property: "opacity"
0069         from: 0;
0070         to: 1;
0071         duration: 300
0072     }
0073 }
0074
0075    SequentialAnimation {
0076         id: seqrun
0077
0078         ParallelAnimation {
0079         NumberAnimation{
0080         target: canvasmiddlegraphics
0081         property: "i"
0082         from: -50
0083         to: -70
0084         duration: 200
0085         }
0086
0087         SequentialAnimation {
0088             loops: 10
0089
0090             ParallelAnimation {
0091             NumberAnimation{
0092             target: canvasmiddlegraphics
0093             property: "amplitude"
0094             from: 0
0095             to: 10 + Math.floor(Math.random() * 6) + 1
0096             duration: 12
0097             }
0098                 }
0099
0100             ParallelAnimation {
0101             NumberAnimation{
0102             target: canvasmiddlegraphics
0103             property: "amplitude"
0104             from: 10
0105             to: 16 + Math.floor(Math.random() * 2) + 1
0106             duration: 12
0107
0108                 }
0109             }
0110
0111             ParallelAnimation{
0112             NumberAnimation{
0113             target: canvasmiddlegraphics
0114             property: "amplitude"
0115             from: 16 + Math.floor(Math.random() * 2) + 1
0116             to: 10 + Math.floor(Math.random() * 6) + 1
0117             duration: 12
0118                 }
0119                 }
0120
0121             ParallelAnimation {
0122             NumberAnimation{
0123             target: canvasmiddlegraphics
0124             property: "amplitude"
0125             from: 10 + Math.floor(Math.random() / 6) + 1
0126             to: 0
0127             duration: 12
0128                 }
0129
0130             }
0131             }
0132         }
0133
0134         ParallelAnimation {
0135
0136         PropertyAnimation {
0137             target: canvasmiddlegraphics
0138             property: "visible"
0139             from: true
0140             to: false
0141             duration: 20
0142             }
0143         }
0144     }
0145
0146     Canvas {
0147                           id:canvasmiddlegraphics
0148                           width: parent.width
0149                           height: parent.height
0150                           anchors.verticalCenter: parent.verticalCenter
0151                           anchors.horizontalCenter: parent.horizontalCenter
0152                           visible: true
0153                           opacity: 100
0154
0155                           property color strokeStyle:  Qt.darker(fillStyle, 1.5)
0156                           property color fillStyle: Qt.darker("white", 1.1)
0157                           property real lineWidth: 1.6
0158                           property bool fill: true
0159                           property bool stroke: false
0160                           property real alpha: 1.0
0161                           property real scale : 1
0162                           property real rotate : 0
0163                           property real i: -50
0164                           property real waveSpeed: 10
0165                           property real amplitude: 0
0166                           antialiasing: true
0167                           smooth: true
0168
0169                           onLineWidthChanged:requestPaint();
0170                           onFillChanged:requestPaint();
0171                           onStrokeChanged:requestPaint();
0172                           onScaleChanged:requestPaint();
0173                           onRotateChanged:requestPaint();
0174                           onIChanged: requestPaint();
0175
0176                           renderTarget: Canvas.FramebufferObject
0177                           renderStrategy: Canvas.Cooperative
0178
0179
0180               onPaint: {
0181                               var ctxside = canvasmiddlegraphics.getContext('2d');
0182                               var hCenter = width * 0.5
0183                               var vCenter = height * 0.5
0184                               var size = 12
0185                               var period = 15;
0186                               var dotSpeed = 5;
0187
0188                               function draw_line(i){
0189                                   var oStartx=10;
0190                                   var oStarty=( height / 2 )
0191                                   ctxside.beginPath();
0192                                   ctxside.moveTo( oStartx, oStarty + amplitude * Math.sin( x / period + ( i  / 5 ) ) );
0193                                   ctxside.lineWidth = 1;
0194                                   ctxside.strokeStyle = 'white';
0195
0196                                   for(var Vx = oStartx; Vx < width * 1; Vx++) {
0197
0198                                       var Vy = amplitude * Math.sin( Vx / period + ( i  / 5 + Math.floor(Math.random() * 2) + 0));
0199                                       ctxside.lineTo( oStartx + Vx + 0.2,  oStarty + Vy);
0200                                   }
0201
0202                                    ctxside.stroke();
0203                               }
0204
0205                               function render(){
0206                                   var st = i
0207                                   ctxside.clearRect(0, 0, width, height);
0208                                   draw_line(st)
0209
0210                               }
0211                   render();
0212               }
0213
0214     }
0215
0216 }