img.Tween

[Bernd]

hi,
i looked into the Sample, nice!
who can please explain,
what means the params and what is possible for the values and what do this values:

target (looks like a x y start and end coordinate, there is a array possible, right?)

duration ( time to move the target?)

type (here i can set the values, explained in the link top the Sample? can i combine this values, like random,out ?)

repeat ( = loop? true or false? or a number how often repeat?)

yoyo (no idea, after move target up now move target backward? true or false? or a number?)
callback (calling after finishing Tween)

...i tried to feature out, but this are to many params and i dont know the values and combinations so its hard to see in which value im right and where are my mistakes...

at the and i will script an animation with a dot who moves from left to right like an heartbeat curve...followed from two other dots with lil more trans to fake the light out of the first dot, like a vita monitor xD

thank you and i hope you understand me xD

greetings from Berlin
Bernd

[Steve Garman]

Bernd,

I started writing a longer response to your post but I got distracted and am not going to get back to it for a while.

Here are some of the more salient points.

Tween is not the right tool for the project you describe.

It take a whole image control and moves, scales, rotates it etc to the position described by the target image. The big thing it does is to handle all the stages in between.

The start is the image itself.

The end is described by the target. Any coordinates that are arrays include points along the way. The last value is the destination.

duration ( time to move to the target)

type here you can set the values, explained in the link top the Sample. Only one value at a time makes sense.

repeat ( number how often repeat)

yoyo true/false. If true, reverse the whole procedure before finishing.

I suggest if you want to learn it you start will a very simple tween with no callback and gradually add to it.

[Steve Garman]

// this is the minimal code I would start with
// and add bits from the sample one at a time

function OnStart()
{
lay = app.CreateLayout( "absolute" );
img = app.CreateImage( "/Sys/Img/Hello.png", 0.2 );
lay.AddChild( img );
btn = app.CreateButton( "Test" );
btn.SetOnTouch( tweenTest );
btn.SetPosition( 0,0.8 );
lay.AddChild( btn );

app.AddLayout( lay );
}

function tweenTest()
{
var target = {x:0.8,y:0.8};
img.Tween( target,1000 );
}

[Bernd]

thank you Steve,
your descriptions will help me a lot :)

...what kind of scripting is the better way in your mind?

in the past i scripted already a lil lay with this art of animation.
but i used the draw method and it looks not really nice and it had a very lot of more lines...
...so my idea wss to script it with the new
tween method with using a small dot image...

is there one more way to realise this?

thank you and greetings from Berlin
Bernd

[Bernd]

thank you Steve for this nice
howtolearntweenstarterscript :))

its awesome to see how powerfull this new module is, and i am just on the begin of my study...by learning this module, i get a lot of ideas to use it in the future.

nice!
Bernd

[Bernd]

hmm... for my idea i dont get a curve with 3 images in same distance...somtimes the distance is very small, sometimes to big...

what will be a better way, is there a better way to realise my idea?

thanks
Bernd

[Symbroson Development]

You could also code it yourself ;)
using SetPosition() on absolute or SetMargins or SetPadding on linears - Padding is the right one I believe

[Synoptic 1]

Where can you find a reference to animation schedule string parameters? I found a graphical reference but names do not correspond.

[Dave Smart]

List of easing functions can be found here:-

    https://github.com/tweenjs/tween.js/blob/master/examples/03_graphs.html

(just chop off the 'TWEEN.Easing.' bit from the front.