3D Bar的GSAP / TimelineMax SVG动画(3个多边形)

时间:2015-11-17 13:15:03

标签: animation svg tweenmax gsap

我在插画家中创建了一个3D栏(参见codepen)。现在我想用TweenMax(或TimelineMax)为它设置动画,好像它是从底部到顶部构建的。

这是我需要创建的最终结果: http://postimg.org/image/pg2drnvch/

我尝试了一些事情来实现这一目标,但没有任何运气。

  • 创建裁剪路径,然后尝试更改3个多边形的Y坐标(或将它们包裹在< g>< / g>中)
  • 尝试为多边形的点(http://greensock.com...ing-attrplugin/
  • 设置动画

我希望有人能帮助我。

Codepen网址:http://codepen.io/boldcolin/pen/rOPPgP

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="bar_1_" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
 width="140.5px" height="366.7px" viewBox="0 0 140.5 366.7"   style="enable-background:new 0 0 140.5 366.7;" xml:space="preserve"
>
<style type="text/css">
.st0{clip-path:url(#SVGID_2_);fill:#8BBE3F;}
.st1{clip-path:url(#SVGID_2_);fill:#81A83F;}
.st2{clip-path:url(#SVGID_2_);fill:#A1C63C;}
</style>
<g>
    <defs>
        <polygon id="SVGID_1_" points="80.3,0 0,40.1 0,336.7 60.2,366.7 140.5,327.1 140.5,30.7          "/>
    </defs>
    <clipPath id="SVGID_2_">
        <use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
    </clipPath>
    <polygon class="st0" points="140.7,169.4 0.2,178.9 0.2,350.2 60.4,380.1 140.7,340.6         "/>
    <polyline class="st1" points="60.4,380.1 60.4,205.9 0.2,178.9 0.2,350.2         "/>
    <polygon class="st2" points="0.2,178.9 80.5,138.7 140.7,169.4 60.4,209      "/>
</g>

    

这是一个例子:http://boldinteractive.nl/raet/bar/ 在这里,我在酒吧的顶部使用了一个白色层,就像一个人造面具。但这不是我想要做的工作..

1 个答案:

答案 0 :(得分:0)

似乎不可能用多边形遮罩多边形然后为形状设置动画。我现在正在使用路径(在Illustrator中使用&#39;制作复合路径&#39;)然后将其用作剪贴蒙版。