Javascript 错开动画
我正在尝试使用Staggeto在视频横幅上制作级联动画,但它不起作用。我想级联动画的旗帜展开点击。我的代码是Javascript 错开动画,javascript,gsap,Javascript,Gsap,我正在尝试使用Staggeto在视频横幅上制作级联动画,但它不起作用。我想级联动画的旗帜展开点击。我的代码是 function FullscreenClick(e){ ADTECH.expand(); ADTECH.registerVideoPlayer(videoBGPlayer , 'VideoExpanded'); videoBGPlayer.removeEventListener('timeupdate',timeCheck,false); TweenLi
function FullscreenClick(e){
ADTECH.expand();
ADTECH.registerVideoPlayer(videoBGPlayer , 'VideoExpanded');
videoBGPlayer.removeEventListener('timeupdate',timeCheck,false);
TweenLite.to(wrapper , 1 , { height: 546 });
TweenLite.staggerTo( videoBGPlayer , 1 , {bottom:"+=150", ease:CubicIn.ease}, 0.2);
TweenLite.to( audioOn , 0.4 , { opacity: 1 } );
fullscreenButton.style.visibility = 'hidden';
fomButton.style.visibility = 'visible';
videoBGPlayer.load();
videoBGPlayer.play();
videoBGPlayer.muted = false;
closeButton.style.visibility = 'visible';
window.parent.postMessage('ExpandCreative', '*');
expanded = true;
}
谢谢假设弹性是您想要的效果类型,那么下面的代码应该可以工作。其他缓和效果和配置可在
staggerTo需要一系列目标,而我认为您只传递了一个目标。(你到底想制作什么动画?交错移动一个又一个元素我想做的是点击后制作一个完整的视频横幅970 x 250用层叠效果将横幅动画扩展到970 x 564你说的层叠效果是什么意思?我想你需要的是一个放松功能(完全可定制),而不是蹒跚而行。可能是弹性或反弹会让你得到你想要做的。
function FullscreenClick(e){
ADTECH.expand();
ADTECH.registerVideoPlayer(videoBGPlayer , 'VideoExpanded');
videoBGPlayer.removeEventListener('timeupdate',timeCheck,false);
TweenLite.to(wrapper , 1 , { height: 546 });
TweenLite.to( videoBGPlayer , 1 , {bottom:"+=150", ease: Elastic.easeOut.config(1, 0.3)});
TweenLite.to( audioOn , 0.4 , { opacity: 1 } );
fullscreenButton.style.visibility = 'hidden';
fomButton.style.visibility = 'visible';
videoBGPlayer.load();
videoBGPlayer.play();
videoBGPlayer.muted = false;
closeButton.style.visibility = 'visible';
window.parent.postMessage('ExpandCreative', '*');
expanded = true;
}