New Animation Curve Editor: Fine Grain Control of Animations

This is very awesome! I can’t wait to use this!

8 Likes

Moon Animation Suite slowly getting wiped out of existence lol. This is a super nice update. Something I’ve been waiting for a long time now. I’d like to thank the team who made this possible and this will certainly unlock a lot of cool new movements.

Edit: Quaternion Curves support is fantastic!

25 Likes

It is already out :slight_smile: You need to upgrade to Studio v524 and enable the Channel Animations beta feature.

12 Likes

Oh, I meant out by out of beta. Or can you use it in the live roblox client even if its in beta?

2 Likes

This is a very cool update, ive always found it hard trying to manually make a curve for animations and it never looked right.

Can we expect this to come to NumberSequence editors in the future?

10 Likes

Absolutely awesome, thank you so much for the upkeep! A bit of an important question, though:
For my game, I calculate a player’s limbs’ cframes based on animation Pose data. The old animation editor used a custom EasingStyles module, whose source is shown below:

EasingStyles.lua
--Ignore semicolons. Converted from C++

module.GetEasing = function(style, direction, percent)
	if style == "Bounce" then
		if direction == "Out" then
			return 1 - easeOut(percent, bounce)
		elseif direction == "In" then
			return 1 - bounce(percent)
		else
			return 1 - easeInOut(percent, bounce)
		end
	elseif style == "Elastic" then
		if direction == "Out" then
			local totalTime = 1
			local p = totalTime*.3;
			local t = 1 - percent;
			local s = p/4;
			return (1 +2^(-10*t) * math.sin( (t*totalTime-s)*(math.pi*2)/p ));
		elseif direction == "In" then
			local totalTime = 1
			local p = totalTime*.3;
			local t = percent;
			local s = p/4;
			return 1 - (1 + 2^(-10*t) * math.sin( (t*totalTime-s)*(math.pi*2)/p ));
		elseif direction == "InOut" then
			local t = percent *2;
			local p = (.3*1.5);
			local s = p/4;
			if (t < 1) then
				t = t - 1;
				return 1 - (-.5 * 2^(10*t) * math.sin((t-s)*(math.pi*2)/p ));
			else
				t  = t - 1;
				return 1 - (1 + 0.5 * 2^(-10*t) * math.sin((t-s)*(math.pi*2)/p ));
			end
		end
	elseif style == "Cubic" then
		if direction == "Out" then
			return 1 - easeOut(percent, cubic)
		elseif direction == "In" then
			return 1 - cubic(percent)
		elseif direction == "InOut" then
			return 1 - easeInOut(percent, cubic)
		end
	elseif style == "Linear" then
		return 1 - percent
	elseif style == "Constant" then
		if style == "Out" then
			return 1
		elseif style == "In" then
			return 0
		elseif style == "InOut" then
			return 0.5
		end
	end
end

function easeIn(t,func)
	return func(t)
end

function easeOut(t,func)
	return 1-func(1-t)
end

function easeInOut(t,func)
	t=t*2
	if t < 1 then
		return easeIn(t,func)*.5
	else
		return .5+easeOut(t-1,func)*.5
	end
end

function bounce(t)
	if t<.36363636 then
		return 7.5625*t*t
	elseif t<.72727272 then
		t=t-.54545454
		return 7.5625*t*t+.75
	elseif t<.90909090 then
		t=t-.81818181
		return 7.5625*t*t+.9375
	else
		t=t-.95454545
		return 7.5625*t*t+.984375
	end
end

function cubic(t)
	return t^3
end

return module

This has been the source of this popular bug report: Animation cubic easing direction reversed
My question would be - how would I go about calculating the CFrame of a limb, given two poses to lerp between? This is my current code, which relies on the same EasingStyles module:

local function GetAlpha(Time, LastPose, NextPose)
	local TimeChunk = GetTimeFromPose(NextPose) - GetTimeFromPose(LastPose)
	local TimeIn = Time - GetTimeFromPose(LastPose)
	local Weight = TimeIn / TimeChunk

	return EasingStyles.GetEasing(LastPose.EasingStyle.Name, LastPose.EasingDirection.Name, 1 - Weight)
end

Do the new animations rely on TweenService:GetValue, and does the easing style behave differently when working in this animation editor, compared to the old? I’m a bit unsure if I should still be relying on the EasingStyles module, or on something else.

