SHARE
TWEET

Anchors animation in QML

a guest Jan 4th, 2014 63 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import QtQuick 2.0
  2.  
  3. Rectangle {
  4.     width: 360; height: 360;
  5.     color: "grey"
  6.     Text {
  7.         anchors.centerIn: parent
  8.         text: "MAIN VIEW"
  9.     }
  10.  
  11.     Item {
  12.         id: fakeLeftPanel
  13.         anchors {
  14.             top: parent.top
  15.             bottom: parent.bottom
  16.             right: parent.left
  17.         }
  18.         height: leftPanel.height
  19.         width: leftPanel.width
  20.     }
  21.  
  22.     Rectangle {
  23.         id: leftPanel
  24.         width: 50
  25.         color: "green"
  26.         anchors {
  27.             top: parent.top
  28.             bottom: parent.bottom
  29.         }
  30.         Text {
  31.             anchors.centerIn: parent
  32.             text: "PANEL"
  33.         }
  34.         state: "show"
  35.  
  36.         states: [ State {
  37.                 name: "show"
  38.                 AnchorChanges { target: leftPanel; anchors.left: parent.left }
  39.             },
  40.             State {
  41.                 name: "hide"
  42.                 AnchorChanges { target: leftPanel; anchors.left: fakeLeftPanel.left }
  43.             } ]
  44.         transitions: Transition {
  45.             AnchorAnimation { duration: 200 }
  46.         }
  47.     }
  48.  
  49.     MouseArea {
  50.         anchors.fill: parent
  51.         onClicked: {
  52.             leftPanel.state = (leftPanel.state === "show")
  53.                     ? "hide"
  54.                     : "show"
  55.         }
  56.     }
  57. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top