I want to know the best way to make an animation with scripts without using bindings.
I want to know the best way to make an animation with scripts without using bindings.
An example when using bindings on an icon:
Binding “Left”
Animate (‘$Left’,1000,”ac”,1000″)
Binding “Top”
Animate (‘$Top’,1000,”de”,1000″)
My question is how a script, doing the same thing, would look like.
Thank you!
« Missing Icons (Previous Post)
(Next Post) This morning, without any action on my part, a bunch of icons changed to generic android icons. »
D5 Creation
For how to do animations in JavaScript in general a Google search should be enough. The difference in LL is you would use the value you animate in a API call, which would be item.setPosition(interpolatedX, interpolatedY) for your example (you can get the item the script is run from with getEvent().getItem() ).
Okay. I guess I need to be more specific about my question. I know how to use Google, THIS IS GOOGLE+.
I’m trying to learn JavaScript and have used other languages before. And I know there is many ways to solve a problem.
Anyway, my guess is that a script would look like something like this:
——
Shortcut1.getPosition(x,y)
var i=0
Var Timer=setInterval(MoveThings,1000)
function()MoveThings(){
if (i<300){i=i++};
Shortcut1.setPosition(x+i,y+i);
else {clearInterval(Timer)};
——
If someone could please show a good example of a script doing exactly what I asked for, without being rude, I would really appreciate it.
Thank you
First of all: I didn’t mean to be rude or anything. I referred you to Google because I’m not an expert at JavaScript animation either, so I can’t teach you much. Besides, in my experience I learn more from writing a piece of code myself than copying it from someone else.
Now back to your question: the idea of your example is right, but I think setInterval doesn’t work in LL or there is some other reason it’s better to call setTimeout recursively instead of using setInterval.
I can’t think of a good example script out of the top of my head that does animations the way you want. I don’t know if you found this already, but in case you haven’t: there is a script repository full of good script examples (just not those you’re looking I think) here: lightninglauncher.com – script_repository [Lightning Launcher]
Good luck!
That’s okay Colin. I’m just very allergic to answers involving google, when the question is specific and in the right forum. It keeps people from entering the world of the topic. Because they are afraid to ask questions.
As an example, you can’t Google how to use arrays in LL variables. Because it’s only possible in LL scripts.
But you can (maybe) solve the problem by changing the array to a string, and then transform the variable, in LL, to get what you want.
——
var String = Array.toString();
LL.getVariables().edit();
editor.setString(“String”,String);
// String in LL will look like “Array[0],Array[1],…Array(x)”
——
I hope someone can put some light on this. If I could see the specific script I asked for, then I would have a good base to start with. Copy and Paste is a friend 😉
I can also say that the last time I tried to use timers, LL crashed. And I had to reinstall LL. And of course I didn’t have a backup for my work. 🙁
What you say is true, but I only mentioned Google for the part of your question that isn’t specific to LL and I think Google can answer better than this forum, because as far as I know no one has made a general good example of an animation script yet. But maybe I should have added that to my initial answer then.
If you really want to see a script that uses animation before you start writing your own there is the material click animation in the script repository (lightninglauncher.com – script_material_click_effect [Lightning Launcher]). It also uses setTimeout, but I think it doesn’t serve as a good general example because it gets quite a bit more complicated than a general example needs to be.
There is also the Lagrange interpolator (http://www.lightninglauncher.com/wiki/doku.php?id=script_interpolation_lagrange), which doesn’t use setTimeout, but animates item movement a different way, so it might also be worth looking at.
Still I think you’ve given the best example of how to do animations in LL yourself in this thread, except for the use of setInterval instead of setTimeout, so I’ll just help you with that:
——
Shortcut1.getPosition(x,y)
var i=0, Timer;
function MoveThings(){
if (i<300){
i++;
Shortcut1.setPosition(x+i,y+i);
Timer = setTimeout(MoveThings,1000);
else {
clearTimeout(Timer)
}
}
——
Oh and btw, I think this has been said in this community before, but you can put (almost) any object (including arrays) in a LL variable by using JSON.stringify(object) and JSON.parse(string)
Yes, that’s also a way to solve my array example.
The problem with my animation is much harder to solve without the use of setInterval. Since setTimout doesn’t loop the same way.
But your example gave me a good start.
I’ll explain why it’s not easy.
—
var i=0
var x=0
function DoThings (){
x=i};
for (i=0;i<10;i++){
setTimeout (DoThings,1000);
—
This won’t put increase x by 1 each second. Instead it will put 1*10 in x after one second.
It can be solved and I’m working on it. When it’s ready, I can put up some, step by step, how I’ve solved it. To see if there is a better way to do it.
I’m still a newbie with Javascript so my solution will probably not be even close to the best/easiest way.
This is far from finished, but this is what I’ve done so far.
It’s only a linear animation. And I haven’t figured out the others yet.
And remember that I’m still new to JavaScript.
Every tips can be helpful.
——
// Startposition
var StartX=-2160;
var StartY=1000;
// Incremental value from Start
var MoveToX=600;
var MoveToY=300;
// Animation time and delay
var Time=5000;
var Delay=1000;
if (MoveToX+MoveToY==0 ){Time=0};
// Calculation
var PosX=StartX;
var PosY=StartY;
// The function
function Linear(){
LL.getCurrentDesktop().getItemByName(“TestIcon”).setPosition(PosX,PosY);
var StepX=(MoveToX/Time);
var StepY=(MoveToY/Time);
PosX=PosX+StepX;
PosY=PosY+StepY
};
// Timeloop
for(i=0;i< =Time;i=i+1)
setTimeout(Linear,(i+Delay)
);
——
if have 7 tips for you:
1: You use the deprecated LL class. Instead of LL, you should use getActiveScreen()
2: You are looking up the item you want to animate every time Linear is executed. This is inefficient because of 3 reasons:
2.1 You are calling functions of which the result could be cached multiple times
2.2 You are calling an function from the LL API
2.3 You are calling a function that actually has to loop through all the items in a container to find the one you’re looking for
3: you are recalculating the stepsize every time linear gets executed. This values stays the same over function iterations and can therefore be cached outside the function scope.
4: you might know this, but you can get the startposition of the item like this:
startX = item.getPositionX();
startY = item.getPositionY();
5: you are naming variables and functions with an upper case first letter (also knows as PascalCase), but the convention in Javascript is to name them with a lower case first letter (also known as lowerCamelCase)
6: you are starting 5000 timeouts in your timeloop. This can be done much more eficiently by starting the timeout of the next function at the end of the Linear function.
7: LL’s javascript engine doesn’t automatically clear timeouts, so you’ll have to this yourself with clearTimeout(timeoutId);
When you apply these tips to your script you should get something like this:
// Startposition
// tip 1 and 2
var item = getActiveScreen().getCurrentDesktop().getItemByName(“TestIcon”);
// tip 4
startX = item.getPositionX();
startY = item.getPositionY();
// Incremental value from Start
var moveToX=600;
var moveToY=300;
// Animation time and delay
var time=5000;
var delay=1000;
if (moveToX+moveToY==0 ){time=0};
// Calculation
var posX=startX;
var posY=startY;
var stepX=(moveToX/time);
var stepY=(moveToY/time);
var i = 0;
// The function
function linear(){
//tip 7
if(typeof timeoutId != ‘undefined’)
clearTimeout(timeoutId);
posX=posX+stepX;
posX=posY+stepY
item.setPosition(posX,posY);
// tip 6
i ++;
if(i < time)
timeoutId = setTimeout(linear, 1);
};
var timeoutId = setTimeout (linear, delay)
I think that should work. Good luck with it 🙂
Thanks a lot for the tips and that you took the time to help me.
I had no idea about some of the things you pointed at, and it’s good to know about them.
I already new that some of the things was bad in the script, but didn’t have a better solution when I wrote it.
Still a lot of work left, but also a step closer to what I want.
I’ve also figured out the “ac” and “de” part and made it a little more flexible.
To be continued…