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

[mintintegral18]

1. Animating a statistics charts, trend lines over scatter plots, trends over time. I thought you mentioned something, "I would know the value of such a gif unless it was for software promotion, neither would I do this animation as a gif." What other way can this be done?

2. Can Xara do this? zooms, horizontal pans
like these features that come with Predator movie DVD.
https://www.youtube.com/watch?v=MjrBdMUl7d4 (not the beginning 3-d rolling ball intro)
inserting same link here https://www.youtube.com/watch?v=MjrBdMUl7d4

[handrawn]

do you fancy digging your garden with a teaspoon ?

no, that is not what xara does; to do that you need an animation program [toonboom harmony will do it] - but first remember that no program actually does any of this [bar the tween/morph/FX], you do it using the tools the program provides, and you need to learn the skills that are needed to visualise and impliment it - you need to be able to think in terms of camera pans coupled with layered z-space, not just x and y; no disrespect, but if you already understand this, you would not be asking the question...

xara is not an animation program in that sense - it is a design program which has animation capability oriented in the main towards making graphics for websites

I know egg uses an SVG animation program, he may have been thinking that would be better for your project, but that is for him to confirm...

[Egg Bramhill]

All a gif is, is a series of images. There is no tweening. You can zoom & pan but as these are made up of a series of images they will be very jerky. As HD states I use svgator to create animations that do tween smoothly but this has restrictions also.

From your supplied animation it looks like you are taking screen grabs of some other software. I'd suggest using screen capture software (Screencast-o-Matic or similar) for this, far to much hard work creating a meaningless gif

[handrawn]

stop motion in fact...

yu want to make a film digitally, clip or otherwise, you need film making software

[handrawn]

xara will export animation tweened as avi... but for the OP project I think paul's way of gradually revealing/hiding with masks to make the changes smooth would be better than tweening

[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());

<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:

<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.

Animated Charts.xar


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

[handrawn]

mp4 is the way to go for web...

[Acorn]

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());

<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:

<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.

Animated Charts.xar


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]

Animation.zip
Unzip and run the design file.

It has a novel jQuery plugin of 317 bytes:

$.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

[Initiostar]

Interesting Acorn and thanks for sharing.

I'll have a play later.

Gary