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

Path appears like polylines while animating to new values #972

Open
sayuriu opened this issue Mar 5, 2024 · 1 comment
Open

Path appears like polylines while animating to new values #972

sayuriu opened this issue Mar 5, 2024 · 1 comment
Labels
a-2d Relates to the 2d package b-enhancement New feature or request c-accepted The issue is ready to be worked on

Comments

@sayuriu
Copy link

sayuriu commented Mar 5, 2024

Describe the bug
During morph transitions (<Path>.data(newPath)), all curves between points are turned into lines.
This effect is present on the final render as well.

project._.Motion.Canvas.-.Google.Chrome.2024-03-05.17-50-48-c.mp4

To Reproduce

import { Node, Path, makeScene2D } from '@motion-canvas/2d';
import { createRef, waitFor } from '@motion-canvas/core';

const FLOWER_DEFAULT = "M39.3043,4.58359c0,0,7.542,4.436,8.886,10.399c1.291,5.723,0,9.891,0,9.891c0,0,6.146,-3.743,11.519,-3.743c4.163,0,9.87,2.717,9.87,2.717c0,0,-4.028,6.732,-5.707,8.747c-2.696,3.235,-10.028,4.838,-10.028,4.838c0,0,7.734,0.488,11.125,5.344c3.73,5.342,5.953,14.798,5.953,14.798c0,0,-11.619,1.433,-17.078,-1.952c-4.137,-2.565,-5.654,-6.071,-5.654,-6.071c0,0,1.717,8.173,0,14.252c-1.843,6.528,-8.464,12.467,-8.464,12.467c0,0,-6.08,-7.134,-7.813,-12.467c-1.732,-5.332,1.26,-14.252,1.26,-14.252c0,0,-1.01,2.29,-5.434,6.071c-3.899,3.332,-15.183,4.186,-15.183,4.186c0,0,0.166,-11.547,3.242,-15.723c3.151,-4.275,11.941,-6.653,11.941,-6.653c0,0,-4.025,0.696,-9.71,-2.02c-5.473,-2.615,-8.951,-10.539,-8.951,-10.539c0,0,4.562,-3.743,11.948,-3.743c6.134,0,10.887,4.555,10.887,4.555c0,0,-0.459,-6.152,1.26,-11.548c1.409,-4.424,6.131,-9.554,6.131,-9.554z";
const FLOWER_2 = "M29.6022,8.18729c0,0,10.261,-2.839,14.282,2.61c3.483,4.72,3.604,8.967,3.604,8.967c0,0,6.221,-2.733,11.519,-1.84c3.556,0.599,4.553,3.399,4.553,3.399c0,0,3.932,0.325,2.705,2.585c-2.302,3.718,-8.385,10.113,-8.385,10.113c0,0,6.69,1.176,10.08,6.032c3.731,5.342,0.916,12.413,0.916,12.413c0,0,-4.41,-1.092,-9.869,-4.477c-4.137,-2.565,-7.959,-3.546,-7.959,-3.546c0,0,3.81,8.82,2.093,14.9c-1.843,6.528,-9.257,14.571,-9.257,14.571c0,0,-5.431,-7.45,-7.163,-12.783c-1.732,-5.332,-1.038,-15.385,-1.038,-15.385c0,0,-3.551,5.685,-7.975,9.465c-3.899,3.332,-12.874,4.132,-12.874,4.132c0,0,-2.174,-10.19,0,-14.9c2.174,-4.71,9.078,-9.219,9.078,-9.219c0,0,-2.101,-0.495,-6.585,-4.92c-4.548,-4.488,-6.431,-1.796,-6.431,-1.796c0,0,-1.453,-6.344,5.532,-8.744c5.444,-1.871,14.783,0.813,14.783,0.813c0,0,0.529,-4.142,0,-9.78c-0.319,-3.406,-1.609,-2.61,-1.609,-2.61z";

export default makeScene2D(function* (view) {
  view.fill("#000")
  const flowerRef = createRef<Path>();
  view.add(<Node cache scale={[624 / 80, 624 / 80]}>
    <Path
      position={[-39, -39]}
      ref={flowerRef}
      compositeOperation={"source-out"}
      data={FLOWER_DEFAULT}
      fill={"#FFD700"}
    />
  </Node>)

  yield* waitFor(0.5);
  yield* flowerRef().data(FLOWER_2, 2);
  yield* waitFor(1);
});

Expected behavior
Curves are preserved during transitions.
(The video below uses browser CSS keyframes)

Document.-.Google.Chrome.2024-03-05.17-42-13-c.mp4

Console errors
None

Package versions:

  • core: 3.14.1
  • two: 3.14.2
  • ui: 3.14.2
  • vitePlugin: 3.14.1

Additional context
Maybe it has something to do with interpolation resolutions / amount of division segments when calculating new curves?

@sayuriu sayuriu added the b-bug Something isn't working label Mar 5, 2024
@sayuriu sayuriu changed the title Path appears like polylines during transitions Path appears like polylines while animating to new values Mar 5, 2024
@sayuriu
Copy link
Author

sayuriu commented Mar 5, 2024

Solved: Lowering precision in path interpolation functions worked (thanks to @aarthificial)
Can we somehow expose this parameter?
Also the parameter name seems a bit "misleading" - something like distance may better fit the role of the parameter, I think.

@aarthificial aarthificial removed their assignment Jul 20, 2024
@aarthificial aarthificial added b-enhancement New feature or request c-accepted The issue is ready to be worked on a-2d Relates to the 2d package and removed b-bug Something isn't working labels Jul 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a-2d Relates to the 2d package b-enhancement New feature or request c-accepted The issue is ready to be worked on
Projects
None yet
Development

No branches or pull requests

2 participants