I’m trying to tween the size and background color of both a button (EatBtn
) and its parent frame (EatFrame
) when the button is clicked. The goal is to create a feedback animation where the size and color change smoothly.
However, instead of the size tween starting from the center of the frame and button (which is what I want), the size change seems to happen from the top-left corner. This causes the frame and button to shift during the tween, rather than stay in place. I’m not sure how to make the tween apply from the middle, so that the elements remain where they are visually.
Here’s the code I’m using for the tweening:
local player = game.Players.LocalPlayer
local character = player.Character or player.CharacterAdded:Wait()
local humanoid = character:WaitForChild("Humanoid")
local animation = Instance.new("Animation")
local userInputService = game:GetService("UserInputService")
local tweenService = game:GetService("TweenService")
animation.AnimationId = "rbxassetid://135856840673683"
local loadedAnimation = humanoid:LoadAnimation(animation)
local isPlaying = false
local eatingSound = script.Parent["minecraft eat (HD)"]
local chair = workspace:WaitForChild("Chair"):FindFirstChild("Seat")
local eatFrame = script.Parent.Parent
local eatBtn = script.Parent
local originalSizeFrame = eatFrame.Size
local originalColorFrame = eatFrame.BackgroundColor3
local originalSizeBtn = eatBtn.Size
local originalColorBtn = eatBtn.BackgroundColor3
eatBtn.AnchorPoint = Vector2.new(0.5, 0.5)
eatBtn.Position = UDim2.new(0.5, 0, 0.5, 0)
local function playCroppedSound(duration)
eatingSound:Play()
delay(duration, function()
eatingSound:Stop()
end)
end
local function isPlayerSittingInChair()
local seatPart = character.Humanoid.SeatPart
return seatPart and seatPart == chair
end
local function tweenElements(smallerSizeFrame, smallerSizeBtn, darkerColor, duration)
local sizeTweenFrame = tweenService:Create(eatFrame, TweenInfo.new(duration), {Size = smallerSizeFrame})
local colorTweenFrame = tweenService:Create(eatFrame, TweenInfo.new(duration), {BackgroundColor3 = darkerColor})
local sizeTweenBtn = tweenService:Create(eatBtn, TweenInfo.new(duration), {Size = smallerSizeBtn})
local colorTweenBtn = tweenService:Create(eatBtn, TweenInfo.new(duration), {BackgroundColor3 = darkerColor})
sizeTweenFrame:Play()
colorTweenFrame:Play()
sizeTweenBtn:Play()
colorTweenBtn:Play()
end
local function playAnimation()
if not isPlaying and isPlayerSittingInChair() then
local newSizeFrame = UDim2.new(originalSizeFrame.X.Scale * 0.9, originalSizeFrame.X.Offset * 0.9, originalSizeFrame.Y.Scale * 0.9, originalSizeFrame.Y.Offset * 0.9)
local newSizeBtn = UDim2.new(originalSizeBtn.X.Scale * 0.9, originalSizeBtn.X.Offset * 0.9, originalSizeBtn.Y.Scale * 0.9, originalSizeBtn.Y.Offset * 0.9)
tweenElements(newSizeFrame, newSizeBtn, Color3.fromRGB(80, 80, 80), 0.3)
task.spawn(function()
playCroppedSound(0.5)
end)
loadedAnimation:Play()
isPlaying = true
loadedAnimation.Stopped:Wait()
isPlaying = false
task.delay(0.3, function()
tweenElements(originalSizeFrame, originalSizeBtn, originalColorFrame, 0.3)
end)
end
end
script.Parent.MouseButton1Click:Connect(function()
playAnimation()
end)
userInputService.InputBegan:Connect(function(input, gameProcessed)
if input.KeyCode == Enum.KeyCode.Q and not gameProcessed then
playAnimation()
end
end)
I’ve set the AnchorPoint
of the button to (0.5, 0.5)
to keep it centered within the frame. However, the EatFrame
still tweens from the top-left corner, even though I want the size change to happen from the center. How can I ensure the frame tweens from the middle, keeping it visually in place during the size change?
Any suggestions would be appreciated. Thanks!