Last active
June 26, 2022 15:18
-
-
Save mvyasu/d4ea457111dc8ba1fa1d9ca576eaa15a to your computer and use it in GitHub Desktop.
A basic Fusion (v0.2) component that mimics a water ripple.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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