time continues to run after stopping onFrame animation

42 views
Skip to first unread message

Alyona Rodina

unread,
Jan 6, 2022, 10:30:21 PMJan 6
to Paper.js
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 Screen Shot 2022-01-06 at 10.29.26 PM.png

Alyona Rodina

unread,
Jan 6, 2022, 11:00:12 PMJan 6
to Paper.js
Another exampleScreen Shot 2022-01-06 at 10.58.48 PM.png

Samuel ASENSI

unread,
Jan 7, 2022, 3:08:11 AMJan 7
to pap...@googlegroups.com
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

unread,
Jan 7, 2022, 8:22:03 AMJan 7
to pap...@googlegroups.com
Frame and time animation is two different things imo.

Alyona Rodina

unread,
Jan 7, 2022, 9:16:40 AMJan 7
to Paper.js
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

unread,
Jan 10, 2022, 2:52:03 AMJan 10
to pap...@googlegroups.com
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.



--
    Samuel ASENSI

Alyona Rodina

unread,
Jan 10, 2022, 9:11:21 AMJan 10
to pap...@googlegroups.com
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

unread,
Jan 10, 2022, 9:25:14 AMJan 10
to pap...@googlegroups.com
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

unread,
Jan 11, 2022, 3:48:26 AMJan 11
to pap...@googlegroups.com
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>




--
    Samuel ASENSI
Reply all
Reply to author
Forward
0 new messages