UIGradient Keypoints not keypointing etc

[Tellygum]

Ok so I’m working with UIGradients recently and they are so tricky and complicated.

I want to clarify, that I ran this code in the command bar to test it first and it worked fine, but then I moved it to my script and I get this error:

‘KeyPoints’ is not a valid member of NumberSequence

Here is my code:

gradient.Transparency.KeyPoints[1] = NumberSequenceKeypoint.new(0,0,0)

[waves5217 (waves)]

A minor typo, it’s Keypoints. Unfortunately, I’m quite convinced you cannot modify a NumberSequence. If you try to modify gradient.Transparency.Keypoints[1].Time, you’ll run into an error. As far as I’m up to date right now, you have to construct a new sequence.

And yes, I know, number sequences tend to be confusing. For now, just forget about the envelopes and assume they are 0. Time (between 0 and 1) and Value (between 0 and 1) are your primary concerns.

Time and value, time and value (and envelope).

Just experiment a little, at least that’s how I got familiar.

gradient.Transparency = NumberSequence.new{
	NumberSequenceKeypoint.new(0,0);
	NumberSequenceKeypoint.new(1,1);
}

print(gradient.Transparency.Keypoints)

NumberSequence

NumberSequenceKeypoint

[Tellygum]

Any knowledge on how to tween a keyframe value? Can’t find anything

[waves5217 (waves)]

Well, sequences can’t be tweened, but at least we can change values manually. So the most basic transition has three key points.

The middle point is moved. Regular loop with linear easying can be enough, for additional easying effect TweenService:GetValue() returns the values tweens would use, except we can now determine the step (alpha value/percent). Even creating a NumberValue, tweening it, and using it as a parameter while the tween is playing shouldn’t cause any considerable performance issues.

Quick example with three points.

local TweenService = game:GetService("TweenService")

local gradient = script.Parent:WaitForChild("UIGradient")

local transparencySeqIn = {}
local transparencySeqOut = {}

local NumSequence = NumberSequence.new
local NumSeqKeypoint = NumberSequenceKeypoint.new

gradient.Transparency = NumSequence{NumSeqKeypoint(0,1), NumSeqKeypoint(1,1)}

-- Calculate sequence of sequences in advance
do local t: number
	for i=.05, .95, .05 do
		t = TweenService:GetValue(i, Enum.EasingStyle.Sine, Enum.EasingDirection.Out)
		transparencySeqOut[#transparencySeqOut+1] = NumSequence{
			NumSeqKeypoint(0,0); NumSeqKeypoint(t,0); NumSeqKeypoint(1,1);
		}
	end
	for i=.95, .05, -.05 do
		t = TweenService:GetValue(i, Enum.EasingStyle.Sine, Enum.EasingDirection.Out)
		transparencySeqIn[#transparencySeqIn+1] = NumSequence{
			NumSeqKeypoint(0,0); NumSeqKeypoint(t,0); NumSeqKeypoint(1,1);
		}
	end
end

local function GradientTransition(reverse: boolean)	
	for _,sequence in ipairs(reverse and transparencySeqIn or transparencySeqOut) do
		gradient.Transparency = sequence
		task.wait()
	end
	
	gradient.Transparency = reverse and NumSequence(1,1) or NumSequence(0,0)
end

-- test
while true do
	GradientTransition()
	task.wait(1)
	GradientTransition(true)
	task.wait(2)
end

(I figured storing sets of number sequences is not a bad idea. Could be even smoother, include some rotation and perhaps one more key point, but it should be enough to illustrate the concept.)