• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

SMIL 애니메이션 중복 관련 질문드립니다. ( + 융의 땅 관련 질문 추가...)

21.03.29 21:27 작성 조회수 184

0

안녕하세요!

강의를 들은지는 시간이 조금 지났지만 막상 적용하려다보니 잘 안되서 필요한 부분만 다시 듣는 중에 질문드립니다.

질문 : 하나의 도형이나 패스 안에 <animate> 두개를 사용하는 방법은 없을까요? 예를 들어 도형의 모양과 색상을 동시에 변형하고 싶은데 <animate> 태그 안에는 attributeName 속성이 하나밖에 들어가지 않는 것 같아서 질문드렸습니다.

감사합니다.

ps 그리고 혹시 인터렉티브 웹 디자인이나 자바스크립트를 배우는데 있어서 참고가 될 만한 사이트(들)가 있다면 알려주실 수 있으신지도 부탁드립니다. (독해 가능한 언어는 한국어, 영어, 일본어입니다.)  강의에서 종종 언급되었던 모질라재단이나 어워즈, 그리고 스튜디오밀 등의 사이트는 큰 도움이 되었습니다.  그럼 좋은 하루 되세요!

------------------------------------

안녕하세요!

아직 이전 질문에 답변을 해주시지는 않았지만 추가로 질문이 있어서 이전 질문에 추가로 작성하였습니다.

유튜브 채널에 있는 '캔버스로 융의 땅 만들기' 중에 질문사항이 생겼는데요,

해당 작업에서 class Light / class Lines/ class Particles 의 경우 constructor외부에서 메소드 draw() 를 선언(?)하고 있는데 왜 유독 class Characters의 constructor 안에서만는 this.setAction() 이라는 메소드가 포함되어 있는지 궁금해서 질문드립니다.

constructor 내부에 this.함수() 가 포함되는 경우 그건 곧 새로운 인스턴스가 생성되는 순간 해당 this.함수() 를 호출한다는 의미가 되는걸까요? 아니면 호출이 아니라 단순 선언이 되는건지 잘 모르겠습니다.

어차피 requestAnimationFrame 으로 실행될때마다 new Character의 메소드 draw() 가 실행되는거라면 cm.context.drawImage() 와 마찬가지로 setAction() 메소드도 draw() 내부에 포함되서 실행시켜도 되지 않나요? constructor 안에 메소드를 포함시킴으로서 기대되는 효과가 있는지 궁금합니다.  (혹시 setZOrder시 배열 참조에서 문제가 발생하기 떄문일까요? 하튼 잘 모르겠습니다)  

첫번째 SMIL <animate> 관련 질문, 그리고 constructor 내부에 메소드를 선언(?) 하는 효과에 대한 질문 - 두가지 모두에 대해서 사실 직접 찾아볼 예정이긴 하지만 혹시나 하는 마음에 질문 남겼습니다. 뭔가 영화 인셉션처럼 꿈속의 꿈속의 꿈으로 들어와있는 느낌이라서 질문 자체가 애매한것같은데, 결국 여기에서 물어보는게 맞다고 판단했습니다.

그리고 질문과는 관계없이, 좋은 강의 만들어주셔서 정말 감사드립니다! 앞으로도 계속해서 업데이트 부탁드리겠습니다.

  

답변 1

답변을 작성해보세요.

0

1. <animate>를 원하시는대로 넣어주시면 됩니다. 예를들어 <rect>의 x위치를 이동시키면서 배경색을 red로 바꾼다면 아래와같이 해주시면 됩니다.

<rect class="rect" x="10" y="10" width="20%" height="20%">
    <animate class="ani" attributeName="x" dur="1s" to="700" repeatCount="1" fill="freeze" begin="indefinite"></animate>
    <animate class="ani2" attributeName="fill" dur="1s" to="red" repeatCount="1" fill="freeze" begin="indefinite"></animate>
</rect>

2. constructor안에 메서드 호출을 포함시킨 이유는, 인스턴스 객체를 생성할 때 기본적으로 해당 메소드를 한번 실행해주겠다는 의미랍니다. 즉 new Character()를 실행해서 소문이나 지청신을 만들 때, 각각 setAction 메소드도 한번 호출이 되는 것이지요~
setAction 메소드의 내용을 constructor에 기술하는 방법도 있지만, setAction은 어차피 나중에 또 따로 호출을 할 용도이기 때문에 따로 메소드로 만들어 주었고, 인스턴스 객체가 만들어질 때 한번 실행해줄 필요도 있는 기능이기 때문에 constructor에서도 호출을 해준 것이라고 생각하시면 됩니다.

참고할만한 웹사이트는
https://css-tricks.com
https://tutsplus.com
https://www.smashingmagazine.com
정도가 생각나네요 :)