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
Assignees
Labels
b-bug Something isn't working

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
b-bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants