Forums

OverviewFelgo 2 Support (Qt 5) › OpacityMask rotation

Tagged: 

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #22134

    Phil

    Hello. I’m trying to create an effect where I apply a transformation to a mask object, however the OpacityMask seems to only apply the original mask without the rotation. Here is some example code:

    import Felgo 3.0
    import QtQuick 2.0
    import QtGraphicalEffects 1.0
    
    App {
        property real l: 100
    
        Rectangle {
            id: bg
            anchors.centerIn: parent
            width: l
            height: l
            color: "red"
            visible: false
        }
    
        Rectangle {
            id: mask
            anchors.centerIn: parent
            width: l
            height: l
            visible: false
    
            NumberAnimation on rotation {
                duration: 5000
                running: true
                from: 0
                to: 360
                loops: Animation.Infinite
            }
        }
    
        OpacityMask {
            width: l
            height: l
            anchors.centerIn: parent
            source: bg
            maskSource: mask
        }
    }

    Thanks,

    Phil

    #22160

    Alex
    Felgo Team

    Hi Phil,

    I think this is mostly about the sizes of your masked item, the mask itself and the output. Here is an example of an animated mask where you could maybe start from to get your desired effect:

    import Felgo 3.0
    import QtQuick 2.0
    import QtGraphicalEffects 1.0
    
    App {
      property real l: 100
    
      AppImage {
        id: bg
        anchors.fill: parent
        source: "https://doc.qt.io/qt-5/images/Original_bug.png"
        visible: false
      }
    
      Rectangle {
        id: mask
        anchors.fill: bg
        color: "transparent"
        visible: false
    
        Rectangle {
          anchors.centerIn: parent
          width: l
          height: l
          rotation: 45
          color: "black"
    
          NumberAnimation on rotation {
            duration: 5000
            running: true
            from: 0
            to: 360
            loops: Animation.Infinite
          }
        }
      }
    
      OpacityMask {
        anchors.fill: bg
        source: bg
        maskSource: mask
        cached: false
      }
    }

    Cheers,
    Alex

Viewing 2 posts - 1 through 2 (of 2 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support