Makes sense. I cooked up something similar, but I don't like it at all :-)
Instead, I started creating a C++ class for sequencing these things,
but ran into a strange (?) issue.
C++ method:
void Sequencer::addItem(QDeclarativeItem *item)
{
item->setOpacity(1);
}
Representative QML, not verbatim:
Sequencer {
id: mySequencer
}
Text {
id: myText
height: 100
width: 100
opacity: 0
text: "abc"
Behavior on opacity {
NumberAnimation { to: 1; duration: 1000 }
}
MouseArea {
anchors.fill: parent
onClicked : {
mySequencer.addItem(myText)
}
}
}
This correctly changes the opacity but fails to run the NumberAnimation.
If I replace mySequencer.addItem(myText) with myText.opacity = 1, the
animation runs correctly.
Is this expected behaviour? If so, is there any way to force the
animation to be run?
Cheers,
Alex
On Wed, Aug 4, 2010 at 3:56 PM, <alan.westbr...@nokia.com> wrote:
> Interesting problem.
>
> I haven't seen anything that is designed for this type of thing, perhaps the
> guys in Brisbane have an idea for that.
>
> But, I have an idea for a way to do it:
>
> * Se up Element A onOpacityChanged to start playing sound
> * Know (before hand) how long the audio clip is.
>
> Widget {
> id: elementA
> opacity: 0
> onOpacityChanged: { if (1 == opacity) { soundElement.play() } }
> }
>
> SequentialAnimation {
> NumberAnimation { target: elementA; opacity: 1 }
> PauseAnimation { duration: soundLength }
> NumberAnimation { target: elementX: opacity: 1 }
> }
>
> Kinda hacky, but it could work.
>
> Alan
>
> On Aug 4, 2010, at 3:38 PM, ext Alex wrote:
>
>> Thanks, Alan.
>>
>> I have another question related to my example.
>>
>> As you saw, I am using SequentialAnimation to sequence animations, but
>> what if I want a non-animation in the sequence?
>>
>> For example, assume I've exposed a C++ "MediaPlayer" component to QML,
>> which has a playFile(path) slot and playbackCompleted() signal.
>>
>> Is there a declarative approach for me to express the following?
>>
>> 1. animate fade-in for element A
>> 2. play sound(S) and wait for completion
>> 3. animate fade-in for element B
>>
>> Cheers,
>> Alex
>>
>>
>> On Wed, Aug 4, 2010 at 2:51 PM, <alan.westbr...@nokia.com> wrote:
>>> I'm not sure if there is an easy declarative way to do that.
>>>
>>> You could probably write a javascript function that would take care of some
>>> of the typing, something like:
>>>
>>> Component.onCompleted: {
>>> for(var i = 0; i < target_id_list.count(); ++i)
>>> {
>>> var obj = numberAnimationComponent.create(animations)
>>> obj.target = target_id_list[i]
>>> var pause = pauseAnimationComponent.create(animation)
>>> }
>>>
>>> animations.start()
>>> }
>>>
>>> Probably best not to cut and paste that, my javascript skillz are lacking.
>>>
>>> You could probably write a C++ class that iterates over all it's child
>>> items and does the same thing when it becomes visible, or some other method
>>> is called though.
>>>
>>> HTH!
>>> Alan
>>>
>>>
>>> On Aug 4, 2010, at 11:42 AM, ext Alex wrote:
>>>
>>>> Hi Alan,
>>>>
>>>> Sorry for not being more clear.
>>>>
>>>> I have a large number of pages, with each page containing several
>>>> elements. The "fading in" behaviour applies to the elements on a
>>>> given page.
>>>>
>>>> The large number of pages is my motivation for encapsulating this
>>>> behaviour, so I don't have to re-implement it on every page.
>>>>
>>>> For example, I currently have a page that has 4 elements, and I fade
>>>> them in as follows:
>>>>
>>>> SequentialAnimation {
>>>> id: animations
>>>> NumberAnimation { target: e1; property: "opacity"; from: 0;
>>>> to: 1; duration: 600 }
>>>> PauseAnimation { duration: 1000 }
>>>> NumberAnimation { target: e2; property: "opacity"; from: 0;
>>>> to: 1; duration: 600 }
>>>> PauseAnimation { duration: 1000 }
>>>> NumberAnimation { target: e3; property: "opacity"; from: 0;
>>>> to: 1; duration: 600 }
>>>> PauseAnimation { duration: 1000 }
>>>> NumberAnimation { target: e4; property: "opacity"; from: 0;
>>>> to: 1; duration: 600 }
>>>> }
>>>>
>>>> For this to work, I also set opacity to 0 in the definitions of e1,
>>>> e2, e3, and e4.
>>>>
>>>> If I were using an imperative language, I would do something like:
>>>>
>>>> Fader fader;
>>>> fader.setFadeDuration(600)
>>>> fader.setPauseDuration(1000)
>>>> fader.addElement(e1)
>>>> fader.addElement(e2)
>>>> etc
>>>> fader.start()
>>>>
>>>> Is there an idiomatic way to do something similar in QML?
>>>>
>>>> Cheers,
>>>> Alex
>>>>
>>>>
>>>>
>>>> On Wed, Aug 4, 2010 at 11:24 AM, <alan.westbr...@nokia.com> wrote:
>>>>> So it's a slideshow and each element is a page, and you have hundreds of
>>>>> pages?
>>>>>
>>>>> Or do you have a few pages each with a bunch of elements?
>>>>>
>>>>> Or do you have hundreds of elements which pop in and out on a single page?
>>>>>
>>>>> Depending on what you mean, you could try putting your elements in a
>>>>> model and iterating over them setting opacity. You can also use a
>>>>> Behavior on opacity to enable fade in and out in the element definition.
>>>>>
>>>>> Or you can fade each page in and out, all child elements will follow the
>>>>> opacity of it's parent page.
>>>>>
>>>>> Alan
>>>>>
>>>>> On Aug 4, 2010, at 11:14 AM, ext Alex wrote:
>>>>>
>>>>>> Hi all,
>>>>>>
>>>>>> I am building an application that has a PowerPoint-like informational
>>>>>> component. To this end, I have a bunch of QML files that display
>>>>>> content progressively, with items fading in one at a time.
>>>>>>
>>>>>> In my current implementation, I give each object an id and set opacity
>>>>>> to 0. I then have a SequentialAnimation block that uses a
>>>>>> PropertyAnimation, individually referencing each id, to bring the
>>>>>> opacity to 1.
>>>>>>
>>>>>> This approach works but it is suboptimal (from a development point of
>>>>>> view), considering that I will have hundreds of these QML files. Is
>>>>>> there a better way to abstract/automate this behaviour?
>>>>>>
>>>>>> Thanks,
>>>>>> Alex
>>>>>> _______________________________________________
>>>>>> Qt-qml mailing list
>>>>>> Qt-qml@trolltech.com
>>>>>> http://lists.trolltech.com/mailman/listinfo/qt-qml
>>>>>
>>>>>
>>>
>>>
>
>
_______________________________________________
Qt-qml mailing list
Qt-qml@trolltech.com
http://lists.trolltech.com/mailman/listinfo/qt-qml
