1. 소속: 공군 7전대

2. 계급: 일병

3. 성명: 최태민

4. 프로젝트명 프로젝트 명은 TweenEdit입니다. 사실 원래 제작하려고 했던 프로젝트는 오디오 기능을 써야 해서 교육장 시설 관계상 다른 프로젝트를 진행해야 했었습니다. 그래서 이와 비슷한 성향의 프로젝트로 에니메이션 에디터, 비트맵 폰트 에디터등을 생각하게 됬고, 최종적으로 에니메이션 에디터를 선택하게 되었습니다. 평소에 개발할 때 프로그램 설치 없이 잠깐 사용할 용도로 이러한 에디터가 있으면 좋을 것 같다고 생각해왔고, 그래서 이번 기회에 하나 만들기로 해서 이런 프로젝트를 기획했습니다.

5. 프로젝트 설명 시간-값 그래프를 편집해서 Preview로 애니메이션을 즉각적으로 볼 수 있는 기능과, 파일(ex. css, json)로 추출할 수 있는 기능을 제공하는 웹 어플리케이션입니다. 그래프에 노드를 추가하거나 제거할 수 있으며, 노드를 서로 연결하는 엣지에 easing function(ex. Linear, QuadIn)도 편집할 수 있습니다.

6. 주요 완성 기능 그래프 편집기능중 일부를 완성했습니다. 노드 추가는 어떤 것을 선택했는지에 따라 추가되는 위치가 다르며, 노드 순서에 따라 이동 반경을 제한하기도 합니다. 엣지에 대해서는 노드를 추가할 때 함께 추가되는 기능만이 구현됬습니다.

7. 미완료 기능 그래프 편집기능에 아직 추가되지 않은 기능은 노드를 움직일 때 엣지도 함께 업데이트되는 것, 노드 삭제 기능은 시간관계상 구현하지 못했습니다. 이 외에도 Preview, 좌측 하단의 편집기능, 파일 추출기능은 아직 미완성입니다.

8. 향후 계획 프로젝트를 향후에도 계속 한다면, 기존의 코드를 유지보수가 쉽도록 대폭 수정할 것입니다. fabric으로 직접 그래프 에디터를 만들기 보다는 그래프 편집이 가능한 vue plug-in으로 대체하고, 그 외에 시간때문에 미처 구현하지 못한 기능을 추가할 것입니다.

realtweenedit

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint