이거 떨어지는 속도 조절은 어디서 하나요?
관련링크
본문
var falling = true;
TweenLite.set("#container",{perspective:600})
TweenLite.set("img",{xPercent:"-50%",yPercent:"-50%"})
var total = 30;
var container = document.getElementById("container"), w = window.innerWidth , h = window.innerHeight;
for (i=0; i<total; i++){
var Div = document.createElement('div');
TweenLite.set(Div,{attr:{class:'dot'},x:R(0,w),y:R(-200,-150),z:R(-200,200)});
container.appendChild(Div);
animm(Div);
}
function animm(elm){
TweenMax.to(elm,R(6,15),{y:h+100,ease:Linear.easeNone,repeat:-1,delay:-15});
TweenMax.to(elm,R(4,8),{x:'+=100',rotationZ:R(0,180),repeat:-1,yoyo:true,ease:Sine.easeInOut});
TweenMax.to(elm,R(2,8),{rotationX:R(0,360),rotationY:R(0,360),repeat:-1,yoyo:true,ease:Sine.easeInOut,delay:-5});
};
function R(min,max) {return min+Math.random()*(max-min)};
https://codepen.io/MAW/pen/KdmwMb
낙엽 떨어지는 속도를 조절하고 싶은데.. 어디를 수정해야하나요?
답변 2
function animm(elm){
TweenMax.to(elm,R(6,15),{y:h+100,ease:Linear.easeNone,repeat:-1,delay:-15});
TweenMax.to(elm,R(4,8),{x:'+=100',rotationZ:R(0,180),repeat:-1,yoyo:true,ease:Sine.easeInOut});
TweenMax.to(elm,R(2,8),{rotationX:R(0,360),rotationY:R(0,360),repeat:-1,yoyo:true,ease:Sine.easeInOut,delay:-5});
};
여기에서
delay:-15 로 된값을 조절하면서 [ Run] 버튼으로 확인해보세요
delay말고 duration을 늘릴수는 없나요?
https://greensock.com/docs/v2/TweenLite/timeScale()
function animm(elm){
// const scale = 1; // default
const scale = 5;
TweenMax.to(elm,R(6,15),{y:h+100,ease:Linear.easeNone,repeat:-1,delay:-15}).timeScale(scale);
TweenMax.to(elm,R(4,8),{x:'+=100',rotationZ:R(0,180),repeat:-1,yoyo:true,ease:Sine.easeInOut}).timeScale(scale);
TweenMax.to(elm,R(2,8),{rotationX:R(0,360),rotationY:R(0,360),repeat:-1,yoyo:true,ease:Sine.easeInOut,delay:-5}).timeScale(scale);
};
답변을 작성하시기 전에 로그인 해주세요.
