Converting Ease Keyframes Different Properties

[Hector Vera]

The speed values you provided represent a keyframe’s influence over the animation’s easing. In the case of the position animation, the keyframe’s easing has an inInfluence of 100 and an outInfluence of 100, while the opacity animation has an inInfluence of 100 and an outInfluence of 86 for the first keyframe and 77 for the second keyframe. These values represent the amount of influence the keyframe has on the animation’s easing at the beginning and end of the animation, respectively.

The speed values themselves represent the rate at which the animation’s easing changes over time. The speed values of 904.630451660156 and 809.959822998047 for the position animation and 86 and 77 for the opacity animation are both in units of “frame percentage” (i.e., a value between 0 and 1 representing the fraction of the total number of frames that have elapsed). These values are determined by the frame length and the total duration of the animation, and they can be converted to different units (e.g., seconds) using basic mathematical calculations.

To convert the speed values to units other than frame percentages, you would need to know the total number of frames in the animation and the duration of the animation in that unit (e.g., seconds). You can then use the speed values to calculate the animation’s easing at specific times during the animation.

For example, to convert the position animation’s speed value of 904.630451660156 to seconds, you would follow these steps:

1. Convert the total duration of the animation to seconds by multiplying it by the frame rate. For example, if the animation has a duration of 5 seconds and a frame rate of 25 fps, you would have a total duration of (5 * 25) = 125 frames.
2. Divide the speed value by the total duration of the animation to get the speed value in seconds. In this case, the speed value would be (904.630451660156 / 125) = 7.23307788.
3. Use the speed value in seconds to calculate the animation’s easing at any specific

[Timur Solomon]

Hi thanks for such a great and detailed answer. But it seems to me that he is not working. The curve affects the key frames, no matter how far they are from each other, the animation runs for 1 or 5 seconds, it doesn’t matter, the speed value will always be the same,

but if you use the duration of the animation in the formula, it is a variable that begins to change, which will give different results depending on the duration of the animation, which cannot be.

This can be seen from the example below, speed does not change depending on how long the animation takes

Example:

// 1 seconds
{
"type": 6413,
"keys": [{
"keyIndex": 1,
"time": 0,
"value": [142.641514355451, 142.641511325694, 0],
"inInfluence": [{
"influence": 56,
"speed": 0
}],
"outInfluence": [{
"influence": 11,
"speed": 2346.42913342616
}],
"inInterpolation": 6613,
"outInterpolation": 6613
}, {
"keyIndex": 2,
"time": 1,
"value": [1777.35849433592, 937.358491306162, 0],
"inInfluence": [{
"influence": 56,
"speed": 597.229950459575
}],
"outInfluence": [{
"influence": 16.666666667,
"speed": 0
}],
"inInterpolation": 6613,
"outInterpolation": 6613
}]
}
// 5 seconds
{
"type": 6413,
"keys": [{
"keyIndex": 1,
"time": 0,
"value": [142.641514355451, 142.641511325694, 0],
"inInfluence": [{
"influence": 56,
"speed": 0
}],
"outInfluence": [{
"influence": 11,
"speed": 2346.42913342616
}],
"inInterpolation": 6613,
"outInterpolation": 6613
}, {
"keyIndex": 2,
"time": 5,
"value": [1777.35849433592, 937.358491306162, 0],
"inInfluence": [{
"influence": 56,
"speed": 597.229950459575
}],
"outInfluence": [{
"influence": 11,
"speed": 0
}],
"inInterpolation": 6613,
"outInterpolation": 6613
}]
}