How to make my Roact HealthBar Tween

[Coder_1 (System)]

Hi! So i recently begun adding more Roact components into my game. And i have made a health bar it works perfectly but its the fact it doesn’t Lerp none of the documentation showed Lerp but every event works. How would i make the actual bar Lerp with it while still using Roact.

Anyways Here is my code below: How would i implement Lerping thanks!

Anyways Heres my code

local ReplicatedStorage = game:GetService('ReplicatedStorage')
local Roact = require(ReplicatedStorage.Modules.Roact)
local HealthBar = Roact.Component:extend('HealthBar')

local Player = game:GetService('Players').LocalPlayer
local PlayerGui = Player:WaitForChild('PlayerGui')
local Character = Player.Character or Player.CharacterAdded:Wait()

local Humanoid = Character:WaitForChild('Humanoid')
local Health = Humanoid.Health


function HealthBar:init()
    self:setState({
        health = 0,
        maxHealth = 0,
    })
end

function HealthBar:didMount()
    local function updateHealth(health)	        
		self:setState({health = health})
		print(health)   
	 end
	
    local function handleCharacter(character)
        self.healthChangedConnection = Humanoid.HealthChanged:Connect(updateHealth)
        self.maxHealthChangedConnection = Humanoid:GetPropertyChangedSignal("MaxHealth"):Connect(function()
            self:setState({maxHealth = Humanoid.MaxHealth})        
		end)
		
        self:setState({
            health = Humanoid.Health,
            maxHealth = Humanoid.MaxHealth,
        })
    end

    handleCharacter(Character)
end

function HealthBar:render()
	return Roact.createElement('ScreenGui', nil, {
		HealthBarFrame = Roact.createElement('Frame', {
			BorderSizePixel = 0,
			Size = UDim2.new(0.35, 0,0.05, 0),
			Position = UDim2.new(0.011, 0,0.938, 0),
			BackgroundColor3 = Color3.fromRGB(47, 255, 32),
		})
	})
end

function HealthBar:willUnmount()
    self.characterAddedConnection:Disconnect()
    local healthChangedConnection = self.healthChangedConnection
    if healthChangedConnection then
        healthChangedConnection:Disconnect()  
	end
end	

Roact.mount(Roact.createElement(HealthBar), PlayerGui, 'HealthBar')

How would i go about lerping the bar at low health it sizes down and becomes red. Yellow for medium and green for full.

[RakNetProtocol (petko)]

Tweening with Roact

This is kind of a weak point of Roact (and React!) out of the box. One promising animation library is roact-animate by AmaranthineCodices. It’s based on React Native’s Animated, which I haven’t personally used but seems pretty cool. Internally at Roblox, I’ve been working on something similar to Cheng Lou’s React Motion, creatively called Roact Motion. Right now it’s just a prototype, so it isn’t very friendly to set up and there aren’t any good docs. Eventually, I’ll flesh it out, since we’re…

[Coder_1 (System)]

Why can’t I just use Tween Service why do i have to use roact-animate?

[shvkti (knee)]

Yes, you can tween the UI without having to use roact-animate. I would set up a ref in the HealthBar:init() method like this:

function HealthBar:init()
    self.Bar = Roact.createRef()
end

Next, in your HealthBar:render() method, we set the ref to the HealthBarFrame like this:

function HealthBar:render()
	return Roact.createElement('ScreenGui', nil, {
		HealthBarFrame = Roact.createElement('Frame', {
			BorderSizePixel = 0,
			Size = UDim2.new(0.35, 0,0.05, 0),
			Position = UDim2.new(0.011, 0,0.938, 0),
			BackgroundColor3 = Color3.fromRGB(47, 255, 32),
            [Roact.Ref] = self.Bar
		})
	})
end

Now finally, I’ll introduce a new method here called didUpdate().

If you take a look at the picture above, you will see that shouldUpdate fires before anything renders.

function HealthBar:shouldUpdate(nextProps, nextState)
     local frame = self.Bar:getValue() -- // A method for refs to get the instance(in this case the HealthBarFrame)
     frame:TweenSize(UDim2.fromScale(nextState.health/nextState.maxHealth, 0.05), "In", "Linear", 0.3) -- // Tween the frame. You can mess around with these numbers. 
end