NumberAnimation | Animate numbers with ease!

Resources Community Resources
, ,
#1

Introduction

Ever wanted to create amazing animated numbers with ease? Well then, I gotcha! Introducing my first ever open-sourced module NumberAnimation!

eebefde52b7eabd68f707b316f85a830

As seen in the above gif, The top label looks more appealing as it increments and the bottom one looks boring and lame with a sudden change. This is where NumberAnimation comes in handy. What’s appealing about the NumberAnimation class is the easiness to be used, Spring + Tween support, and some amazing little features that enhance this module.

API

function NumberAnimation.new(label, valueBase, styling)
	returns a table
	
	Params:
	- label
	Any Gui Instance with the Text property
	
	- valueBase
	A NumberValue or an IntValue which holds the relevant data
	
	- styling
	A dictionary with styling information

	{
		string Style = "Tween" or "Spring"
			Depending on which style you want it to be animated
			
		Tween = {
			number Time = Any positive number - How long the tween should take to complete
			string EasingStyle = Any TweenStyle - The style that the tween follows
			string EasingDirection = "In" or "Out" or "InOut" - The direction for the TweenStyle to adhere to
		}
		
		Spring = {
			number DampingRatio = Any number - Describes the shape of the spring
			number Frequency = Any Number - Describes the speed of the spring
		}
		
		boolean Abbreviate = true or false
			True if you want the number to be abbreviated false if you don't want
			
			example;
			Unabbreviated = 1000000
			Abbreviated = 1M
		
	}
	
NumberAnimation:SetPrefix(prefix: string)
	return void/nil
	
	Params:
	- prefix = Any string
	
	example;
	Before = 1000
	NumberAnimation:SetPrefix("$")
	After = $1000

Example

local NumberAnimation = require(script.NumberAnimation)

local player = game:GetService("Players").LocalPlayer
local textLabel = player.PlayerGui:WaitForChild("ScreenGui").TextLabel
local coins = player.Coins

local coinsNumberAnimation = NumberAnimation.new(textLabel, coins, {
	Style = "Tween",
	Time = 1,
	EasingStyle = "Quad",
	EasingDirection = "InOut",
	Abbreviate = true
})

coinsNumberAnimation:SetPrefix("$")
coinsNumberAnimation:Start()

Module

Credits
@boatbomber for BoatTween module
@Quenty for Maid class
@Fractality for spr module

NumberAnimation is completely free and open-source, It is my first open-sourced project! If you got any bugs or questions don’t hesitate to contact me at AmazingRocker#1015 or @AmazingRock3r

25 Likes
#2

thats goood keep it up its good resource

1 Like
#3

Thanks, Really appreciate it :slight_smile:

1 Like
#4

This is a helpful module, but essentially this is just tweening numbers with Tween Service, but more convenient with a touch of prefix handling and oop.

image
image1141×363 16.8 KB

#5

Thanks, This supports TweenService + PhysicsBased springs. And the ability to abbreviate numbers if needed and finally prefix handling. :slight_smile:

#6

I don’t understand. TweenService could already do the job for us. This plugin is pretty useless.

#7

Module can be simplified and stripped of the “needed modules”

local TweenService = game:GetService("TweenService")
local NumAnim = {}
local Num = {}
Num.__index = Num

local DefaultInfo = TweenInfo.new(1)

function NumAnim.new(Label,Value,Data : table)
	local Info = Data.Info
	if not Info then Info = DefaultInfo end
	
	local self = setmetatable({},Num)
	
	self.Label = Label
	if not Data.Value then
		self.Value = Instance.new("NumberValue")
	end
	self.Num = Value
	self.Tween = TweenService:Create(self.Value,Info,{Value = self.Num})
	self.Prefix = nil
	
	return self
end

function Num:SetPrefix(Prefix : string)
	self.Prefix = Prefix
end

function Num:Start()
	self.Tween:Play()
	
	if self.Label then
		local ChangeConnection = self.Value.Changed:Connect(function()
			local NumValue = self.Value.Value
			if self.Prefix then
				self.Label.Text = string.format("%s %d",self.Prefix,NumValue)
			else
				self.Label.Text = NumValue
			end
		end)
		local Completed
		Completed = self.Tween.Completed:Connect(function()
			ChangeConnection:Disconnect()
			Completed:Disconnect()
		end)
	end
end

return NumAnim

This one also plays tweens properly, unlike yours which does it in a instant thus breaking the purpose of tweening.
It also properly utilizes TweenInfos and TweenService instead of using some cheap copy.

2 Likes
#8

Thanks for the suggestions and feedback, I’m new to scripting and this is my first open-sourced project. I’ll try to improve next time.

1 Like