웹애니메이션 Greensock API 를 이용시 mp3파일을 timeline 에 적용하기

Greensock API 는 Javascript Library 중 하나로서, 웹상에서 애니메이션을 

쉽게 구현할 수 있는 라이브러리 입니다.

이 라이브러리를 사용하여 시간에 따라애니메이션을 적용하는 것은 

기본 기능이지만, 각각의 애니메이션에 효과음과 같은 소리를 부여하는 것은,

API 가 기본적으로 제공하지 않기때문에, 

callback 함수를 이용하여, 별도의 Audio 라이브러리를 호출해 주는 방식으로

처리가 가능합니다.

HTML 파일

<audio id="matrix" preload="auto">

  <source src="http://www.stcollective.pt/laboratorio/testes/begin.mp3"></source>

  <source src="http://www.stcollective.pt/laboratorio/testes/begin.ogg"></source>

</audio>

<div id="box"></div>

CSS 파일

#box {

  position:relative;

  background:red;

  width:200px;

  height:200px;

}

JS파일

var matrix = $("#matrix")[0];

var tl = new TimelineLite();

tl.to("#box", 1, {left:200})

.call(playSound)

.to("#box", 20, {top:200, backgroundColor:"blue"})

function playSound() {

 matrix.play();

}

위의  .call(playSound)  부분에서 playSound 라은 함수를 호출하게 됩니다.

이때, 인자값을 전달할 수 있는데요

아래와 같이 사용할 수 있습니다

//create a timeline that calls myFunction() when it completes

var tl = new TimelineLite({onComplete:myFunction});

 

//now we'll use chaining, but break each step onto a different line for readability...

tl.to(element, 1, {left:100})    //tween element's left to 100

  .call(myCallback)        //then call myCallback()

  .set(element, {opacity:0})    //then set element.opacity to 0.5 immediately

  .call(otherFunction, ["param1", "param2"])    //then call otherFunction("param1", "param2")

  .staggerTo([element1, element2, element3], 1.5, {rotation:45}, 0.25); //finally tween the rotation of element1, element2, and element3 to 45 and stagger the start times by 0.25 seconds

위 소스는 아래 URL 을 참고했습니다

http://codepen.io/GreenSock/pen/3132b3582a21533e8e2d53318e9d522d