Add FrameStart/FrameEnd range control and read-only frame properties to SKLottieView

[Copilot]

SKLottieView had no programmatic playback control beyond setting Progress directly, making stateful animations (toggle switches, multi-state icons) require polling hacks.

New read-only bindable properties

• Fps — animation frame rate
• FrameCount — frames in the active range
• CurrentFrame — current frame, zero-based within the active range, updated every frame

Frame range control: FrameStart / FrameEnd

Two settable BindableProperty integers that restrict playback to a sub-range of the InPoint→OutPoint span. Duration, FrameCount, Progress, and CurrentFrame operate transparently within the active range. Respected in both forward and reverse playback directions.

Property	Default	Meaning
FrameStart	0	First frame to play (0-based from InPoint)
FrameEnd	-1	End frame, exclusive (-1 = OutPoint, same convention as RepeatCount = -1)

// Multi-state animation: each state is a different frame range
lottieView.FrameStart = 0;  lottieView.FrameEnd = 30;  // idle
lottieView.FrameStart = 30; lottieView.FrameEnd = 50;  // pressed
lottieView.FrameStart = 0;  lottieView.FrameEnd = -1;  // full animation

Values are clamped on assignment and persist across source changes (clamped to the new animation's frame count). XAML two-way binding works directly.

Other

• InPoint/OutPoint from the Lottie file are always respected by Skottie; FrameStart/FrameEnd further sub-clip that range
• 14 unit tests covering frame range behaviour

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[mattleibow]

@copilot i think the goal is to also animate to a position. So actually play. Can you think of a good way to do this.

[Copilot]

@copilot i think the goal is to also animate to a position. So actually play. Can you think of a good way to do this.

Added PlayToFrame, PlayToProgress, and PlayToTime in commit 2daa73d. These drive the animation timer naturally to a target, auto-detecting whether to play forward or backward:

// Toggle switch: animates forward on open, backward on close
lottieView.PlayToFrame(isOn ? lottieView.FrameCount - 1 : 0);

// Animate to the 50% position
lottieView.PlayToProgress(0.5);

// Animate to a specific time
lottieView.PlayToTime(TimeSpan.FromSeconds(1.5));

Key design choices:

• Direction (forward/backward) is auto-detected by comparing target to Progress
• Speed respects AnimationSpeed's magnitude (e.g. 2x speed = twice as fast)
• AnimationCompleted is not fired when PlayTo stops at the target — that event remains for natural playback completion only
• Calling any SeekTo* method or loading a new source cancels a running PlayTo

The sample app also has "Play→0%", "Play→50%", "Play→100%" buttons to demonstrate the animated seeking.

[mattleibow]

@copilot please remove the methods. Please just add the framestart and frameend. We just want to props to control the segment. This needs to be respected in both directions of playback. Instead of 0 and count, it is now start and end.

[Copilot]

@copilot please remove the methods. Please just add the framestart and frameend. We just want to props to control the segment. This needs to be respected in both directions of playback. Instead of 0 a...

Done in commit 1aa694e. All seek/play-to methods (SeekToFrame, SeekToTime, SeekToProgress, PlayToFrame, PlayToProgress, PlayToTime, Pause, Resume) have been removed, along with their internal state and test coverage. The API is now just two plain settable properties:

// Multi-state animation: restrict to a frame sub-range
lottieView.FrameStart = 0;   lottieView.FrameEnd = 30;  // forward: plays 0→29
lottieView.FrameStart = 30;  lottieView.FrameEnd = -1;  // forward: plays 30→end
// AnimationSpeed = -1 reverses direction within the same range

Duration, FrameCount, Progress, and CurrentFrame all reflect the active range. InPoint/OutPoint from the Lottie file are always respected.