Xanimator V.2.2.0 | Smooth/Nonlinear animation transitions

Resources Community Resources
, , , ,
#1

Xanimator

"Why does roblox only give us like linear fades with the :Play() function?" - Frayxen

image
image597Ă—655 66.4 KB

What is Xanimator?

Xanimator is a component that allows you to tween the animation weight of AnimationTracks, this can be used to transition between 2 animations smoothly, allowing you to create more human looking transitions.

Xanimator works by Queueing up the transitions and then stepping them using math.lerp() and TweenService:GetValue().

Here is a video for demonstration:

(Music made by Kuko)

There is more to come but as of now this is all it does.

Why I made this

Over the years while developing projects within the Roblox engine I always struggled working with animations due to the fact they are extremely limited, but mainly the transition part, it’s always linear and this absolutely ruined combat feel for my games and animating every transition by hand is simply inefficient.

Inspired by this post:
Nonlinear transitions between animations - Feature Requests / Engine Features - Developer Forum | Roblox

I had an idea, and after building a prototype proving it was possible I was able to create Xanimator.

How to use

Install the module and drag it into your place of choice, then require it.
local Xanimator = require(path)

Start by creating a new Xanimator component for your existing rig by passing it’s Animator.

local Rig = path
local animator = Xanimator.new(Rig.AnimationController.Animator)

Now load your animations

local Animations = path
local Idle = animator:Load("Idle", Animations.Idle)
local Walk = animator:Load("Walk", Animations.Walk)

Let’s set up the update cycle.

local RunService = game:GetService("RunService")

RunService.PreAnimation:Connect(function(deltaTime: number)
    animator:Update(deltaTime)
end)

Awesome now let’s play them and transition between them

-- Start weight at 1
Idle:SetWeight(1)
Idle:Play()
-- Start weight at 0
Walk:SetWeight(0)
Walk:Play()
-- Transition between them
Walk:Blend(1, 1, Enum.EasingStyle.Sine, Enum.EasingDirection.Out)
Idle:Blend(0, 1, Enum.EasingStyle.Sine, Enum.EasingDirection.Out)

If you would like to see it in action there is an example place provided:

Methods

There are 2 components.

Xanimator

:Load(name: string, animation: Animation)

Loads animation.
Returns Anim component.

:Remove(name: string)

Removes and destroys animation.

:Update(deltaTime: number)

Updates component, use RunService.PreAnimation to step.

:Destroy()

Destroys Xanimator component.

Anim

:Blend(targetWeight: number, duration: number, style: Enum.EasingStyle, direction: Enum.EasingDirection)

:SetSpeed(speed: number)

:SetWeight(weight: number)

:Play(fadeOutTime: number, fadeOutStyle: Enum.EasingStyle, fadeOutDirection)

:Pause()

:Resume()

:Reverse()

:Stop(fadeOutTime: number, fadeOutStyle: Enum.EasingStyle, fadeOutDirection, speed : number)

Things to note

  • Easing styles such as back and elastic do not work since they overshoot. AdjustWeight() only works on values from [1, 0].
  • This resource still has more features to come such as animatin groups to save and manage animation priorities efficiently.
  • There might still be some bugs and memory leaks, if you find them report them to me and I will try and fix them as soon as possible.

What did you think

  • I will be using this!
  • I like this.
  • It just needs some improvements.

0 voters

Credits

Signal+｜Insanely optimized script signal - Resources / Community Resources - Developer Forum | Roblox

Download

Xanimator V2.2.0.rbxm (6.8 KB)

Previous versions

Xanimator V2.1.0.rbxm (6.6 KB)
Xanimator V2.0.0.rbxm (8.3 KB)
SmoothAnimator V1.0.0.rbxm (8.4 KB)

18 Likes
#2

Update V2.0.0

Xanimator has updated, here’s what’s new:

Changelog

  • Reworked the entire resource to be more intuitive and developer friendly by changing animations to be components with their own methods you can call similar to animation tracks.
  • Implemented more methods: :Pause(), :Reverse(), :SetWeight(), :SetSpeed(), etc.
  • Bug fixes.
#3

Update V2.1.0

A minor update, that’s it.

Changelog

3 Likes
#4

Im try it soon. Do its a custom animator class or simple wrapper?

1 Like
#5

It is a wrapper to some extent; this was done because using the default Roblox functions will trigger linear transitions, that’s also why the Finished event exists too.

Although for the things that aren’t wrapped you can directly modify the animation track, I know it is a bit clunky but it was left like that to save memory.

Also roblox gives you no way to get all loaded animations inside an animator, so this fixes that by storing them in a dictionary so you can check them all.

1 Like
#6

If I understand correctly, this is basically a custom TweenService, that works with animation blending?

Also I recommend using GitHub instead of manually keeping track of previous versions. That also allows people to easily and quickly view the source code.

1 Like
#7

It is a component mounted into an existing Animator instance.

It allows you to load animations and then manipulate their weight using easing styles, Roblox’s :Play() function only supports linear fades where the weight linearly transitions to the target weight.

Although it is supposed to lessen the pain of having to manage animations but those features are not implemented yet.

I don’t really like using github as of now, I will probably end up using it later since in college they make us use it.

1 Like
#8

Update V2.2.0

Changelog

  • Added :Between() method to Xanimator class.
  • Added :Between() method to Anim class.

These new methods should make transition from A animation to B animation less of a pain, I plan to add some ways to manage and cancel blends in future updates too as currently the only way to do so is really clunky.