html5 svg+TweenMax逼真水波纹动画特效

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

js代码

<script src="js/TweenMax.min.js"></script>
<script>
let timeline = new TimelineMax({
  repeat: -1,
  yoyo: true }),

feTurb = document.querySelector('#feturbulence');

timeline.add(
TweenMax.to(feTurb, 15, {
  onUpdate: function () {
    let bfX = this.progress() * 0.005 + 0.015, //base frequency x
    bfY = this.progress() * 0.05 + 0.1; //base frequency y
    feTurb.setAttribute('baseFrequency', `${bfX} ${bfY}`);
  } }),
0);</script>