Lottie-web: [Question] - Identify segments inside .json file

[iondrimba]

Hi,
I was wondering if there is a way to identify different segments inside the generated .json file.
I didn't saw anything about how to know where a segment starts or ends, or how to get to total length of the frames used in the animation.

PS: Great lib!

[bodymovin]

Hi, segments can't be identified right now.
I was experimenting with composition markers, but didn't get to anything final yet.
How would you use them?

[iondrimba]

That's a great question :)

In a demo that I have build, I did something like this

    this.segments[0] = [0,26];
    this.segments[1] = [26,79];
    this.segments[2] = [79,110];
    this.segments[3] = [110,155];

and the used it like this:

this.anim.playSegments( this.segments[1], this.segments.length<3);

Maybe an array of segments ie: this.anim.segments?

I missed the question about the total frames, is there anything in the .json file?

[bodymovin]

what do you mean by total frames? the current segment frame count?

[iondrimba]

@bodymovin I mean the total frames of the animation exported from AE. I'm curious of that because the guys from AirBnb made Lottie on top of the .json file exported by your lib, and there you can go from start of an animation to the end using percentage values from 0.0 to 1.0

[Mr-Chilly]

Was there any movement on this? Currently, we have to hardcode the frame number of the beginning of each segment into our projects.

I would be happy to have something as simple as an array of segment start values:
[0, 104, 208]
As we can easily work out the end of each segment and end of the total animation. I could then make animations much easier to consume!

[Eklor]

Was there any movement on this? Currently, we have to hardcode the frame number of the beginning of each segment into our projects.

I would be happy to have something as simple as an array of segment start values:
[0, 104, 208]
As we can easily work out the end of each segment and end of the total animation. I could then make animations much easier to consume!

Mr-Chilly, I'm curious to know how you fix this because at the moment I really struggle to do a smooth mouseenter/mouseleave animation because of this issue.

For the moment I kind of do it this way, but that's surely not the way...
If/else are to test if user (RE)Enter when animation is still playing the mouseleave animation.

function fEnter() {
  animation.wrapper.removeEventListener('mouseenter', fEnter);
  if (animation.totalFrames == 60) { 
    var relativeFrame = curFrame + 90;
    var relativeStop = animation.timeCompleted - animation.totalFrames;
    animation.playSegments([relativeFrame, relativeStop], true);
  } else { // Normal Enter
    animation.playSegments([curFrame, 90], true);
  }
  animation.wrapper.addEventListener("mouseleave", fLeave);
  animation.wrapper.onEnterFrame = fSaveFrame;
}