之前在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); }

效果如下:

旋轉45度后?

enjoycss.com上還有不少有意思的實現, 比如愛心.

(不過剛發現enjoycss.com還是alpha版本, 很多bug...比如這個愛心點進去看到的css就是有問題的)

我在這個愛心css的基礎上加了個CSS動效, 讓心臟活了起來, CodePen.

動畫過程中水滴的毛邊問題

細心的人應該注意到了, 我上面的效果圖中, 水滴在放大之后有比較明顯的毛邊. 我測試了下, 一旦動畫停止, 毛邊就消失了.

針對這個問題搜了一下, 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).

請大神出手.

參考

enjoycss.com

GreenSock Learning Center

附上幾個GSAP的酷炫CodePen, 大家感受下, CodePen上搜索GSAP或TweenMax還有很多.

Draft Countdown

Making muscles with MorphSVG

Paranoid vs shy birds (很搞笑, 移動鼠標會讓中間那只鳥轉頭, 兩邊的兩只鳥會偷偷地看中間那只, 如果被中間那只發現了會臉紅低頭)

holy running cow (有一種MineCraft的趕腳)

morph guy

轉載于:https://www.cnblogs.com/7z7chn/p/5771308.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的JS动画 | 用TweenMax实现收集水滴效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。