使用 GSAP 对模糊滤镜进行动画处理

Animate blur filter with GSAP

本文关键字：动画 处理 滤镜 GSAP 模糊 使用      更新时间：2023-09-26

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

这是一支显示问题的简单笔。我做错了什么？

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

您无法

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

  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

相关文章：