Is it possible to use something like setInterval in a script?
Is it possible to use something like setInterval in a script? I’ve been trying to create a simple animation that fades text transparency from 0 to 255 every second. It would seem that setInterval is the best way to do this, but I have been receiving an error. Here’s my code:
i=”0″;
function setI(i){
if(i=”0″){i=”255″}
else if(i=”255″){i=”0″};
return animate(i);}
setInterval(setI(),1000);
]]>
D5 Creation
< ![CDATA[
what error are you receiving?
]]>
< ![CDATA[
I don’t know what language do you know, or how did you made that code. But lightning uses JavaScript, and (although there is no syntax error) that code is wrong in some places.
Are you making a binding? If so tell us and we will help, that’s not the way to do it.
Answering your question, setInterval is not a defined function. setTimeout is.
]]>
< ![CDATA[
TrianguloY Karsten Franke Thanks for the reply! I am attempting to use a binding for the transparency property, and am scripting it with JavaScript. The reason I was thinking setInterval() would work is that I need the animation to be perpetual, never ending. The error stated that setInterval is not defined. I just realized that I had the animate() property in the wrong location, so here is my proposed code, although it won’t work without setInterval() functioning properly:
i=”0″;
function setI(i){
if(i=”0″){i=”255″}
else if(i=”255″){i=”0″};
return i;}
setInterval(animate(setI()),1000);
]]>
< ![CDATA[
For reference: http://www.w3schools.com/js/js_timing.asp
]]>
< ![CDATA[
First: I recommend you to check JavaScript syntax with more details.
i=”0″;
is syntactically right, but it’s better to use
var i=”0″;
if(i=”0″)…
is again syntactically right, but I’m 99.99% sure that’s not what you want. ‘=’ is the assignment operator, even inside ifs. To make a comparison you need to use
if(i==”0″)…
animate is a built in function. And you are using it wrong. Check the syntax here: http://www.lightninglauncher.com/wiki/doku.php?id=bindings#animation
Last: although it is good to you to test and try to find the solution yourself, the proposed code is wrong in general terms, sorry. I recommend you to check bindings a bit more easy (in this community you will find some) and once you understand them make more complex ones.
But I know it is hard to find the right thing. Here is a solution (not the only one, but this is short and
simplealthough with a little problem you will find easily) and a good start for you. Simply set it in the visibility binding of any item.var t=animate(‘$ll_second’,1000)%2;
return t<1 ? 255*t : 255*(2-t);
]]>
< ![CDATA[
TrianguloY Wow, thank you very much! I admit that I’m not yet proficient with JavaScript, so your explanations are very helpful in my learning. Your code works perfectly, by the way!
Two questions:
1. Is it possible to reduce the time of the animation to less than one second. I noticed that you are utilizing the $ll_second variable. Can a specific number, say 300 milliseconds, be set as the rate the animation cycles at?
2. Would you mind explaining the shorthand/syntax in the code you provided? It seems like an elegant solution, and I’d love to learn how it works.
Thanks again!!
]]>
< ![CDATA[
To reduce the time to less than a second you will need to use a different approach. A timeout for example (although that way a script instead of a binding will be better, a binding is made to automatically start/stop the animation when needed, with a timeout you need to start/stop it yourself) another solution is to use a more complex math function. However it is not easy to do in that case.
Let’s explain it a bit:
var t…
Just defining a variable that we will use only in this script.
…animate(‘$ll_second’,1000)…
As the link says, this will return the current value of the variable, in this case the current second, but the binding will be run many times each one with a different number, for example this function will return 1, then 1.01 then 1.02 … then 1.99 then 2 (for example. numbers may vary) The 1000 number means that this will happen in 1000 milliseconds, one second.
…%2;
This in the module operator, any positive number below 2 will be unmodified, but if the number is bigger it will be reduced in that interval. 0%2=0; 1%2=1; 2%2=0; 3%2=1; 4%2=0; and so on
return…
The value that the binding returns to the launcher to use. This is necessary in all ‘more than one statement’ bindings.
… ? … : …
This is a ternary operator. It is a compacted if. Basically that last line is the same as:
if( t<1 ){
return 255*t;
}else{
return 255*(2-t);
}
Last: the binding simply uses the animate of a second variable to output a periodic 0-255 value. The graph is a triangular one with 0 and 2 as the base points with value 0, and 1 as the middle point with value 255.
]]>
< ![CDATA[
TrianguloY Hey, just want to let you know I greatly appreciate you taking the time to share your knowledge! I share your mindset, and love to help others with any knowledge I have that may help them. Cheers to you, and have a great day!
]]>
< ![CDATA[
I appreciate it to 👍
]]>
< ![CDATA[
setInterval is a function defined on the Window object found in web browsers. LL is not a web browser and doesn’t have to follow this specification (and also the window object doesn’t translate in LL concepts by the way). But it exists in the LL API with a subset of methods (setTimeout and not setInterval for instance) because early JavaScript implementation in Lightning was based on the engine built into the Android web component, which was naturally defining a full Window object. Since, I replaced this engine with a standalone one, but I had to recreate the Window object to keep compatibility with existing scripts. It’s hard to drop legacy stuff.
]]>
< ![CDATA[
Pierre Hébert Thanks so much for the reply! So, is the method described above the best way to achieve this, or are you able to implement something specific that would allow us to define repeating time intervals to achieve continuous animations?
]]>