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

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

Answer 2

您无法为模糊滤镜设置动画，但您可以设置它。您基本上可以设置时间轴并使用时间轴的进度作为在时间轴持续时间内设置过滤器的方法。下面是更新功能，用于设置时间线持续时间内的模糊。

  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

制作的精彩演示

使用GSAP动画模糊滤镜

2 个答案: