什么是TweenMax

JS动画 | 用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);
}
}