Forums

Overview › Felgo 1 Support › smooth opacity animation not having an effect

Tagged: smooth opacity transition numberanimation

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

Author

Posts
September 9, 2013 at 00:57 #5649
strattonbrazil
I’m trying a simple transition where my scene smoothly fades out by mouse click. Setting the opacity to zero makes the screen disappear, but doesn’t do it smoothly like the animation isn’t having any effect. Am I doing something wrong?
```
Scene {
```
```
    id: splashScene
```
```
    width: 480
```
```
    height: 320
```
```
    Rectangle {
```
```
        color: "green"
```
```
        anchors.fill: parent
```
```
    }
```
```
    // the Component element is the same as defining a MouseJoint in a separate file - it does not create the Joint immediately but only defines the QML item structure
```
```
    // it is used to create a MouseJoint every time the user clicks on the scene
```
```
    // if clicked on the scene, a new box will be created
```
```
    MouseArea {
```
```
        anchors.fill: parent
```
```
        // a click is defined as a press followed by a release - only create a new box if the user didnt initially press on an existing body
```
```
        // thus the creation must be done in onReleased, if selectedBody is not null
```
```
                onClicked: {
```
```
                    console.log("onClick called")
```
```
                    splashScene.opacity = 0
```
```
                }
```
```
    Text {
```
```
        anchors.centerIn: parent
```
```
        text: "some text"
```
```
        font.pixelSize: 18
```
```
        color: "white"
```
```
    }
```
```
    transitions: [
```
```
        Transition {
```
```
            NumberAnimation  {
```
```
                property: "opacity"
```
```
                easing.type: Easing.InOutQuad
```
```
                duration: 10000
```
```
            }
```
```
        }
```
```
    ]
```
```
}
```
September 9, 2013 at 02:10 #5650

Alex
Felgo Team

Hi,

the first thing i notice is that the closing } of the MouseArea is missing (at the wrong spot), therefore the Text and the transitions elements are children of the MouseArea and not the Scene. This means the transition doesn’t effect the Scene properties. (Tip: CTRL+A followed by CTRL+I apllies the right indention to your whole code, this helps checking if all brackets are placed correct)

Let me know if this fixes your problem or else i will investigate the code closer.

Cheers,
Alex

September 9, 2013 at 03:26 #5651

strattonbrazil

I’m sorry, that was a copy/paste error. I don’t know about other people, but when I paste text into this box, I get a code box per line, which makes editing this code very difficult. I’ve linked what the code really looks like.

http://pastebin.com/w0eAN7mL

September 9, 2013 at 12:47 #5654
Alex
Felgo Team
I see, what browser are you using? Do you paste it right into the reply box or are you using the “Code”-button and paste it there?

Regarding your issue, i recommend using
```
Behavior on opacity {
  NumberAnimation { duration: 10000 }
}
```
instead of the transitions.

From the QML documentation: “A Transition defines the animations to be applied when a State change occurs.”
In your case you are not using a state-machine to switch the opacity, thats why the transitions have no effect.

Cheers,
Alex
September 9, 2013 at 15:46 #5656

strattonbrazil

I’m using Chrome on Ubuntu. I’m copying/pasting directly into the text box without using the code button. I usually go back afterward and format everything. If I copy/paste it into an editor like gedit and recopy/paste it here, I don’t get the code boxes, but then I lose all my indentation as well. 🙁

I tried using the “Behavior on opacity”, but that still didn’t have any effect. I updated my main qml code to have a couple of states, which I use to change the opacity of one scene to 1 and the opacity of the the other to 0. This seems to update the opacities fine, but again there’s no smooth transition. It’s just popping from one scene to the other. I know the states are working because onStateChanged is being called and that’s what is handling the opacity now. I’m just wondering why they still don’t animate with “Behavior on opacity” or “Transition”.

http://pastebin.com/fsz7xiT0

September 9, 2013 at 16:27 #5658
Alex
Felgo Team
The transitions component must be declared in the GameWindow (where the states are changed) not in the Scene. You can have a look at the MultiSceneMultiLevel tutorial (http://felgo.com/doc/howto-multi-scene-multi-level.html) or just its source code in the Examples folder of the SDK.

Furthermore you are not making use of a great feature of the state machine, the fact that it resets all PropertyChanges of a state when you leave the state.
```
Scene {
  id: splashScene
  opacity: 0 // invisible by default
  // ...
}
Scene {
  id: starmapScene
  opacity: 0 // invisible by default
  // ...
}

states: [
  State {
    name: "splash"
    // if the state of the GameWindow is "splash" the splashScene gets visible --> opacity to 1
    // in any other state the PropertyChange gets reset automatically --> opacity of splashScene back to 0
    PropertyChanges { target: splashScene; opacity: 1}
  },
  State {
    name: "starmap"
    // no need to reset the opacity of the splashScene here
    PropertyChanges { target: starmapScene; opacity: 1}
  }
]
```
Cheers,
Alex
September 9, 2013 at 17:30 #5659
strattonbrazil
I didn’t know that about state resetting the properties. That’s nice. Moving the transitions block to the game-world file still doesn’t do anything for the opacity fading out though.

http://pastebin.com/iffECSny

I see this line in the logs. Is this significant? I’m assuming it’s not, but figured I’d ask.
```
CCSpriteManager: Updated blend function and set to {GL_SRC=GL_ONE, GL_DST=GL_ONE} for sprite: 0x14f9ee0 
```
September 9, 2013 at 17:34 #5660
Alex
Felgo Team
```
import VPlay 1.0
import QtQuick 1.1

GameWindow {
  id: gameWindow
  width: 960
  height: 640

  state: "splash"

  states: [
    State {
      name: "splash"
      PropertyChanges { target: splashScene; opacity: 1}
    },
    State {
      name: "starmap"
      PropertyChanges { target: starmapScene; opacity: 1}
    }
  ]

  onStateChanged: console.log("HUD: switched to state '", state, "'")

  transitions: [
    Transition {
      NumberAnimation {
        property: "opacity"
        easing.type: Easing.InOutQuad
        duration: 10000
      }
    }
  ]

  Scene {
    id: splashScene
    width: 480
    height: 320
    opacity: 0
    Rectangle {
      color: "green"
      anchors.fill: parent
    }
    MouseArea {
      anchors.fill: parent
      onClicked: {
          console.log("onClick called")
          gameWindow.state = "starmap"
      }
    }
    Text {
      anchors.centerIn: parent
      text: "Path to Orion"
      font.pixelSize: 18
      color: "white"
    }
  }

  Scene {
    id: starmapScene
    opacity: 0
    width: 480
    height: 320
    Rectangle {
      color: "red"
      anchors.fill: parent
    }
  }
}
```
This is my Code that works fine.