[bug] - Extreme delay on interactive about cubecubed HOT 11 CLOSED

One question, how do you add jQuery to your workspace (npm install or include script tag from a CDN)?

from cubecubed.

npm install, but i think I found the problem: animations base the delay on group.groupElapsed, which is not 0 when all animations finish, so even if they are all done there is still a delay, e.g.
Animations scheduled at start: 7500ms
when they are done, groupElapsed = 7500, so when I click on the page to play another animation, the delay method would look like this: .delay(7500).

from cubecubed.

Maybe instead of relying on groupElapsed, it could play the next animation on the 'end' event? somthing like this:

//Rotate.ts, rotate()
private rotate() {
        const { xGtoW, yGtoW } = this.cubicon.group;

        this.cubicon.moveAngle += this.degree;

        const v = this.cubicon.moveVector;

        this.cubicon.g_cubiconWrapper
            .transition()
            .ease(this.ease)
            .delay(this.sleepTime)
            .duration(this.duration)
            .attrTween("transform", () =>
                interpolate(
                    `translate(${xGtoW(v.x)}, ${yGtoW(v.y)}) rotate(${
                        this.cubicon.angle
                    }, ${xGtoW(this.origin.x)}, ${yGtoW(this.origin.y)})`,

                    `translate(${xGtoW(v.x)}, ${yGtoW(v.y)}) rotate(${
                        this.cubicon.angle + this.degree
                    }, ${xGtoW(this.origin.x)}, ${yGtoW(this.origin.y)})`
                )
            )
            .on("end", () => this.group.playNextAnimation());
    }

//Group.ts
private currentAnimationIdx = 0;

//Group.ts playNextAnimation()
playNextAnimation() {
    this.animations[currentAnimationIdx].play();
    currentAnimationIdx++;
}

from cubecubed.

Working on a PR for this now (there were a few errors in the code I put in my last comment, please ignore it)

from cubecubed.

@kaptsanovb ooh this is a rough one.

There were 2 ways to handle the animations, yours and the one Cubecubed has implemented. I chose the latter because I want the possibility of overlapping animations, which means animations having negative delay time. The implementation you mentioned can string the animations together, but lack the ability to control the delay time because it remains constant. I might be wrong, but is there any solutions you come up with this?

Even if you have solutions to this, the thing is it would override the entire Cubecubed animation engine.

from cubecubed.

I didnt think about that, mine would make animations linear.
A possible solution (I think) is having a function (e.g. getGroupPlayed) which operates on Date.now() like this:

Animation class has a field called startTime which is Date.now() + this.sleepTime called when the animation is initialised

Variables -
groupPlayed (time in ms that has been spent playing animations that have finished at the time when getGroupPlayed was called) : number;
groupCurrentAnimation: Animation?;

1. groupPlayed = 0, groupCurrentAnimation = null;
2. When an animation starts, groupCurrentAnimation will equal the animation
3. When an animation finishes, the duration of the animation will be added to groupPlayed
4. If no animation is playing, groupCurrentAnimation = null
5. if getGroupPlayed is called while an animation is playing, groupPlayed + (Date.now() - groupCurrentAnimation.startTime) is returned
6. When a new animation is initialised, the delay will be this.sleepTime - this.cubicon.group.getGroupPlayed()

I'll try implement this and make a PR if it works

from cubecubed.

Accidentally closed it, sorry

from cubecubed.

Or maybe, instead of using groupElapsed, Tuples could be used to signify animation's .play() to be called together or sequentially, e.g.:
group.play([(a1, a2, a3], [a4, a5], [a6]]) would play a1, a2 and a3 together, when all of them are finished it would play a4 and a5 together, then play a6. If group.play is called again while the original was not finished, it would have a separate queue, which means that the second call's animations would play immediately and possibly at the same time as the first call's animations. You could still have sleepTime be negative to allow only a4, for example, to be played before a1, a2 and a3 finish.

from cubecubed.

@kaptsanovb I really appreciate your efforts to come up with this implementation, but I would recommend you keep it for your fork of this project, because the current engine is stable and I cannot see any problems going on, also no need for jQuery to work with Cubecubed.

from cubecubed.

Alright 👍

from cubecubed.

Or maybe, instead of using groupElapsed, Tuples could be used to signify animation's .play() to be called together or sequentially, e.g.: group.play([(a1, a2, a3], [a4, a5], [a6]]) would play a1, a2 and a3 together, when all of them are finished it would play a4 and a5 together, then play a6. If group.play is called again while the original was not finished, it would have a separate queue, which means that the second call's animations would play immediately and possibly at the same time as the first call's animations. You could still have sleepTime be negative to allow only a4, for example, to be played before a1, a2 and a3 finish.

Btw this syntax is so simple yet I have not thought of it. I will consider it and close this issue now.

from cubecubed.