使用 GSAP 制作动画模糊滤镜

Question

我想使用 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)。

这里有一个简单的 pen 显示问题。我做错了什么？

Answer 1

您无法真正为模糊滤镜设置动画，但您可以对其进行设置。您基本上可以设置一个时间线，并使用时间线的进度作为在时间线持续时间内设置过滤器的方法。下面是在时间轴持续时间内设置模糊的更新函数。

  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

Answer 2

您是否尝试过只更新到 GSAP 1.18.4？似乎在您的代码笔中工作。 TweenMax 1.18.4 的 CDN link 是 https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js

使用 GSAP 制作动画模糊滤镜

Animate blur filter with GSAP

javascript

blur

gsap