7 Likes

it likely does what the blender > roblox animator plugin does where it converts the curves to a bunch of linear easing style keyframes. give it a shot and if that’s the case, then yes this would work in-game.

7 Likes

It does not, though! :slight_smile:

We use the new CurveAnimation system (see CurveAnimation, Vector3Curve, RotationCurve for Quaternion rotations and EulerRotationCurve for Euler Angles rotations) that was introduced as part of this same Beta Program in December last year

These channels are independent and can have a different set of keys associated with them.

14 Likes

Oh man this is awesome definitely can’t wait to try this out, this is a much needed feature to roblox. Glad it’s added it will make doing animation much better.

5 Likes

We ab-so-lute-ly agree! :smiley:

It definitely is a different take on orientation animation and it might require some getting used to, but once you have defined your important poses, tweaking the interpolation between them should be much easier than adjusting the three angles separately.

Plus, no more gimbal lock!

8 Likes

Okay, now this is REALLY cool.

I find it a lot easier to make an animation with the old editor, and then use the curves to fine-tune it. (this might be intended use tho lol)

This is reaaaaally useful for making animations look a lot more fluid and natural.

So, does this work in games? If you upload a curve animation and use it in a live game, will players be able to see it?

2 Likes

The new Channel Animation format does not use TweenService at all. As a matter of fact, we have even retired Bounce and Elastic easings and they are not available for that format (they are still available for KeyframeSequence animations, though!).

Instead, we only rely on constant, linear, and cubic segments between two successive keys. However, we added tools to generate cubic curves that match the Bounce and Elastic easings, but those tools are only available in the Curve Editor, so animators can still create the same kind of animations they are familiar with.

For your specific use case, I think I would keep the current implementation. Setting up two RotationCurveKeys within a RotationCurve within a CurveAnimation would carry quite a lot of overhead for a relatively simple interpolation between two CFrames.

11 Likes

Nothing short of amazing, this helps with conveying animations to appear as if they have weight and fluid motions. I hope to see more features akin to other engines such as unreal.

2 Likes

This is ONE of my favorite features so far, thank you so much to everyone involved, my part of work this week is just constant animating! This will save so much time, importing to Roblox Studio after being finished in Blender to tweak around keyframes is the best thing ever! Well, you could but now you have more controls.

So excited for the future of this feature! :purple_heart:

5 Likes

Thank you for the insight! To clarify on the last paragraph, would the current code work as expected with current and future animations? A bit confused on that regard.
As you mentioned the new animation format not using TweenService but rather constant, linear and cubic, if I have two Poses with Cubic easing styles, would EasingStyles.GetEasing return the same alpha value as what the actual animation would calculate in-game? A bit confused if only the animation-editor end was changed, or in-game also.

1 Like

Amazing! The animation editor was in great need of something like this and I’m glad it’s here!

Sorry moon animator…

2 Likes

Using a Channel Animation, I suppose LastPose and NextPose would both be keys in a RotationCurve instance (so you can store CFrames), each with their own time. You can then use GetValueAtTime to get the interpolated value. This would also involve the InterpolationMode of the LastPose (Constant, Linear, Cubic) and for the latter, the tangents of both keys.

Note that the Rotation is only designed to store orientations, so if you are also interpolating between two positions, you would have to do the same operation with a Vector3Curve.

4 Likes

This was a long-needed addition to the incredibly basic animation editor. I applaud the team for putting this in!

I will make it clear that this is an incredibly valueable tool when animating, because it can turn any animation into a completely different style, or even just fine-tune movements.

5 Likes

I’m not an animator I have no clue what any of this does. Can someone give us an example like a before and after using the new feature to showcase the update in video format?? :pray:

4 Likes

Before today, the only way for developers/artists to create an animation in the ACE was to use the DopeSheet view. While this is a standard way of manipulating each pose the animation goes through, its representation is lacking some visual information. You can see an example of a DopeSheet in the post above (that’s the first screenshot, the one with all the little diamonds).

The new Curve Editor is another standard tool, but it gives a much better representation of how a value evolves over time. For instance, the next screenshot shows two blue curves going from 0 to 0.10 and 0.25 respectively. This is much more intuitive. Additionally, adding tangent controls allows artists to fine tune their animation even more.

5 Likes