Feature/animation

[whitphx]

Resolves #142

[changeset-bot]

🦋 Changeset detected

Latest commit: 0c68647

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
slidev-addon-fancy-arrow	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Copilot]

Pull Request Overview

This PR adds animation capabilities to the FancyArrow component, allowing arrows to be drawn with a stroke animation effect. The implementation includes support for custom animation duration and delay parameters.

• Adds animation properties (animated, animationDuration, animationDelay) to the FancyArrow component
• Implements stroke-dash animation for arrow paths and arrowheads with proper timing coordination
• Creates utility functions to split SVG paths for individual animation segments

Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
slides.md	Adds documentation examples demonstrating the new animation features
components/FancyArrow.vue	Adds animation props and CSS keyframes for stroke-dash and fill animations
components/use-rough-arrow.ts	Implements core animation logic with path splitting and timing coordination
components/split-path.ts	Utility functions to split SVG path definitions into individual segments
components/split-path.test.ts	Unit tests for path splitting functionality
.changeset/silver-aliens-prove.md	Changeset entry documenting the minor version bump

[Copilot]

The segment.length value is used for both strokeDashoffset and strokeDasharray, but this represents the arc length while the path length might be different. Consider calculating the actual path length using path.getTotalLength() for more accurate animation.

Suggested change

	path.style.strokeDasharray = `${segment.length}`;
	const pathLength = path.getTotalLength();
	path.style.strokeDashoffset = `${pathLength}`;
	path.style.strokeDasharray = `${pathLength}`;

[Copilot]

The regex pattern (?=M(?![a-z])) might not handle all valid SVG path commands correctly. Consider using a more comprehensive SVG path parser or documenting the limitations of this approach, as it may fail with relative move commands (lowercase 'm') or other edge cases.