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

最近要做一個(gè)"收集水滴"的動(dòng)效, 于是就試用了一下TweenMax實(shí)現(xiàn)這個(gè)效果.

什么是TweenMax

TweenMax是GSAP(GreenSock Animation Platform)創(chuàng)作的動(dòng)畫工具庫(kù). GSAP的產(chǎn)品除了TweenMax, 還有:

• TweenLite: TweenMax的精簡(jiǎn)版, 9kb.
• TimelineMax: 將動(dòng)畫串聯(lián)起來(lái)的庫(kù), 6kb.
• TimelineLite: TimelineMax的精簡(jiǎn)版, 4kb.
• Draggable: 讓元素可以拖來(lái)拖去, 12kb.
• SplitText: 讓文字逐個(gè)/詞/行展現(xiàn)酷炫動(dòng)效.
• DrawSVGPlugin: 動(dòng)態(tài)繪制SVG.
• MorphSVGPlugin: 很酷炫的SVG變換插件
• 其他若干插件

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

想起步, 先看看這個(gè)Get Started里的視頻就好了.

最簡(jiǎn)單的用法就是TweenMax.to(element, duration, options);, 例如

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

可以讓.drop元素在3秒內(nèi), 水平移動(dòng)100px, 放大一倍, 背景色變?yōu)?aaa.

實(shí)現(xiàn)

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

HTML很簡(jiǎn)單, 就是.container里面一個(gè).drop一個(gè).tank.

以下JS讓.drop飄起來(lái)飛向.tank.

var collectDrop = function() {var $drop = $('.drop:not(.anim)'),$tank = $('.tank'),from = $drop.position(),to = $tank.position(),// 計(jì)算從水滴中心到水缸中心所需要的偏移量.x = to.left - from.left + ($tank.width() - $drop.width()) / 2,y = to.top - from.top + ($tank.height() - $drop.height()) / 2,// 創(chuàng)建動(dòng)畫用水滴$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();}})// 水缸動(dòng)效.to($tank, .1, {scale: 1.3}).to($tank, .1, {scale: .8}).to($tank, .1, {scale: 1}); };

這里為了實(shí)現(xiàn)一連串動(dòng)畫, 所以使用了TimelineMax. 由于script中引入了TweenMax, 所以TimelineMax也就自動(dòng)被引入了.

CodePen如下, 你只要點(diǎn)擊水滴就可以看到收集效果了.

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

上面的代碼中關(guān)于動(dòng)效的選項(xiàng), 用到了x和y以利用transform變換位置, scale改變大小, backgroundColor修改顏色, onComplete為動(dòng)畫完成時(shí)的callback, ease設(shè)置動(dòng)畫的easing效果.

在GSAP Ease Visualizer中可以看到更多的easing效果, 你還可以在這里修改參數(shù), 查看效果, 然后將滿意的代碼復(fù)制出來(lái).

水滴CSS

題外話, 本來(lái)只是做個(gè)動(dòng)效, 元素的外觀是次要的. 不過(guò)好奇能不能直接用CSS做出水滴效果, 就搜了一下"droplet css", 竟然真有這么做的. 其實(shí)原理不難(可就是想不到啊=,.=), 就是利用border-radius生成一個(gè)斜著的水滴, 然后旋轉(zhuǎn)45度.

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

效果如下:

旋轉(zhuǎn)45度后?

enjoycss.com上還有不少有意思的實(shí)現(xiàn), 比如愛(ài)心.

(不過(guò)剛發(fā)現(xiàn)enjoycss.com還是alpha版本, 很多bug...比如這個(gè)愛(ài)心點(diǎn)進(jìn)去看到的css就是有問(wèn)題的)

我在這個(gè)愛(ài)心css的基礎(chǔ)上加了個(gè)CSS動(dòng)效, 讓心臟活了起來(lái), CodePen.

動(dòng)畫過(guò)程中水滴的毛邊問(wèn)題

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

針對(duì)這個(gè)問(wèn)題搜了一下, CodePen上有一個(gè)解決方案.

它的解決方法是: 假設(shè)動(dòng)畫中最大的放大比例是2倍, 那么一開(kāi)始繪制元素的時(shí)候就用2倍的大小去繪制, 初始使用transform: scale(.5)縮小到正常比例, 然后動(dòng)畫放大的時(shí)候用scale(1).

我試了一下, 的確管用. 更新后的CodePen如下:

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

效果圖如下:

但是這個(gè)方法不夠優(yōu)雅, 于是繼續(xù)搜了搜, 比如這個(gè)SO問(wèn)題. 可是我試遍了文中講的方法, 包括translateZ(0), -webkit-backface-visibility: hidden;, filter: blur(0);, 可惜都不管用(T_T).

請(qǐng)大神出手.

參考

enjoycss.com

GreenSock Learning Center

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

Draft Countdown

Making muscles with MorphSVG

Paranoid vs shy birds (很搞笑, 移動(dòng)鼠標(biāo)會(huì)讓中間那只鳥轉(zhuǎn)頭, 兩邊的兩只鳥會(huì)偷偷地看中間那只, 如果被中間那只發(fā)現(xiàn)了會(huì)臉紅低頭)

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

morph guy

轉(zhuǎn)載于:https://www.cnblogs.com/7z7chn/p/5771308.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。