JS动画 | 用TweenMax实现收集水滴效果

之前在CodePen上接触了TweenMax, 被它能做到的酷炫效果震撼了. (文末放了5个GSAP的效果GIF)

最近要做一个"收集水滴"的动效, 于是就试用了一下TweenMax实现这个效果.

什么是TweenMax

TweenMax是GSAP(GreenSock Animation Platform)创作的动画工具库. GSAP的产品除了TweenMax, 还有:

• TweenLite: TweenMax的精简版, 9kb.
• TimelineMax: 将动画串联起来的库, 6kb.
• TimelineLite: TimelineMax的精简版, 4kb.
• Draggable: 让元素可以拖来拖去, 12kb.
• SplitText: 让文字逐个/词/行展现酷炫动效.
• DrawSVGPlugin: 动态绘制SVG.
• MorphSVGPlugin: 很酷炫的SVG变换插件
• 其他若干插件

TweenMax就是GSAP的"全家桶", 包含了TweenLite, TimelineLite, TimelineMax, CSSPlugin, AttrPlugin, RoundPropsPlugin, DirectionalRotationPlugin, BezierPlugin 和 EasePack.

想起步, 先看看这个Get Started里的视频就好了.

最简单的用法就是TweenMax.to(element, duration, options);, 例如

TweenMax.to('.drop', 3, { x: 100, scale: 2, backgroundColor: #aaa })

可以让.drop元素在3秒内, 水平移动100px, 放大一倍, 背景色变为#aaa.

实现

<!-- jade -->
.container
  .drop
  .tank

HTML很简单, 就是.container里面一个.drop一个.tank.

以下JS让.drop飘起来飞向.tank.

var collectDrop = function() {
  var $drop = $('.drop:not(.anim)'),
      $tank = $('.tank'),
      from = $drop.position(),
      to = $tank.position(),
      // 计算从水滴中心到水缸中心所需要的偏移量.
      x = to.left - from.left + ($tank.width() - $drop.width()) / 2,
      y = to.top - from.top + ($tank.height() - $drop.height()) / 2,
      //  创建动画用水滴
      $el = $drop.clone().addClass('anim').appendTo('.container'),
      tl = new TimelineMax();
  // 水滴升起
  tl.to($el, 2, {
      y: -$el.height() * 3,
      scale: 2,
      ease: Elastic.easeOut.config(1, 0.4)
    })
    // 水滴飞向水缸
    .to($el, .5, {
      x: x,
      y: y,
      backgroundColor: '#832fc2',
      scale: .5,
      ease: Power1.easeIn,
      onComplete: function() {
        $el.remove();
      }
    })
    // 水缸动效
    .to($tank, .1, {
      scale: 1.3
    })
    .to($tank, .1, {
      scale: .8
    })
    .to($tank, .1, {
      scale: 1
    });
};

这里为了实现一连串动画, 所以使用了TimelineMax. 由于script中引入了TweenMax, 所以TimelineMax也就自动被引入了.

CodePen如下, 你只要点击水滴就可以看到收集效果了.

See the Pen tweenmax collect drop by Richard Liu (@lzl124631x) on CodePen.

上面的代码中关于动效的选项, 用到了x和y以利用transform变换位置, scale改变大小, backgroundColor修改颜色, onComplete为动画完成时的callback, ease设置动画的easing效果.

在GSAP Ease Visualizer中可以看到更多的easing效果, 你还可以在这里修改参数, 查看效果, 然后将满意的代码复制出来.

水滴CSS

题外话, 本来只是做个动效, 元素的外观是次要的. 不过好奇能不能直接用CSS做出水滴效果, 就搜了一下"droplet css", 竟然真有这么做的. 其实原理不难(可就是想不到啊=,.=), 就是利用border-radius生成一个斜着的水滴, 然后旋转45度.

.droplet {
  width: 4em;
  height: 4em;
  border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  background-color: #07C;
  transform: rotate(-45deg);
}

效果如下:

.droplet {
display: inline-block;
width: 4em;
height: 4em;
border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
background-color: #07C;
transform: rotate(-45deg);
}
.droplet.before {
transform: none;
}

旋转45度后⟹

enjoycss.com上还有不少有意思的实现, 比如爱心.

(不过刚发现enjoycss.com还是alpha版本, 很多bug...比如这个爱心点进去看到的css就是有问题的)

我在这个爱心css的基础上加了个CSS动效, 让心脏活了起来, CodePen.

.heart {
display: block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 100px;
height: 90px;
position: relative;
animation: heartbeat .5s infinite;
}

.heart:before,
.heart:after {
display: block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 50px;
height: 80px;
position: absolute;
content: "";
-webkit-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
background: red;
}

.heart:before {
top: 0;
left: 50px;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
-webkit-transform-origin: 0 100% 0;
transform-origin: 0 100% 0;
}

.heart:after {
top: 0;
left: 0;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
-webkit-transform-origin: 100% 100% 0;
transform-origin: 100% 100% 0;
}

@keyframes heartbeat {
80% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}

动画过程中水滴的毛边问题

细心的人应该注意到了, 我上面的效果图中, 水滴在放大之后有比较明显的毛边. 我测试了下, 一旦动画停止, 毛边就消失了.

针对这个问题搜了一下, CodePen上有一个解决方案.

它的解决方法是: 假设动画中最大的放大比例是2倍, 那么一开始绘制元素的时候就用2倍的大小去绘制, 初始使用transform: scale(.5)缩小到正常比例, 然后动画放大的时候用scale(1).

我试了一下, 的确管用. 更新后的CodePen如下:

See the Pen tweenmax collect drop by Richard Liu (@lzl124631x) on CodePen.

效果图如下:

但是这个方法不够优雅, 于是继续搜了搜, 比如这个SO问题. 可是我试遍了文中讲的方法, 包括translateZ(0), -webkit-backface-visibility: hidden;, filter: blur(0);, 可惜都不管用(T_T).

请大神出手.

参考

1. enjoycss.com
2. GreenSock Learning Center

附上几个GSAP的酷炫CodePen, 大家感受下, CodePen上搜索GSAP或TweenMax还有很多.

1. Draft Countdown
   
   
2. Making muscles with MorphSVG
   
   
3. Paranoid vs shy birds (很搞笑, 移动鼠标会让中间那只鸟转头, 两边的两只鸟会偷偷地看中间那只, 如果被中间那只发现了会脸红低头)
   
   
4. holy running cow (有一种MineCraft的赶脚)
   
   
5. morph guy