Well, I created a vector *.svg image cycler using a bit of code.
However, if you use very complex images the loading or cycling through them will have a delay because they need to be rendered this you do need to take into account.
Create an interval and cycle through the URL’s targeting shape element in my case because I use vector images.
I did notice, that when you first set the URL’s to be used in your code it will cycle smoother than fetching them from an array nested inside a dataset without doing this.
When I place single images in fields in a dataset and fetch on page load it cycles faster, but I am not sure adding a URL array as field in your dataset also fetches them on page load.
Anyways, this is what I did.
//Concept code
(Will need some adapting and if you use vector images your element must be a shape)
let interval
let pause = false;
let repeat = true;let tick = 0;
let maxFrame = 0;let url = [“url1”,“url2”,“url3”,“url4”,“url5”]
function spriteAnimation() {
maxFrame = url.length-1interval = setInterval(() =>{ if (pause === false) { if (tick <= maxFrame){ $w('#element').src = url[tick]; }else{ if(repeat === true){ tick = 0; $w('#element').src = url[tick] }else{ clearInterval(interval) } } tick++ } }, 100);}
//couple notes
iOS mainly iPads and such have a bit of difficulties with loading a lot of vector images because this fills up the graphical pipeline and this needs to be cleared to maintain performance and I have little to no control over this.
This is what I am trying to figure out and therefore, my website on iOS will slow down eventually.
So, I would advise to use wix.animation above doing something like this.
If you use wix.animation I would load the animation like a bullet and reuse them as often as you can because if you set an animation at run time it will fill up the graphical pipeline; repeatedly and it will slow down on iOS mobile devices eventually.
If you use this, I recommend coding a pause function into your code because making too many things animate in one go will have a similar effect on iOS therefore, I animate things one by one as much as possible.
//Keyboard input cheat
If you want keyboard controls on Windows.
Add an input text field and name it: “focuser”, resize it to 1,1 pixels and opacity to 1% set it off screen but do note that doing this will scroll the page to it when it gets focus.
To avoid this, get the scroll of the page and set the position of the input text field to this or pin it to your page if you use EditorX.
I added the setFocus() function because sometimes a certain interaction with your website will make it lose focus and then the keyboard inputs won’t be detected.
//To use this
Call setFocus() in your code and add a onKeyPress listener to the focuser_keyPress function
//Concept code (needs some adapting)
let active = true;
let detector;
export function focuser_keyPress(event) {
let key = event.key; if (active === true) { switch (key) { case 'ArrowLeft': //DoSomething break; case 'ArrowRight': //DoSomething break; }}
}
function setFocus() {
detector = setInterval(function () {
if ((active === true)) {
$w(‘#focuser’).focus();
}else{
clearInterval(detector)
}
}, 100);
}
//Sound
Well, I had difficulties playing multiple sounds at a time.
My workaround was to create a HTML5 jukebox. This dynamically adds a *.mp3 files based on URL and name and loads it on a postMessage().
After you added it, you can play it by posting a message to this iFrame with the name of the sound you gave it when you added it.
Do note that certain browsers need a click interaction before HTML5 starts playing sound.
My solution was to make it very transparant and to add the same onClick() function to it as the button to toggle the sound on and off and I hide it after that first press.