Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[bug] yoyo has wrong value #677

Open
alphabetabc opened this issue Jan 25, 2024 · 6 comments
Open

[bug] yoyo has wrong value #677

alphabetabc opened this issue Jan 25, 2024 · 6 comments
Labels

Comments

@alphabetabc
Copy link

demo

const rootEl = document.getElementById("root");
Object.assign(rootEl.style, {
    width: "800px",
    height: "600px",
});

rootEl.innerHTML = "loading";

const dataX = [];
const dataY = [];

let i = 0;
createAnimationQueue({
    from: { value: 1 },
    to: { value: 1.5 },
    yoyo: true,
    repeat: 3,
    onUpdate: (o) => {
        dataX.push(i++);
        dataY.push(o.value);
    },
    onComplete: () => {
        const chart = ec.init(rootEl);
        chart.setOption({
            xAxis: {
                type: "category",
                data: dataX,
            },
            yAxis: {
                type: "value",
            },
            series: [
                {
                    data: dataY,
                    type: "line",
                },
            ],
        });
    },
});

result

image

@mk965
Copy link
Collaborator

mk965 commented Jan 26, 2024

Hello, can you provide a link to the codepen containing the complete demo?

@humodz
Copy link
Contributor

humodz commented Jan 26, 2024

https://codepen.io/humodz/pen/YzgEpXG

When the red ball reaches the end of the animation, on both directions, it blinks to the opposite side for a split second

@humodz
Copy link
Contributor

humodz commented Feb 12, 2024

As a workaround until it's fixed, we can call TWEEN.update twice, like so:

requestAnimationFrame(function animate(time) {
  requestAnimationFrame(animate);
  TWEEN.update(time);
  TWEEN.update(time);
});

This twill trigger callbacks twice which is a bummer, but at least the weird jump goes away

Another workaround would be to generate an yoyo-ified easing function, like as follows:

function yoyo(f) {
  return t => {
    if (t < 0.5) {
      return f(2 * t);
    } else {
      return 1 - f(2 * (t - 0.5));
    }
  }
}

new TWEEN.Tween({ x: 0 })
  .to({ x: 200 }, 2000 * 2) // duration needs to be doubled 
  .repeat(Infinity)
  //.yoyo(true)
  .easing(yoyo(t => TWEEN.Easing.Cubic.InOut(t)))

The only gotcha is that the duration of the tween needs to be doubled, because now a single iteration does both the forward and backward movement.

@trusktr
Copy link
Member

trusktr commented May 5, 2024

Fixed in

Released in v23.1.2

@trusktr trusktr closed this as completed May 5, 2024
@trusktr
Copy link
Member

trusktr commented Jul 26, 2024

Re-opening, as the merge for this broke the yoyo demo, which I've reverted. See

We assumed passing unit tests were enough, but we forgot to test the actual yoyo demo! 🥴

@trusktr trusktr reopened this Jul 26, 2024
MasatoMakino added a commit to MasatoMakino/tween.js-ticker that referenced this issue Jul 27, 2024
これはTween.js側のバグです。一時的にyoyo関数を作成してパッチしています。
tweenjs/tween.js#677 (comment)
@bendytree
Copy link

Fwiw - I'm having the same issue on both 23.1.3 and 25.0.0. @humodz's easing workaround worked for me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Development

No branches or pull requests

5 participants