Resetting an image to original location after animation

Questions
,
1

Hi there,
In this code, have have an object (aviaun_p2) moving around a blob once. What I can't do is to have the object back to its original position and size (center of stage) after the animation is completed. Are you able to see what I need to do to make this happen? What I am trying to do is have the animation work each time the object is clicked, but I want it to be back at its original position and size each time. This is what I have so far ....

const aviaun_p2 = zimify(this.aviaun_p2);
//const grid = new Grid();
//locate aviaun
aviaun_p2
    .sca(.7)
    .center()
	
//add the listener to the aviaun button
// Store the event listener reference
const animateListener = animate_aviaun_p2.bind(this);

// Add the click listener to trigger the animation
this.aviaun_p2.addEventListener("click", animateListener);

//the function that will run will be "animate_aviaun_p2"

//the data for the path of the animation
const data = [
	[668.1, 139, 0, 0, -85.3, 5.3, 85.3, -5.3, "mirror"],
	[1109.8, 310.8, 0, 0, 0, -50, 0, 50, "none"],
	[640, 322.5, 0, 0, 50, 0, -50, 0, "mirror"],
	[353.7, 320.9, 0, 0, -18.3, 39, 18.3, -39, "none"]
];
const path = new Blob({
	points: data,
	onTop: false,
	stickColor: light
}).center();
path.visible = false;

//function to run the animation when the aviaun_p2 button is clicked

function animate_aviaun_p2() {
    aviaun_p2
        .sca(.7)
        .center()
        .centerReg()
        .animate({
            props: { path: path, orient: true, flip: true, zoom: [.2, 1.2] },
            time: 6,
            ease: "linear",
            loop: false,
            rewind: false,
            drag: false,
            startPaused: false
            //onComplete: () => {
			//	
            //    // Remove the click listener after the animation is complete
            //    this.aviaun_p2.removeEventListener("click", animateListener);
            //    animationComplete = true;
			//	aviaun_p2.x=645;
			//	aviaun_p2.y=323;
			//	
            //}
        });

}

Thankyou.
Rod

2
3

I've almost got this working..... I am modifying this part of the code to have a zimified object instead of the rectangle. Here is the code I extracted....

const path2 = new Blob({interactive:false}).center().mov(300)

const rect2 = new Rectangle(50,20)
    .reg(CENTER)
    .cur()
    .loc(path2) // will match registration points

let ev = rect2.on("mousedown", ()=>{
    rect2.off("mousedown", ev);
    rect2.cur("default")
    rect2.animate({
        props:{path:path2},
        time:3,
        call:()=>{
            // add delay to make sure animate is not still positioning
            timeout(.25, ()=>{
                rect2.loc(path2);
                ev = rect2.cur().on("mousedown", ev);
                S.update();
            });
        }
    });
});

....and this is what I replaced it with.

const path2 = new Blob({interactive:false}).center()
const aviaun = zimify(this.aviaun_p2)
	.reg(CENTER)
	.cur()
	.loc(path2)

let ev = aviaun.on("mousedown",()=>{
	
	aviaun.off("mousedown",ev);

	aviaun.cur("default")

	aviaun.animate({
		props:{path:path2},
		time:3,
	call:()=>{
		//add delay to make sure animate is not still positioning
		timeout(.25,()=>{
			aviaun.loc(path2);
			ev=aviaun.cur().on("mousedown",ev);
			S.update();
			});
		}
});
});

So the object aviaun circles the blob, but the "call" does not seem to work as the aviaun object does not return to the original location after the animation is completed. There is something I am missing, but i can't see what it is.

Could you have a quick look to see if you can see my error?

Thanks

Rod

4

Try a longer delay to make sure that is not it.

5

I've increased the delay varying it from .5 to 5 in increments - no luck. When I put an alert in after

call:()=>{

it appears that this part isn't working at all.

6

We have never had an occurrence where the call:()=>{} does not run after an animate(). It would not do that if you were looping forever - but you are not looping, right? We would have to see the file to know for sure what might be the problem. Instead of alert() you can use zog() and look in the console F11. If that is not logging to the console (or alerting) then that would be why it does not get positioned. See if you can simplify your app to see why it is not getting the call.

7

So this is what I found worked. In the examples this was in the first rectangle path:

    .reg(CENTER)
    .cur()
    .loc(path.pointCircles[0])

and this was in the second rectangle path:

const rect2 = new Rectangle(50,20)
    .reg(CENTER)
    .cur()
    .loc(path2) // will match registration points

which works for the re3ctangles but didn't work for some reason with my image. So I tried changing the line in the second one to this:

.loc(path.pointCircles[0])

and it worked for my image. Now, I don't understand why, but I am just happy to have the solution. Thanks again for your ongoing support.

Rod

8

Good. Not sure, maybe there was something to do with the registration points. For anyone wondering about registration points here is a Pen about them https://codepen.io/zimjs/pen/qBEjYZV