Gradient fade at the end of a truncate word - ios

Question

I'm trying to get to a result like this:
And I can't seem to the get there, this is the code I have:
if (size.width > self.name.bounds.size.width) {
CAGradientLayer *l = [CAGradientLayer layer];
CGRect myFrame = self.name.bounds;
myFrame.size.width = 10.0f;
l.frame = myFrame;
l.colors = #[(id)[UIColor whiteColor].CGColor, (id)[UIColor clearColor].CGColor];
l.startPoint = CGPointMake(0.0f, 0.0f);
l.endPoint = CGPointMake(1.0f, 0.0f);
self.name.layer.mask = l;
}
What I'm currently getting is this:
Any help?

Answer 1

The issue with your code is that you are fixing the layer size here.
myFrame.size.width = 10.0f;
The above line fixes the frame size to 10 pixel. So that the layer size will be going to 10 pixel. And the layer can only render on this width.
Just comment or remove above line to get the desired result.
So that your code will be now like
CAGradientLayer *l = [CAGradientLayer layer];
CGRect myFrame = self.name.bounds;
// myFrame.size.width = 10.0f;
l.frame = myFrame;
l.colors = #[(id)[UIColor whiteColor].CGColor, (id)[UIColor clearColor].CGColor];
l.startPoint = CGPointMake(0.0f, 0.0f);
l.endPoint = CGPointMake(1.0f, 0.0f);
self.name.layer.mask = l;
For the bonus - You can make this effect more smooth by adding more colours into the array and by changing the startPoint and endPoint of the layer.
CAGradientLayer *l = [CAGradientLayer layer];
CGRect myFrame = self.name.bounds;
l.frame = myFrame;
l.colors = #[(id)[UIColor lightGrayColor].CGColor, (id)[UIColor whiteColor].CGColor, (id)[UIColor clearColor].CGColor];
l.startPoint = CGPointMake(0.0, 0.5);
l.endPoint = CGPointMake(1.0, 0.5);
self.name.layer.mask = l;