New features ๐โ
- A brand-new
Camera
node with helper methods for zooming and focusing on elements:#1019Press play to preview the animationimport ...
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 '@motion-canvas/2d';
import {createEffect, createSignal} from '@motion-canvas/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()
andPolygon.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