• Home

CarChallenge 3D Demo

 import QtQuick 2.0

 // custom "morphing" button
 // it changes its shape from "x" to "<-" and "="
 Item {
   id: menuButton
   width: 40
   height: 40
   enabled: visible

   signal clicked

   function toArrow() {
     toArrowAnim.start()
   }
   function toDefault() {
     toDefaultAnim.start()
   }
   function toCross() {
     toCrossAnim.start()
   }

   MouseArea {
     anchors.fill: parent
     onClicked: {
       menuButton.clicked()
     }
   }
   Rectangle {
     anchors.fill: parent
     color: "black"
     opacity: 0.7
   }
   Item {
     width: 26
     height: 20
     anchors.centerIn: parent
     Rectangle {
       id: rect1
       width: 26
       height: 4
       color: "#fff"
       transformOrigin: Item.TopRight
     }
     Rectangle {
       id: rect2
       width: 26
       height: 4
       color: "#fff"
       y: 8
     }
     Rectangle {
       id: rect3
       width: 26
       height: 4
       color: "#fff"
       y: 16
       transformOrigin: Item.BottomRight
     }
   }

   ParallelAnimation {
     id: toArrowAnim
     NumberAnimation {
       target: rect1
       property: "x"
       to: -4
     }
     NumberAnimation {
       target: rect1
       property: "rotation"
       to: -45
     }
     NumberAnimation {
       target: rect1
       property: "width"
       to: 14
     }
     NumberAnimation {
       target: rect3
       property: "x"
       to: -4
     }
     NumberAnimation {
       target: rect3
       property: "rotation"
       to: 45
     }
     NumberAnimation {
       target: rect3
       property: "width"
       to: 14
     }
     NumberAnimation {
       target: rect2
       property: "x"
       to: 3
     }
     NumberAnimation {
       target: rect2
       property: "width"
       to: 23
     }
     NumberAnimation {
       target: rect2
       property: "opacity"
       to: 1
     }
   }
   ParallelAnimation {
     id: toDefaultAnim
     NumberAnimation {
       target: rect1
       property: "x"
       to: 0
     }
     NumberAnimation {
       target: rect1
       property: "rotation"
       to: 0
     }
     NumberAnimation {
       target: rect1
       property: "width"
       to: 26
     }
     NumberAnimation {
       target: rect3
       property: "x"
       to: 0
     }
     NumberAnimation {
       target: rect3
       property: "rotation"
       to: 0
     }
     NumberAnimation {
       target: rect3
       property: "width"
       to: 26
     }
     NumberAnimation {
       target: rect2
       property: "x"
       to: 0
     }
     NumberAnimation {
       target: rect2
       property: "width"
       to: 26
     }
     NumberAnimation {
       target: rect2
       property: "opacity"
       to: 1
     }
   }
   ParallelAnimation {
     id: toCrossAnim
     NumberAnimation {
       target: rect1
       property: "x"
       to: -4
     }
     NumberAnimation {
       target: rect1
       property: "rotation"
       to: -45
     }
     NumberAnimation {
       target: rect1
       property: "width"
       to: 24
     }
     NumberAnimation {
       target: rect3
       property: "x"
       to: -4
     }
     NumberAnimation {
       target: rect3
       property: "rotation"
       to: 45
     }
     NumberAnimation {
       target: rect3
       property: "width"
       to: 24
     }
     NumberAnimation {
       target: rect2
       property: "opacity"
       to: 0