SHARE
TWEET

Button animation

a guest Feb 21st, 2020 133 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import QtQuick 2.12
  2. import QtQuick.Window 2.12
  3.  
  4. Window {
  5.     visible: true
  6.     width: 340
  7.     height: 480
  8.  
  9.     Rectangle {
  10.         anchors.fill: button
  11.         rotation: button.rotation
  12.         radius: button.radius
  13.         border {
  14.             color: "gray"
  15.             width: 2
  16.         }
  17.     }
  18.  
  19.     Rectangle {
  20.         id: button
  21.         property double k: 0
  22.         height: 150
  23.         anchors.centerIn: parent
  24.         gradient: Gradient {
  25.             GradientStop {
  26.                 position: 0.00
  27.                 color: Qt.hsva((56-button.k)/360, 0.47, 0.93, 1)
  28.             }
  29.             GradientStop {
  30.                 position: 1.00
  31.                 color: Qt.hsva((195-button.k)/360, 0.57, 0.80, 1)
  32.             }
  33.         }
  34.  
  35.         SequentialAnimation {
  36.             id: gradientAnimation
  37.  
  38.             running: true
  39.             loops: Animation.Infinite
  40.  
  41.             NumberAnimation {
  42.                 target: button; property: "k"
  43.                 from: 0; to: 100
  44.                 duration: 1500
  45.                 easing.type: Easing.InQuad
  46.             }
  47.             NumberAnimation {
  48.                 target: button; property: "k"
  49.                 from: 100;  to: 0
  50.                 duration: 1500
  51.                 easing.type: Easing.OutQuad
  52.             }
  53.         } // SequentialAnimation {
  54.  
  55.         state: "Round"
  56.         states: [
  57.             State {
  58.                 name: "Round"
  59.                 PropertyChanges {
  60.                     target: button
  61.                     radius: height/2
  62.                     rotation: 35
  63.                     width: 150
  64.                 }
  65.             },
  66.             State {
  67.                 name: "Quad"
  68.                 PropertyChanges {
  69.                     target: button
  70.                     radius: 3
  71.                     width: 200
  72.                     opacity: 0
  73.                 }
  74.             }
  75.         ] // states: [
  76.  
  77.         transitions: [
  78.             Transition {
  79.                 NumberAnimation {
  80.                     properties: "radius, rotation, width, opacity"
  81.                     duration: 150
  82.                 }
  83.             }
  84.         ]
  85.     } // Rectangle { id: button
  86.  
  87.     Text {
  88.         id: textItem
  89.         text: button.state
  90.         font.pixelSize: 20
  91.         anchors.centerIn: button
  92.     }
  93.  
  94.     MouseArea {
  95.         anchors.fill: button
  96.         onClicked: {
  97.             button.state = button.state == "Round" ? "Quad" : "Round";
  98.         }
  99.     }
  100. }
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