Motion Canvas v3.16.0

New features 🎉

• 

  A brand-new

  Camera

  node with helper methods for zooming and focusing on elements:

  #1019
  Press play to preview the animation

  import ...
  
  export default makeScene2D(function* (view) {
    const camera = createRef<Camera>();
    const rect = createRef<Rect>();
    const circle = createRef<Circle>();
  
    const scene = (
      <Node>
        <Grid stroke={'#fff1'} lineWidth={1} size="100%" spacing={25}>
          <Rect ref={rect} fill={'#e6a700'} size={50} position={[50, -25]} />
          <Circle ref={circle} fill={'#e13238'} size={50} position={[-50, 25]} />
        </Grid>
      </Node>
    );
  
    view.add(
      <>
        <Camera.Stage
          scene={scene}
          x={-200}
          width={300}
          height={200}
          stroke={'#242424'}
          lineWidth={4}
        />
        <Camera.Stage
          cameraRef={camera}
          scene={scene}
          x={200}
          width={300}
          height={200}
          stroke={'#242424'}
          lineWidth={4}
        />
      </>,
    );
  
    yield* all(
      camera().centerOn(rect(), 3),
      camera().rotation(180, 3),
      camera().zoom(1.8, 3),
    );
    yield* camera().centerOn(circle(), 2);
    yield* camera().reset(1);
  });
  

• 

  New effects can be used to react to changes in signals:

  #1043

  import {makeScene2D} from '@wangyaoshen/locus-2d';
  import {createEffect, createSignal} from '@wangyaoshen/locus-core';
  
  export default makeScene2D(function* () {
    const signal = createSignal(0);
  
    createEffect(() => {
      console.log('Signal changed: ', signal());
    });
  
    yield* signal(1, 2);
  });

• 

  All vector operations can now be used with vector signals for a more concise code:

  #1030

  // Before
  yield* node().position(node().position().add([200, 100]), 2);
  
  // Now
  yield* node().position.add([200, 100], 2);

• Polygon.vertex()

  and

  Polygon.vertexCompletion()

  can be used to retrieve information about the vertices of a polygon.

  #1045
• 

  New example for the Code node.

  #1023

Fixed bugs 🐛

• 

  Handle invalid values for time events.

  #1044
• 

  Fix the destination uv in shaders.

  #1026
• 

  Fix the type of the layout gap property.

  #1039
• 

  Fix Code size calculation.

  #1025

Check out the Update Guide for information on how to update your existing projects.