애니메이션 패널은 씬 그래프(scene graph), 타임라인(timeline), 애니메이션 플레이백(animation playback), 애니메이션 에디팅(animation editing), 애니메이션 커브(animation curve)의 다섯 부분으로 나누어집니다.
씬 그래프는 게임이 현재 사용하고 있는 버튼, 맵, 사운드 파티클 등 캔버스의 위젯으로 맵핑된 모든 위젯을 포함합니다. 위젯 패널에서 씬 그래프로 직접 드래그를 해서 오브젝트를 추가할 수 있으며(또한 캔버스에 나타납니다), 씬 그래프는 시각적으로 위젯의 구조를 조정할 수 있는 방법을 제공하여 추가, 삭제, 위젯 렌더 순서 변경, 위젯의 부모-자식 계층구조의 변경 등을 할 수 있습니다.
또한 씬 그래프를 사용하여 캔버스에서 위젯을 감추거나 에디팅을 방지할 수 있지만 씬 그래프에서 잠기거나 숨겨진 위젯은 캔버스에서만 영향을 끼치고 최종 게임에는 영향을 끼치지 않습니다. 게임 내에서도 영향을 끼치게 하고 싶으시면 속성 패널의 속성을 수정하시면 됩니다.
코코스 스튜디오는 부모-자식 계층 구조의 컨셉을 사용하여 어떠한 오브젝트든 다른 오브젝트의 자식이 될 수 있습니다. 주의사항: 투명도(opacity)와 컬러 틴트(color tint) 속성은 부모 오브젝트로부터 상속되지 않습니다.
코코스 스튜디오는 애니메이션 타임라인을 제공하며 타임라인에서 키 프레임을 추가할 수 있습니다. 에디터는 자동으로 두 개의 프레임 사이에 애니매이션 커브를 추가하여 애니메이션 효과를 줍니다. 트위닝(tweening)을 조정하는 애니메이션 커브를 선택하는 것을 통해 애니메이션 효과롤 조절할 수 있으며 이는 애니메이션을 더욱 선명하게 해줍니다.
애니메이션 컨트롤 도구는 현재 타임라인을 조정할 수 있으며 애니메이션을 플레이하고 프레임 레이트(frame rate)를 조절하거나 특정 프레임으로 이동할 수 있습니다.
애니메이션 에디팅 도구는 애니메이션을 위한 에디팅 기능을 제공합니다:
프레임 추가(Add frame): 클릭하면 선택한 위치에 타임라인상의 키 프레임을 추가합니다.
자동 녹화 프레임(Automatic recording frame): 클릭한 후에 현재 프레임이 키 프레임이 되면서 녹화가 이루어지며 다른 프레임의 위젯 속성을 수정하는 것을 통해 풍부하고 컬러풀한 애니메이션 효과를 만들 수 있습니다.
오리진 스킨(Orion Skin): 파운데이션으로서 현재 프레임을 사용하면 현재 프레임 근처의 프레임은 애니메이션 편집을 지원을 통해 표시됩니다.
