Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Floating Color Animation
Forum Updated to NodeBB v4.3 + New Features

Floating Color Animation

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
2 Posts 2 Posters 247 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • ? Offline
    ? Offline
    A Former User
    wrote on last edited by
    #1

    Hello, I want to give a floating color animation to a text, as in the picture. How can I apply this to a Label?

    aa52a8f9-7ad3-456b-8d14-cf2ba77e99f2-image.png

    L 1 Reply Last reply
    0
    • ? A Former User

      Hello, I want to give a floating color animation to a text, as in the picture. How can I apply this to a Label?

      aa52a8f9-7ad3-456b-8d14-cf2ba77e99f2-image.png

      L Offline
      L Offline
      lemons
      wrote on last edited by
      #2

      @NullByte you could e.g. use a LinearGradient to fill a non-visible Label:

      Window {
          width: 640
          height: 480
          visible: true
          color: "white"
      
          Rectangle {
              anchors.centerIn: parent
              width: text.width + 20
              height: text.height + 20
              color: "#2D0B5A"
              Label {
                  id: text
                  anchors.centerIn: parent
                  font.pointSize: 42
                  text: "Win by saving."
                  visible: false
              }
              LinearGradient {
                  anchors.fill: text
                  start: Qt.point(text.x, text.y)
                  end: Qt.point(text.x + text.width, text.y + text.height)
                  source: text
                  gradient: Gradient {
                      GradientStop {
                          position: 0
                          color: "#52C7F6"
                      }
                      GradientStop {
                          position: 0.3
                          color: "#FF77E1"
                      }
                  }
              }
          }
      }
      
      1 Reply Last reply
      1

      • Login

      • Login or register to search.
      • First post
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved