Skip to content

Instantly share code, notes, and snippets.

@mvyasu
Last active June 26, 2022 15:18
Show Gist options
  • Select an option

  • Save mvyasu/d4ea457111dc8ba1fa1d9ca576eaa15a to your computer and use it in GitHub Desktop.

Select an option

Save mvyasu/d4ea457111dc8ba1fa1d9ca576eaa15a to your computer and use it in GitHub Desktop.
A basic Fusion (v0.2) component that mimics a water ripple.
local Packages = game:GetService("ReplicatedStorage"):WaitForChild("Packages")
local Fusion = require(Packages.Fusion)
local Cleanup = Fusion.Cleanup
local Hydrate = Fusion.Hydrate
local Children = Fusion.Children
local Computed = Fusion.Computed
local Tween = Fusion.Tween
local Value = Fusion.Value
local New = Fusion.New
type RippleProperties = {
Thickness: number?,
Lifetime: number?,
MaxSize: UDim?,
[any]: any,
}
local function Ripple(props: RippleProperties): Frame
local rippleThickness = props.Thickness or 4
local rippleLifetime = props.Lifetime or 4
local maxSize = props.MaxSize or UDim.new(0, 100)
local rippleAlphaValue = Value(0)
local rippleAlpha = Tween(rippleAlphaValue, TweenInfo.new(rippleLifetime, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out))
rippleAlphaValue:set(1)
local newRipple = New "Frame" {
Name = "Frame",
BackgroundColor3 = Color3.fromRGB(255, 255, 255),
BackgroundTransparency = 1,
AnchorPoint = Vector2.new(.5, .5),
SizeConstraint = Enum.SizeConstraint.RelativeYY,
Size = Computed(function()
local a = rippleAlpha:get()
return UDim2.new(maxSize.Scale*a, maxSize.Offset*a, maxSize.Scale*a, maxSize.Offset*a)
end),
[Children] = {
New "UICorner" {
CornerRadius = UDim.new(1, 0),
},
New "UIStroke" {
Color = Color3.fromRGB(255, 255, 255),
Transparency = rippleAlpha,
Thickness = Computed(function()
return (1-(rippleAlpha:get() * .5)) * rippleThickness
end),
},
}
}
do
local destroyRippleThread = task.delay(rippleLifetime, function()
newRipple:Destroy()
end)
newRipple.Destroying:Connect(function()
if destroyRippleThread then
pcall(task.cancel, destroyRippleThread)
destroyRippleThread = nil
end
end)
end
local hydrateProps = table.clone(props)
hydrateProps.MaxSize = nil
hydrateProps.Lifetime = nil
hydrateProps.Thickness = nil
return Hydrate(newRipple)(hydrateProps)
end
--[[ Example
while task.wait(1) do
local rippleScale = math.random(2, 6)/6
Ripple {
Lifetime = 5,
MaxSize = UDim.new(.25*rippleScale, 100),
Position = UDim2.fromScale(math.random(), math.random()),
Thickness = rippleScale*6,
Parent = script.Parent
}
end
]]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment