用GSAP动画模糊过滤器
用GSAP动画模糊过滤器
提问于 2016-04-26 20:58:45
我想要创建某种放大动画效果使用GSAP。我想要做的是缩放一个元素，将其大小从原来的两倍扩展到正常大小，并应用一个正在消失的blur filter。过滤器应该从blur(15px)开始，然后转到blur(0)。
我想我可以这样做：
var el = $('img');
TweenLite.set(el, {
'webkitFilter': 'blur(15px)',
scale: 2
});
TweenLite.to(el, 0, {
autoAlpha: 1,
delay: 1.75,
ease: Power2.easeIn
});
TweenLite.to(el, 2, {
'webkitFilter': 'blur(0px)',
scale: 1,
delay: 1.7,
ease: Power2.easeIn
});相反，所发生的情况是立即应用blur(0)。
下面是一个简单的钢笔，显示了这个问题。我做错了什么？
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-04-27 22:03:19
你试过更新到GSAP 1.18.4吗？好像在你的书房里工作。到TweenMax 1.18.4的CDN链接是https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js
Stack Overflow用户
发布于 2016-04-27 00:48:01
你不能真正动画模糊过滤器，但你可以设置它。您基本上可以设置时间线，并使用时间线的进度作为在时间线期间设置筛选器的方法。下面是更新函数，它设置了时间线持续时间的模糊。
onUpdate:function(tl){
var tlp = (tl.progress()*40)>>0;
TweenMax.set('#blur img',{'-webkit-filter':'blur(' + tlp + 'px' + ')','filter':'blur(' + tlp + 'px' + ')'});
var heading = $('#blur h3');
heading.text('blur(' + tlp + 'px)');
}下面是由Marzullo http://codepen.io/jonathan/pen/ZWOmmg制作的一个很棒的演示
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36875629
复制相关文章
相似问题
腾讯云开发者
