[Interest] Can QML do this animation?

[Bo Thorsen]

On 02/18/2015 11:44 AM, Mark Gaiser wrote:
> On Wed, Feb 18, 2015 at 1:18 AM, Jason H <jhihn at gmx.com
> <mailto:jhihn at gmx.com>> wrote:
>
>     Yes, I think 80% of it is 100% do-able.
>     Rotation defined by bytes receiced, with bounce easing.
>     The only issue  is the drain animation. I'd probably use   Canvas
>     and mathmatically define the position of a set of control points as
>     a function of time. Feed those to a path, and you've got all the
>     makings of a drain effect.
>
> I actually don't mind the drain animation, it's nice, but i never
> imagine a progressbar to drain in that way :)
> But i do like to - try and - make a progressbar in the same fashion with
> a tooltip floating above it. Guess it's time to play with QML and see
> how far i can get with this.

You were worried about synchronizing the end of the progressbar with the 
location of the floater (hmm, that's probably a bad word for it) above 
it, right?

To fix this, create a property that's used by both the progressbar and 
the sign.

Item {
   property int currentX: progress / 100 * progressWidth

   Behaviour on currentX { ... }
}

If you want to rotate the sign but not the text, then encapsulate the 
item twice:

Item {
   id: floater

   Item { id: signPart: ... }
   Item { id: textPart; ... }
}

Then you can rotate the signPart without rotating the text.

Doing stuff like this is where QML is *fantastic*, and it's great fun to 
figure out how to do it.

Be careful to encapsulate everything in Items, or you will regret it 
later. You can have a look here for a bit of inspiration (shameless 
plug, it's my own Qt blog): http://www.vikingsoft.eu/blog/?p=173

Have fun :)

Bo Thorsen,
Director, Viking Software.

-- 
Viking Software
Qt and C++ developers for hire
http://www.vikingsoft.eu