Skip to content

fix(svg): fix animation on strokePercent will cause partially drawing.#867

Merged
pissang merged 2 commits into
ecomfe:nextfrom
mrwd2009:fix-svg-strokepercent
Jan 5, 2022
Merged

fix(svg): fix animation on strokePercent will cause partially drawing.#867
pissang merged 2 commits into
ecomfe:nextfrom
mrwd2009:fix-svg-strokepercent

Conversation

@mrwd2009
Copy link
Copy Markdown
Contributor

@mrwd2009 mrwd2009 commented Dec 31, 2021

If we apply an animation on 'style.strokePercent' from 0 to 1, the shape won't be drawn completely using SVG renderer.

image

This problem can be reproduced. You can reference https://codesandbox.io/s/condescending-mclaren-qrhdx?file=/src/App.js . If you click 'Restart Stroke Percent Animation' a few times, you'll see different results.

@pissang pissang self-requested a review January 1, 2022 13:08
@pissang
Copy link
Copy Markdown
Contributor

pissang commented Jan 1, 2022 •
edited
Loading

Thanks for the contribution! We rewrite our SVG renderer in the next branch. Could you recheck the bug in this branch and retarget the fix to this branch if it still exists?

@mrwd2009
Copy link
Copy Markdown
Contributor Author

mrwd2009 commented Jan 4, 2022

Sure, I'll check it in next branch.

@mrwd2009
Copy link
Copy Markdown
Contributor Author

mrwd2009 commented Jan 4, 2022

@pissang I have checked out next branch and tested animation on 'style.strokePercent' property. Same problem was reproduced.

stroke-percent

I have compiled a new bundle according to latest next branch code and used following code to test.
Shall I create an another pull request?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Animation</title>
    <script src="../dist/zrender.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
        html, body, #main {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="main"></div>
    <script type="text/javascript">
        var main = document.getElementById('main');
        // 初始化zrender
        var zr = zrender.init(main, { renderer: 'svg' });

        var rect = new zrender.Rect({
            shape: {
                x: 50,
                y: 50,
                width: 100,
                height: 100,
            },
            style: {
                stroke: '#ff4d4f',
                strokePercent: 0,
                fill: 'none',
            },
        });
        var circle = new zrender.Circle({
          shape: {
            cx: 250,
            cy: 100,
            r: 50,
          },
          style: {
            stroke: '#ff4d4f',
            strokePercent: 0,
            fill: 'none',
          },
        });
        zr.add(rect);
        zr.add(circle);
        rect.animateTo({
          style: {
            strokePercent: 1,
          },
        }, {
          duration: 500,
          easing: 'backInOut',
        });
        circle.animateTo({
          style: {
            strokePercent: 1,
          },
        }, {
          duration: 500,
          easing: 'backInOut',
        });
    </script>
</body>
</html>

@pissang
Copy link
Copy Markdown
Contributor

pissang commented Jan 4, 2022 •
edited
Loading

@mrwd2009 Thanks! A new pull request or change target of this pull request to the next branch will be great.

@mrwd2009 mrwd2009 force-pushed the fix-svg-strokepercent branch from cb0f877 to 0ee1b32 Compare January 4, 2022 06:48
@mrwd2009 mrwd2009 changed the base branch from master to next January 4, 2022 06:49
@mrwd2009
Copy link
Copy Markdown
Contributor Author

mrwd2009 commented Jan 4, 2022

I have changed target of this pull request, please check.

pissang
pissang reviewed Jan 4, 2022
View reviewed changes
Comment thread src/svg/graphic.ts Outdated
if (elExt.__svgPathVersion !== pathVersion
|| !svgPathBuilder
|| strokePercent < 1
|| el.style.strokePercent !== elExt.__svgPathStrokePercent
Copy link
Copy Markdown
Contributor

@pissang pissang Jan 4, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can use variable strokePercent instead of el.style.strokePercent here and in the following code.

Copy link
Copy Markdown
Contributor Author

@mrwd2009 mrwd2009 Jan 4, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, I have changed the code to use 'strokePercent' directly.

@mrwd2009
Copy link
Copy Markdown
Contributor Author

mrwd2009 commented Jan 5, 2022

The changes have been committed, please check.

@pissang pissang merged commit 0a4d6f0 into ecomfe:next Jan 5, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@pissang pissang pissang approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@mrwd2009 @pissang