css - GSAP 笔划动画 strokeDashoffset 无法正常工作

Question

我在这里使用 gsap 我正在尝试制作笔画动画 我知道了。但问题是完整的 SVG 没有出现一半图标出现了我尝试更改 strokeDashoffset 这可能是 getTotalLength() 的问题；谁能帮我解决这个问题。

/* Icon Stroke Animation */
var path = document.getElementsByClassName('iconStrokeAnim');
var l = $(".iconStrokeAnim").get(0).getTotalLength();
TweenMax.set(path, {
  strokeDasharray: l
});
TweenMax.fromTo(path, 3, {
  strokeDashoffset: l
}, {
  strokeDashoffset: 0
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" width="59" height="61" viewBox="0 0 59 61">
                                                        <defs>
                                                            <clipPath id="b1nka">
                                                                <path fill="#fff" d="M0 42.385h31.23V37.18H0z" />
                                                            </clipPath>
                                                            <clipPath id="b1nkb">
                                                                <path fill="#fff" d="M28.255 0h5.942v4.465h4.465v5.942h-4.465v4.465h-5.942v-4.465H23.79V4.465h4.465z" />
                                                            </clipPath>
                                                        </defs>
                                                        <g>
                                                            <g>
                                                                <g />
                                                                <g>
                                                                    <g>
                                                                        <path fill="none" class="iconStrokeAnim" stroke="#1c65fc" stroke-miterlimit="50" stroke-width="2" d="M19.336 23.048a3.718 3.718 0 1 1-7.435 0 3.718 3.718 0 0 1 7.435 0z" />
                                                                    </g>
                                                                    <g>
                                                                        <path fill="none" class="iconStrokeAnim" stroke="#1c65fc" stroke-miterlimit="50" stroke-width="2" d="M52.796 16.358a3.718 3.718 0 1 1-7.435 0 3.718 3.718 0 0 1 7.435 0z" />
                                                                    </g>
                                                                    <g transform="rotate(90 16 52)">
                                                                        <path fill="none" class="iconStrokeAnim" stroke="#1c65fc" stroke-miterlimit="50" stroke-width="2" d="M8.18 40.15v0h14.872v23.795H8.18v0" />
                                                                    </g>
                                                                    <g>
                                                                        <path fill="none" class="iconStrokeAnim" stroke="#1c65fc" stroke-miterlimit="50" stroke-width="4" d="M0 42.385v0h31.23v0-5.205 0H0v0z" clip-path="url(&quot;#b1nka&quot;)" />
                                                                    </g>
                                                                    <g>
                                                                        <path fill="none" class="iconStrokeAnim" stroke="#1c65fc" stroke-miterlimit="50" stroke-width="4" d="M28.255 0h5.942v4.465h4.465v5.942h-4.465v4.465h-5.942v-4.465H23.79V4.465h4.465z" clip-path="url(&quot;#b1nkb&quot;)" />
                                                                    </g>
                                                                    <g>
                                                                        <path fill="none" class="iconStrokeAnim" stroke="#1c65fc" stroke-miterlimit="50" stroke-width="2" d="M23.296 30.349c.721 1.69 1.984 7.574 1.984 7.574H6.69s1.262-5.884 1.983-7.574c.7-1.642 4.187-1.333 7.312-1.314 3.125-.019 6.61-.328 7.311 1.314z" />
                                                                    </g>
                                                                    <g>
                                                                        <path fill="none"  stroke="#1c65fc" class="iconStrokeAnim" stroke-linejoin="round" stroke-miterlimit="50" stroke-width="2" d="M44.946 23.69c-3.108 1.113-5.536 3.66-5.536 7.64v6.819c0 1.004.463 1.665 1.056 1.971.25.129.518.193.785.193.266 0 .535-.064.785-.193.593-.306 1.055-.967 1.055-1.971V31.33c0-.586.171-1.125.45-1.6.109-.185.234-.36.372-.526V57.25c0 1.049.514 1.734 1.172 2.046.267.127.267.19.838.19.57 0 .57-.063.837-.19.659-.312 1.173-.997 1.173-2.046l.235-13.997c.204-.161.377-.25.53-.255h.007v0h.006c.147 0 .319.08.53.252l.237 13.963a.377.377 0 0 0-.001.037c0 1.049.515 1.734 1.172 2.046a1.956 1.956 0 0 0 1.675 0c.659-.312 1.173-.997 1.173-2.046V29.205c.137.165.263.341.371.526.28.475.45 1.014.45 1.6v6.818c0 1.004.464 1.665 1.056 1.971.25.129.519.193.785.193.267 0 .535-.064.785-.193.593-.306 1.056-.967 1.056-1.971V31.33c0-3.981-2.428-6.528-5.536-7.641a11.212 11.212 0 0 0-3.76-.64 11.21 11.21 0 0 0-3.758.64z" />
                                                                    </g>
                                                                </g>
                                                            </g>
                                                        </g>
                                                    </svg>

Answer 1

看起来问题在于您只获得了第一个元素的长度，然后对所有元素使用该长度(并且它们的长度不匹配)。也许你打算这样做:

$(".iconStrokeAnim").each(function() {
  var l = this.getTotalLength();
  TweenMax.set(this, {strokeDasharray:l});
  TweenMax.fromTo(this, 3, {strokeDashoffset:l}, {strokeDashoffset:0});
});

另外请记住，有很多浏览器不一致和错误与动画 strokeDashoffset 和计算 GreenSock 的 DrawSVGPlugin 解决的 SVG 元素的长度有关，因此您可能需要考虑这一点。它确实需要 Club GreenSock 成员(member)资格，但希望您会觉得这样做是值得的。使用 DrawSVGPlugin，您的代码可以简化为:

TweenMax.fromTo(".iconStrokeAnim", 4, {drawSVG:0}, {drawSVG:"100%"});

这是一个代码笔: https://codepen.io/GreenSock/pen/83849013324fee131015c2b01633edf0?editors=0010

补间快乐!