Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Eases on last keyframe: A question. Maybe not an issue. #2620

Open
ChrisGelles opened this issue Aug 17, 2021 · 2 comments
Open

Eases on last keyframe: A question. Maybe not an issue. #2620

ChrisGelles opened this issue Aug 17, 2021 · 2 comments

Comments

@ChrisGelles
Copy link

ChrisGelles commented Aug 17, 2021

In order to better understand the Lottie JSON format, I've been creating simple animations and identifying the properties within the JSON in order to use them interactively later on.

It's a 1 second comp, 24fps.
I made keyframes at frames 0, 12 and 23.

In animating a Shape's Trim Path (end%) and also the Layer's Position, I set up a loop by copy-pasting the keyframes at frame zero into the last frame.

The keyframes from Trim Path (end%) and Position at frame 12 is an arbitrarily different value, just to see some kind of motion.

Anyway, in looking through the JSON, it seems that when adding an Easy Ease, the "Ease" is described by tangent handles, much like a bezier curve, with x and y values for the in- behavior and the out- behavior.

Oddly, the last keyframe has no Ease information, no "i" or "o" properties associated with it.
So far, I cannot tell if this makes a difference in the way the animation behaves.

@bodymovin
Copy link
Collaborator

hi, indeed the last keyframe doesn't have the outgoing and ingoing easing values since there is nothing for it to interpolate with

@ChrisGelles
Copy link
Author

ChrisGelles commented Aug 27, 2021

@bodymovin, though, the in-going ease value interpolates with the previous keyframe... Understandable if there is no outgoing ease value.
However, the incoming interpolation would be affected by position/angle of this tangent handle.

Here's a sketch to explain what I mean:
image

The red line follows flat tangents (what easy ease produces).
The orange line follows a flat outgoing tangent from the preceding keyframe and also follows an upward-pitched incoming handle on the last keyframe.

Given that the Lottie JSONs do not maintain easing information on the last keyframe of a timeline, the animation curves described in the above sketch could not be replicated by Lottie's playback.

In looping, this could cause slight hitches at the seam of the loop, correct?

github-merge-queue bot pushed a commit to linebender/velato that referenced this issue Nov 11, 2024
It seems to me that most of the work to get non-linear easing is already
done.

In order to check what is left to be done I removed the linear-only
enforcement, created a simple example with 3 key frames and compared the
results with lottielab.com editor:

![easing_compare_before](https://github.com/user-attachments/assets/0e7a5df6-f10f-4c45-a31f-f15c75cc8ff2)

I have found that:
- only the easing curves from first two key frames seem to affect the
animation as rendered in lottielab.
- [Lottie
spec](https://lottie.github.io/lottie-spec/latest/specs/properties/)
mentions that: "_All keyframes MUST have an i and o value, unless It is
the last keyframe in the sequence OR ..._"
- This comment mentions that the last one is unused:
airbnb/lottie-web#2620 (comment)

The way I understand it is that while we are moving into position
described by next key frame, we still should be using `o` and `i`
parameters from the previous one.

After changing the `Time::frames_and_weight` to use the easing from
current key frame, positions seem to match pretty well:


![easing_compare_after](https://github.com/user-attachments/assets/d2a563d8-66b4-40d5-a49e-f67fd7dee529)

What do you think? Is there anything else missing to enable non-linear
easing?

Thanks for creating an amazing library!

---------

Co-authored-by: Spencer C. Imbleau <spencer@imbleau.com>
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants