2013-10-17 1 views
1

이것은 더 많은 "배우고 사용하는 기술"이라는 질문입니다. 기본적으로 저는 현재 대학 2 학년에서 웹 디자이너/개발자로서 맞춤형 포트폴리오 웹 사이트 개발을 시작하고 싶습니다.성장하는 나무/프랙탈 유형 애니메이션

저는 최근에 CSS3 애니메이션을 보았습니다. 신이 그 멋진 작품입니다. 어쨌든 내 새로운 포트폴리오 아이디어는 본질적으로 애니메이션 기반 웹 사이트를 만드는 것입니다. CSS 애니메이션은 현재 제한적인 옵션이므로 원하는 결과를 얻으려면 JavaScript로 머리를 파야하는지 알고 싶습니다. 본질적으로 웹 사이트는 "정원"또는 자연과 같을 것입니다. 나는 벡터 기반 그래픽을 사용하고 나무가 짐을 싣고 "땅"에서 자라게하고, 구름이 가로 지르며 다른 것들을 쓸 수있게한다.

내가 애니메이션화하는 가장 복잡한 것은 구름처럼 나무가되어 CSS를 사용하여 변형되고 애니메이션 될 수 있습니다. 다음은 내가 나무를 키우고 피타고라스 나무처럼 보이게하는 방법의 예입니다.

http://andrew-hoyer.com/experiments/fractals/

내가 원하는 나 마우스의 움직임에 따라 또는 오른쪽으로 구부리거나 왼쪽으로 성장하는 데 필요하지 않습니다. 상자에서 피타고라스 나무로 가십시오.

도움 주셔서 감사합니다.

답변

1

세 개 또는 d3 또는 유사한 형상 라이브러리를 사용할 수 있습니다.

+3

참고 사항 [d3 tree example] (http://prcweb.co.uk/lab/d3-tree/) ([여기는 JS 소스 코드입니다.] (http://prcweb.co.uk/lab/) d3-tree/js/main.js)) –

+0

@IljiaDimov : 주석의 예는 어떻게됩니까? L- 시스템을 사용해 볼 수 있을지도 몰라?! – Bytemain

+0

그대로,이 답변은 더 많은 코멘트 같습니다. 아래의 주석은 썩을 수있는 링크를 추가하는 데 도움이되지만 D3 또는 다른 기하 도형 라이브러리를 사용하는 아이디어를 확장하면 도움이 될 수 있습니다. –

관련 문제