tools/qmleasing/easing.qml

   1 /****************************************************************************
   2 **
   3 ** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
   4 ** All rights reserved.
   5 ** Contact: http://www.qt-project.org/
   6 **
   7 ** This file is part of the QtDeclarative module of the Qt Toolkit.
   8 **
   9 ** $QT_BEGIN_LICENSE:LGPL$
  10 ** GNU Lesser General Public License Usage
  11 ** This file may be used under the terms of the GNU Lesser General Public
  12 ** License version 2.1 as published by the Free Software Foundation and
  13 ** appearing in the file LICENSE.LGPL included in the packaging of this
  14 ** file. Please review the following information to ensure the GNU Lesser
  15 ** General Public License version 2.1 requirements will be met:
  16 ** http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
  17 **
  18 ** In addition, as a special exception, Nokia gives you certain additional
  19 ** rights. These rights are described in the Nokia Qt LGPL Exception
  20 ** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
  21 **
  22 ** GNU General Public License Usage
  23 ** Alternatively, this file may be used under the terms of the GNU General
  24 ** Public License version 3.0 as published by the Free Software Foundation
  25 ** and appearing in the file LICENSE.GPL included in the packaging of this
  26 ** file. Please review the following information to ensure the GNU General
  27 ** Public License version 3.0 requirements will be met:
  28 ** http://www.gnu.org/copyleft/gpl.html.
  29 **
  30 ** Other Usage
  31 ** Alternatively, this file may be used in accordance with the terms and
  32 ** conditions contained in a signed written agreement between you and Nokia.
  33 **
  34 **
  35 **
  36 **
  37 **
  38 ** $QT_END_LICENSE$
  39 **
  40 ****************************************************************************/
  41
  42 import QtQuick 2.0
  43 import EasingPlot 1.0
  44
  45 Rectangle {
  46     width: 775; height: 550
  47
  48     function precision(n)
  49     {
  50         var str = n.toPrecision(3);
  51         while (str.length > 1 && (str[str.length - 1] == "0" || str[str.length - 1] == "."))
  52             str = str.substr(0, str.length - 1);
  53         return str;
  54     }
  55
  56     function updateEasing() {
  57         var ini = Math.min(100, Math.max(0, Number(in_inf.text)));
  58         var outi = Math.min(100, Math.max(0, Number(out_inf.text)));
  59
  60         var ins = Number(in_slope.text);
  61         var outs = Number(out_slope.text);
  62
  63         var p1 = [ (ini / 100), (ini / 100) * ins ];
  64         var p2 = [ 1 - (outi / 100), 1 - (outi / 100) * outs ];
  65
  66         text.text = "[ " + precision(p1[0]) + ", " + precision(p1[1]) + ", " + precision(p2[0]) + ", " + precision(p2[1]) + ", 1, 1 ]";
  67     }
  68
  69     Rectangle {
  70         id: border
  71         width: 500; height: 500
  72         x: 25; y: 25
  73         border.color: "lightsteelblue"
  74         border.width: 3
  75         radius: 5
  76         color: "transparent"
  77
  78         EasingPlot {
  79             id: plot
  80
  81             anchors.centerIn: parent
  82             width: parent.width - 10
  83             height: parent.height - 10
  84
  85             easing.type: "Bezier"
  86             easing.bezierCurve: eval(text.text)
  87         }
  88
  89     }
  90
  91     Text {
  92         text: "<u>After Effects curve</u>"
  93         anchors.horizontalCenter: text.horizontalCenter
  94         anchors.bottom: column.top
  95         anchors.bottomMargin: 14
  96     }
  97
  98     Column {
  99         id: column
 100
 101         y: 70
 102         anchors.right: parent.right
 103         anchors.rightMargin: 25
 104         spacing: 5
 105         TextField {
 106             id: in_inf
 107             focus: true
 108             name: "Input influence:"
 109             text: "33"
 110             anchors.right: parent.right
 111             KeyNavigation.tab: in_slope
 112             KeyNavigation.backtab: text
 113             onTextChanged: updateEasing();
 114         }
 115         TextField {
 116             id: in_slope
 117             name: "Input slope:"
 118             text: "0"
 119             anchors.right: parent.right
 120             KeyNavigation.tab: out_inf
 121             KeyNavigation.backtab: in_inf
 122             onTextChanged: updateEasing();
 123         }
 124         TextField {
 125             id: out_inf
 126             name: "Output influence:"
 127             text: "33"
 128             anchors.right: parent.right
 129             KeyNavigation.tab: out_slope
 130             KeyNavigation.backtab: in_slope
 131             onTextChanged: updateEasing();
 132         }
 133         TextField {
 134             id: out_slope
 135             name: "Output slope:"
 136             text: "0"
 137             anchors.right: parent.right
 138             KeyNavigation.tab: text
 139             KeyNavigation.backtab: out_info
 140             onTextChanged: updateEasing();
 141         }
 142     }
 143
 144     Text {
 145         text: "<u>QML Bezier curve</u>"
 146         anchors.horizontalCenter: text.horizontalCenter
 147         anchors.bottom: text.top
 148         anchors.bottomMargin: 10
 149     }
 150
 151     TextEdit {
 152         id: text
 153         x: 200
 154         width: 200
 155         height: 200
 156
 157         Rectangle {
 158             x: -2; y: -2
 159             width: parent.width + 4
 160             height: parent.height + 4
 161             color: "transparent"
 162             border.color: text.activeFocus?"green":"lightgreen"
 163
 164             border.width: 3
 165             radius: 5
 166         }
 167
 168         wrapMode: "WordWrap"
 169
 170         anchors.top: column.bottom
 171         anchors.topMargin: 50
 172         anchors.right: column.right
 173         KeyNavigation.tab: in_inf
 174         KeyNavigation.backtab: out_slope
 175     }
 176
 177
 178     Item {
 179         anchors.left: text.left
 180         anchors.top: text.bottom
 181         anchors.topMargin: 35
 182         width: text.width
 183         height: rect.height
 184
 185         Rectangle {
 186             color: "gray"
 187             width: 50; height: 50
 188             id: rect
 189
 190             NumberAnimation on x {
 191                 id: animation
 192                 running: false
 193                 easing: plot.easing
 194                 duration: 1000
 195             }
 196
 197             radius: 5
 198         }
 199
 200         MouseArea {
 201             anchors.fill: parent
 202             onClicked: {
 203                 if (rect.x < 5) {
 204                     animation.to = text.width - rect.width;
 205                 } else {
 206                     animation.to = 0;
 207                 }
 208                 animation.start();
 209             }
 210         }
 211
 212         Text {
 213             anchors.centerIn: parent
 214             text: "Click to Try"
 215         }
 216     }
 217
 218     Component.onCompleted: updateEasing();
 219 }