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

【问题标题】：GSAP / TimelineMax SVG Animation of 3D Bar (3 polygons)GSAP / TimelineMax 3D Bar 的 SVG 动画（3 个多边形）
【发布时间】：2015-11-17 13:15:02
【问题描述】：

我在 Illustrator 中创建了一个 3D 条（参见 codepen）。现在我想用 TweenMax（或 TimelineMax）对其进行动画处理，就好像它是从底部到顶部构建的一样。

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

我尝试了一些方法来实现这一点，但没有任何运气。

创建了一个剪切路径，然后尝试更改 3 个多边形的 Y 坐标（或将它们包裹在中）
尝试为多边形的点设置动画 (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/ 在这里，我在栏的顶部使用了一个白色层，它的作用就像一个人造面具。但这不是我想要完成这项工作的方式..

【问题讨论】：

不确定它是否有帮助，但您可以查看 this 视频教程，其中讨论了使用 mask 元素而不是 .clip-path。不完全确定这种技术是否可以应用于您的案例。

标签： animation svg gsap

【解决方案1】：

似乎不可能用多边形掩盖多边形然后为形状设置动画。我现在使用路径（在 Illustrator 中使用“制作复合路径”），然后将其用作剪贴蒙版。

【讨论】：