looking for a way to animate 16 png files, crop too, swiftly in Xara designer

Quote:

---

Originally Posted by Initiostar

I would start afresh and recreate the animated chart as a transitional/supersite plugin: https://initiostar.co.uk/demo/chart/..._xr_page_chart

You can create any chart with your own data this way, have next and previous buttons and a toggle auto-play, much the same way as an animated presentation.

You can change from a toggle auto-play to full cycle automation with a minor adjustment to the javascript in the Website HTML (body); otherwise you can built all sorts of on-page animations.

Toggle Auto-Play below requires a button with this link: javascript:void(toggleScroll());

HTML Code:

---

<script>
curScrollInterval=null;
function toggleScroll(){if(curScrollInterval){clearInterval(curScrollInterval);curScrollInterval=null;}else{curScrollInterval=setInterval(function(){xr_spapp((xr_curp+1)%xr_spapn);},3000);}}
</script>

---

Otherwise for full-auto remove the above and replace with:

HTML Code:

---

<script>
setInterval(function(){xr_spapp((xr_curp+1)%xr_spapn);},6000);
</script>

---

The time intervals in the above code 3000/6000 can be changed to suit.

Attachment 129486


This Xara file would be published to the SAME directory as your main site and would appear in this case as "chart.htm". From there you would create a placeholder (proportionally with the same height and width) and embed that page in it.

You can of course covert the full animation to an MP4 video too.

Gary

---

Gary, i love your dedication.

I personally have no interest in doing the OP's job so I have instead addressed a simple animation method that can be used for anything. [Not a bold statement, one which is slanty so I can slide off problems]

Attachment 129487
Unzip and run the design file.

It has a novel jQuery plugin of 317 bytes:

Quote:

---

$.fn.cycle = function(timeout, showSpeed){
var $all_elem = $(this)


show_cycle_elem = function(index){
if(index == $all_elem.length) return;
$all_elem.hide().eq(index).fadeIn(showSpeed);
setTimeout(function(){show_cycle_elem(++index)}, timeout);
}
show_cycle_elem(0);
}

---

jQuery 3.6.0 has been included as you should not be running an insecure, stale library.


jquery.cycle.js is a simple plugin where you can set the step time and how quickly the blob appears.


An object is given a link of form:
javascript: void $('.classname').cycle(step, showTime);


In this demo file, there are two ClassNames used: animate & justDucks


The 'Animate slow' button has Link: javascript: void $('.animate').cycle(500, 16);
The 'Animate 25fps' button has Link: javascript: void $(".animate").cycle(40, 8);
The 'Just Ducks' button has Link: javascript: void $(".justDucks").cycle(750, 25);

You tune your animation speed to suit.
You add ClassNames to elements that can be shared by an element:
All Ducks/Eggs have both classNames: htmlclass="animate justDucks"

To keep a progression, you would need to copy all past objects and add new ones to a Grouped collection and give that the required ClassName.
If you know what you are about, you could remove the .hide() part in $all_elem.hide().eq(index).fadeIn(showSpeed);

Acorn

Interesting Acorn and thanks for sharing.

I'll have a play later.

Gary

Quote:

---

I personally have no interest in doing the OP's job so I have instead addressed a simple animation method that can be used for anything. [Not a bold statement, one which is slanty so I can slide off problems]

---

slide away .... :)