time continues to run after stopping onFrame animation

[Alyona Rodina]

Good day, 

Could you please help with this issue? 

I would like after running animation to stop time also because after restarting (play) the items jump forward and the first delta is huge - does not stop 

[Alyona Rodina]

Another example

[Samuel ASENSI]

Hi,

Could you provide the code that you are using and maybe also explain what you are trying to do so that we can better help you ?

--
You received this message because you are subscribed to the Google Groups "Paper.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to paperjs+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/paperjs/80449005-0229-4f66-bbbf-6e047c3ac6e7n%40googlegroups.com.

--

    Samuel ASENSI

[Juro Dobrik]

Frame and time animation is two different things imo.

To view this discussion on the web visit https://groups.google.com/d/msgid/paperjs/CAGhjZpXmdYYieyRpfoMqNOagfqdGuEWJbRGrT5ECXNqGc4MvKA%40mail.gmail.com.

[Alyona Rodina]

It affects the animation when stopping animation and restarting again. An object moves and then we stop and restart again the items they jump to the initial delta position. because the object movement is used it:  offset+= event.delta. when we move item on the path. Because the first delta is different so i have to do adding 0.017 when delta is >0.1. But is there any way to stop the time - this way delta will not be adding to each outher .

if (event.delta > 0.1) {

offset.current[i] += 0.017;

} else {

offset.current[i] += event.delta;

}

Thank you!!!

[Samuel ASENSI]

Hi,

the code that you provided is not enough to help you unfortunately.

But generally I think that what you have to do is handle the case where the animation is restarted after a pause differently, not using the delta in this case.

To view this discussion on the web visit https://groups.google.com/d/msgid/paperjs/ba42754c-4070-473f-9250-6c7797587d0an%40googlegroups.com.

--

    Samuel ASENSI

[Alyona Rodina]

The object moves along the path, the button can stop and start that movement. we make movement using offset.  After we stop the object and restart in a few seconds as the time did not stop and delta accumulated, after restarting the object jumps to the delta it accumulated. It moves on the path - the path is not always circled so it cannot use rotation(). 

Paper.view.onFrame = function (event: any) {

for (let i = 0; i < array.children.length; i++) {

if (

offset.current[i] * path.current.length <

path.current.length

) {

circles.current.children[i].position = path.current.getPointAt(

offset.current[i] * path.current.length

);

if (event.delta > 0.1) {

offset.current[i] += 0.017 / 10;

} else {

offset.current[i] += event.delta / 10;

}

} else {

offset.current[i] = 0;

}

}

};

You received this message because you are subscribed to a topic in the Google Groups "Paper.js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/paperjs/qbrz_QartfM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to paperjs+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/paperjs/ba42754c-4070-473f-9250-6c7797587d0an%40googlegroups.com.

[Alyona Rodina]

I also explained. Does the explanation help? this is how I walk around this case (the code that i provided). But it indeed affects the animation. Would you advise a different way of moving an object along the path? 

You received this message because you are subscribed to a topic in the Google Groups "Paper.js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/paperjs/qbrz_QartfM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to paperjs+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/paperjs/CAGhjZpVcfoixD4c%3D-FHUYms%3DaaF%2BxbhBTib%2BA5WqONoT10WwpA%40mail.gmail.com.

[Samuel ASENSI]

Yes, I think that I understand kind of what you are trying to do.

So as I recently answer to a similar question here, I think that you should rely on a proper animation library for all that is related to time handling.

This will allow you to quickly deal with complicated cases like pause / play...

Here's a simple fiddle demonstrating a controlled animation of an object moving along a path.

It should get you on the track for your specific use case.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Debug Paper.js</title>
    <script src="https://unpkg.com/acorn"></script>
    <script src="https://unpkg.com/paper"></script>
    <script src="https://unpkg.com/gsap"></script>
    <style>
        html,
        body {
            margin   : 0;
            overflow : hidden;
            height   : 100%;
        }

        canvas[resize] {
            width  : 100%;
            height : 100%;
        }

        #buttons {
            position : fixed;
            top      : 50px;
            left     : 50px;
            display  : flex;
            gap      : 15px;
        }
    </style>
</head>
<body>
<div id="buttons">
    <button id="play">play</button>
    <button id="pause">pause</button>
    <button id="reverse">reverse</button>
</div>
<canvas id="canvas" resize></canvas>
<script>
    paper.setup('canvas');

    const initialPosition = paper.view.center;

    const path = new paper.Path.Circle({
        center: paper.view.center,
        radius: 200,
        strokeColor: 'blue'
    });

    const circle = new paper.Path.Circle({
        center: path.firstSegment.point,
        radius: 15,
        fillColor: 'orange'
    });

    function update(t) {
        circle.position = path.getPointAt(t * path.length);
    }

    const obj = { value: 0 };
    var timeLine = gsap.timeline({
        onUpdate: (event) => {
            update(obj.value);
        }
    });
    timeLine.to(obj, { value: 1, duration: 4 });
    timeLine.pause();

    document.querySelector('#play').addEventListener('click', () => timeLine.play());
    document.querySelector('#pause').addEventListener('click', () => timeLine.pause());
    document.querySelector('#reverse').addEventListener('click', () => timeLine.reverse());
</script>
</body>
</html>

To view this discussion on the web visit https://groups.google.com/d/msgid/paperjs/CAPdi%2BHq41o%3DN93JRmxxgvY60%2BkKviaj%3DEg1S5ANqHiVhjkeSBg%40mail.gmail.com.

--

    Samuel ASENSI