Radial & Angular Gradients

[dabbott]

Radial Gradients

The differences from linear:

• we should allow modifying the elipseLength of the gradient
• we should show a thin line around the ellipse of the gradient. I think one radius is the line from from to to, and the other radius is elipseLength (if this is hard, we don't need to do it - it's not super important. I think this may just be one call to drawArc though, so we can try it).

Note that "ellipse" is spelled incorrectly in the Sketch data format, and we can't easily change this. If we need to write "ellipse" in our own code, we should spell it correctly though.

RadialGradient.mov

Angular Gradients

These work totally differently from linear. We show the gradient stops on a circle, and allow clicking the circle to add new gradient stops. I think from and to aren't used at all - the gradient and editor UI always fills the entire layer frame.

Sketch gets a bit fancy and moves one gradient stop out of the way if 2 stops overlap, but we don't need to do that. Multiple stops can overlap and only the top one should be clickable

AngularGradient.mov

It looks like the position of gradient stop during a drag is determined solely by the angle from the center of the layer to your mouse:

AngularGradientMovement.mov

---

I just added an example of each of these gradients to Gradient.sketch. We also have one of each in Demo.sketch.