[요약] 모션 캔버스가 오픈소스로 출시되었습니다! :: with AI

> English Summary

 

[ 요약 ]

실시간 미리보기 기능을 갖춘 무료 오픈소스 도구인 모션 캔버스가 TypeScript 애니메이션 라이브러리로 출시되었습니다.
기초에 대한 가이드가 제공되며, 고급 튜토리얼도 개발 중입니다.
초기 릴리스 이후 가장 중요한 추가 사항은 값 간의 종속성을 정의할 수 있는 시그널 개념입니다.
예를 들어, 값이 3인 반경 신호와 원 영역 신호를 만들면 반경 신호가 변경되면 원 영역 신호가 자동으로 업데이트됩니다.
설명에 있는 링크를 방문하여 모션 캔버스를 직접 사용해 보세요.
이 글에서는 반경을 사용하여 면적을 계산하는 함수를 제공하고, 종속성을 추적하고 필요할 때만 면적을 다시 계산하는 데 신호를 사용합니다.
씬에 텍스트 노드를 추가하고 그 내용을 포맷된 면적을 반환하는 함수로 설정합니다.
반경을 애니메이션하면 영역 신호와 텍스트 노드 콘텐츠가 업데이트됩니다.
원이나 레이블이 있는 선과 같은 추가 요소도 신호를 사용하여 쉽게 추가하고 업데이트할 수 있습니다.
이 문서에서는 모든 속성을 한 번만 설정하고 하나의 신호로 업데이트하는 방법을 제안합니다.
독자는 자신의 프로젝트에 이 접근 방식을 구현해 보시기 바랍니다.
모션 캔버스에는 프로퍼티 재할당 및 플렉스박스 레이아웃 사용 기능과 같은 새로운 기능이 있습니다.
레이아웃 속성을 사용하면 익숙한 CSS 기능을 사용하여 레이아웃을 쉽게 애니메이션할 수 있습니다.
UI도 개선되었습니다.
상자에 애니메이션을 적용하기 위해 상자를 참조하고 너비와 높이 값을 변경할 수 있습니다.
또한 단위 변환도 자동으로 처리합니다.
독자들은 다음 애니메이션 프로젝트에서 이러한 새로운 기능을 사용해 보시기 바랍니다.
인스펙터를 통해 노드 속성을 볼 수 있으며 콘솔에 런타임 오류가 해당 코드 조각과 함께 표시됩니다.
에디터에서 씬 이름이나 시간 이벤트를 클릭하여 코드의 특정 위치로 이동할 수 있습니다.
향후 급격한 변경을 피하기 위해 공개 릴리스 전에 기술적인 변경이 이루어졌습니다.
이제 모션 캔버스는 예기치 못한 변경 없이 준비되었으며, GitHub 기여 가이드를 통해 기여를 환영합니다.
프로젝트 아키텍처 및 구현에 대한 기술 가이드도 준비 중입니다.
독자들은 GitHub 기여 가이드를 확인하고 기술 가이드를 계속 지켜봐 주시기 바랍니다.
이 글의 전문가가 1~2주 후에 프로젝트가 출시될 예정임을 알리며 이를 가능하게 해준 후원자에게 감사를 표하고 있습니다.
독자들께서도 릴리스에 주목해 주시기 바랍니다.
더 이상의 방법이나 인수는 언급되지 않았습니다. 

 

반응형

 

 

 

Motion Canvas is now Open Source!

https://www.youtube.com/watch?v=H5GETOP7ivs 

 

 

 

[ Summary ]

Motion Canvas, a TypeScript animation library, has been released as a free and open-source tool with real-time preview.
Guides for the fundamentals are available, and advanced tutorials are being developed.
The most significant addition since the initial release is the concept of signals, which allows for defining dependencies between values.
For example, creating a radius signal with a value of 3 and a circle area signal ensures that any changes to the radius signal automatically update the circle area signal.
Visit the link in the description to try Motion Canvas yourself.
In this article, a function is provided to calculate the area using the radius, and a signal is used to keep track of dependencies and recalculate the area only when necessary.
A text node is added to the scene and its contents are set to a function that returns the formatted area.
Animating the radius updates the area signal and the text node contents.
Additional elements like a circle and a line with a label can also be added and updated easily with signals.
The article suggests setting up all properties once and updating them with just one signal.
The reader is encouraged to try implementing this approach with their own projects.
Motion Canvas has new features such as the ability to reassign properties and use flexbox layouts.
The layout property allows for easy animation of layouts using familiar CSS features.
The UI has been improved as well.
To animate a box, we can reference it and change its width and height values.
The language also handles unit conversions automatically.
Readers should consider trying out these new features in their next animation project.
The inspector allows viewing node properties and the console displays runtime errors with corresponding code snippets.
The editor can navigate to specific places in the code by clicking on scene names or time events.
Technical changes were made before the public release to avoid drastic changes in the future.
Motion Canvas is now ready with no foreseen breaking changes, and contributions are welcome through the GitHub contribution guide.
A technical guide on project architecture and implementation is also in progress.
Readers are encouraged to check out the GitHub contribution guide and stay tuned for the technical guide.
The expert in this article is announcing the upcoming release of a project in a week or two and thanks their patrons for making it possible.
The reader is encouraged to look out for the release.
No further methods or arguments are mentioned.