[Martin]

I have a Platform baseclass like this:

EntityBase {
    property alias platformImage: platformImage

    entityType: "platform"

    width: 100
    height: 15

    Rectangle {
        id: platformImage
        anchors.fill: parent
        color: "white"

        Behavior on opacity {
            NumberAnimation {property: "opacity"; duration: 3000; easing.type: Easing.InQuart}
        }
    }

However, the Behaviour on opacity really only belongs to a particular subclass of Platform.

And I can imagine that I might want other behaviours for other subclasses.

How can I create a subclass with different behaviour, something like this:

Platform {
    platformImage.color: "red"
    platformImage.Behaviour on opacity {...}
}

 

(Note that the over-riding of the platformImage.color works the way I need, which is good, just can’t see how to do the behaviour)

 

• This topic was modified 8 years, 5 months ago by  GreenAsJade.
• This topic was modified 8 years, 5 months ago by  GreenAsJade.

[ChristianFelgo Team]

Hi Martin,

you have 2 options:

1.) Create the properties that you want to expose and use these in your animations/behaviors.

2.) Expose the whole animation with an alias.

The 2nd option is less good, because you then expose internals of the implementation.

Here is an example:

EntityBase {
    id: platform
    property alias platformImage: platformImage

    // option1 - better, because you can change the internal implementation as you just expose the API
    property int animationDuration: 3000 //default value, can be changed by the outside

    // option 2 (less good, because you expose internal implementation details to the outside)
    property alias anim: platformImage.numberAnimation

    entityType: "platform"

    width: 100
    height: 15

    Rectangle {
        id: platformImage
        anchors.fill: parent
        color: "white"

        Behavior on opacity {
            NumberAnimation {
 id: numberAnimation
property: "opacity"; duration: platform.animationDuration; easing.type: Easing.InQuart}
        }
    }
}

// then accessible like that:
Platform {
  //option 1
  animationDuration: 4000
  
  //option 2
  anim.duration: 4000
}

 

Cheers, Chris

[Martin]

Thanks for these examples – they are good options to have.

I think my question was not quite asking what I wanted to ask precisely.

Actually, I want to _add_ the behaviour in the subclass.   The baseclass has no reason to have “Behaviour on opacity”.   A later subclass may need Behaviour on width (as an example).

Could I add this behaviour in the subclass?

(That’s what the example not-correct code that I gave was trying to illustrate)

 

 

[AlexFelgo Team]

Hi,

the correct syntax is:

Platform {
    platformImage.color: "red"
    Behaviour on platformImage.opacity {...}
}

Cheers,
Alex

[Martin]

That’s great, thanks!

Before I had in the base class:

 

        Behavior on opacity {
            NumberAnimation {property: "opacity"; duration: 3000; easing.type: Easing.InQuart}

 

I put this, instead, in the derived class:

 

        Behavior on platformImage.opacity {
            NumberAnimation {property: "platformImage.opacity"; duration: 3000; easing.type: Easing.InQuart}

 

and it didn’t work.

I simplified it to this:

 

        Behavior on platformImage.opacity {
            NumberAnimation { duration: 3000; easing.type: Easing.InQuart}

 

and it does work.

 

But I wonder: how would I refer to some other property of platformImage to animate, if I wanted?

[AlexFelgo Team]

Hi Martin,

If you are defining a Behavior on a property, you already defined the property that you want to animate, so it does not make sense to specify the “property” in the animation after.

If you want to animate e.g. the width of that image then you would call:

 Behavior on platformImage.width{
            NumberAnimation { duration: 3000; easing.type: Easing.InQuart}
}

Or you just define an animation like this and start it instead of automatically running an animation on every property change like the Behavior does:

NumberAnimation {
  id: widthAnimation
  target: platformImage
  property: "width";
  duration: 3000;
  easing.type: Easing.InQuart
}

And then use it like this:

widthAnimation.to = 200
widthAnimation.start()

Cheers,
Alex

• This reply was modified 8 years, 4 months ago by  Alex.