Question

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

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

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

创建裁剪路径，然后尝试更改3个多边形的Y坐标（或将它们包裹在＆lt; g＆gt;＆lt; / g＆gt;中）
尝试为多边形的点（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/ 在这里，我在酒吧的顶部使用了一个白色层，就像一个人造面具。但这不是我想要做的工作..

Answer 1

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

3D Bar的GSAP / TimelineMax SVG动画（3个多边形）

1 个答案: