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. Animated Button Border
Forum Update on Monday, May 27th 2025

Animated Button Border

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
borderborderimageqtcreatorqmlbutton
2 Posts 2 Posters 1.2k Views
  • 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.
  • V Offline
    V Offline
    VAIBHAVSRI
    wrote on 10 Apr 2018, 12:09 last edited by VAIBHAVSRI 4 Nov 2018, 05:34
    #1

    How can we make a Button's Border Animated in QML like shown below:

    [Snake like Movement]

    0_1523361242532_Animated GIF-downsized(1).gif

    1 Reply Last reply
    0
    • S Offline
      S Offline
      sierdzio
      Moderators
      wrote on 10 Apr 2018, 12:54 last edited by
      #2

      There is no straightforward API for this. I see several possibilities:

      • custom painting in QQuickPaintedItem
      • custom painting in QQuickItem
      • custom painting via GL shaders
      • custom painting in QML Canvas
      • a set of 4 animated Rectangle components, simulating the line. An ugly solution, but probably the easiest to do

      Perhaps BorderImage component can be forced to do an animation like that, but I doubt it.

      (Z(:^

      1 Reply Last reply
      2

      2/2

      10 Apr 2018, 12:54

      • Login

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