WIP: [RFC] JDK-8211038: Add css fadein/fadeout functions.

[brcolow]

https://bugs.openjdk.java.net/browse/JDK-8211038

fadein
fadein( <color> , <number>% )

The fadein function takes a color and computes a more opaque version of that color.
The second parameter is the opacity, ranging from 0% to 100%. Has no effect on
fully opaque colors.

Examples:

fadein(rgba(35, 70, 112, 0.8), 10%) => rgba(35, 70, 112, 0.88)
fadein(rgba(35, 70, 112, 0), 100%) => rgba(35, 70, 112) = rgb(35, 70, 112)

fadeout
fadeout( <color>, <number>% )

The fadeout functions takes a color and computes a more transparent version of that
color. The second parameter is the transparency, ranging from 0% to 100%. Has no effect
on fully transparent colors.

Examples:

fadeout(rgba(35, 70, 112, 0.8), 10%) => rgba(35, 70, 112, 0.72)
fadeout(rgba(35, 70, 122), 30%) => rgba(35, 70, 122, 0.7)
fadeout(rgb(35, 70, 112), 100%) => rgba(35, 70, 112, 0)

[nlisker]

Iv'e had this on my to-do list for the Color class. Looking at the Java class and the CSS:

Java has

• a general deriveColor​ method for HSBA.
• brighter/darker methods for the B component.
• saturate/desaturate methods for the S component.

CSS has

• a derive function for the B component.
• propsed here: fade/fadein/fadeout functions for the A component.

Apart for the naming confusion (are the CSS names following a reference?), I find the difference in APIs odd. Does CSS not need a general HSBA or S functions?

If this RFE's concept is approved, I'll do the same for the Color class.

[brcolow]

Making the Java API and css functions lineup makes sense to me. In terms of your question about if the CSS names are following a reference, let me include a snippet of my research on that how I came up with the names for these functions (at the time when I wrote this css did not have functions as such, and I am not sure if things have changed in that regard since web APIs seem to move at light-speed, but CSS pre-processors did and do):

I did a (very brief) survey of the current landscape of CSS pre-processors
(namely less and sass) to see if they have these color functions and if so
what their form is. Here are my results:

Less:

In less, these functions exist as color operation functions, namely fadein and fadeout:

fadein

Decrease the transparency (or increase the opacity) of a color, making it more opaque.
Has no effect on opaque colors. To fade in the other direction use fadeout.

Parameters:

color: A color object.
amount: A percentage 0-100%.
method: Optional, set to relative for the adjustment to be relative to the current value.
Returns: color

Example: fadein(hsla(90, 90%, 50%, 0.5), 10%)

Output: rgba(128, 242, 13, 0.6) // hsla(90, 90%, 50%, 0.6)

fadeout

Increase the transparency (or decrease the opacity) of a color, making it less opaque. To fade in the other direction use fadein.
Parameters:

color: A color object.
amount: A percentage 0-100%.
method: Optional, set to relative for the adjustment to be relative to the current value.
Returns: color

Example: fadeout(hsla(90, 90%, 50%, 0.5), 10%)

Output: rgba(128, 242, 13, 0.4) // hsla(90, 90%, 50%, 0.4)

Sass:

In sass, these functions exist as opacity functions, namely opacify/fade-in, transparentize/fade-out (the names have aliases):

opacify($color, $amount)
Also known as: fade_in

Makes a color more opaque. Takes a color and a number between 0 and 1, and returns a color with the opacity increased by that amount.

Examples:

opacify(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.6)
opacify(rgba(0, 0, 17, 0.8), 0.2) => #1

Parameters:
$color [Color]
$amount [Number] The amount to increase the opacity by, between 0 and 1
Returns:
[Color]

transparentize($color, $amount)
Also known as: fade_out

Makes a color more transparent. Takes a color and a number between 0 and 1, and returns a color with the opacity decreased by that amount.

Examples:

transparentize(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.4)
transparentize(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 0.6)

Parameters:
$color [Color]
$amount [Number] — The amount to decrease the opacity by, between 0 and 1
Returns:
[Color]

[nlisker]

I think transparentize and opacify make more sense, at least on the Java side. brighter/darker should probably have been brighten/darken.

[brcolow]

Currently the behavior of fadein might seem a bit arbitrary in that in a color has 0 alpha to start with, and fadein is called on that color with an argument of 100%, instead of it staying at 0 it goes to full opacity (1.0). I can change that behavior if it is thought to be counter-intuitive. In other words fadein(rgba(x, y, z, 0.0), 100%) = rgba(x, y, z, 1.0).

[kevinrushforth]

As announced in this message, the official jfx repository is moving from hg.openjdk.java.net/openjfx/jfx-dev/rt to github.com/openjdk/jfx.

This sandbox repository is being retired on 1-Oct-2019. You will need to migrate your WIP pull request to the openjdk/jfx repo if you want to continue working on it. Here are instructions for migrating your pull request. The updated CONTRIBUTING.md doc has additional information on how to proceed.

Once you have done this, it would be helpful to add a comment with a pointer to the new PR.

NOTE: since this is a feature / enhancement request it needs to be discussed on the openjfx-dev mailing list if you want it to be considered.

---

The new openjdk/jfx repo will be open for pull requests on Wednesday, 2-Oct-2019. I will send email to the openjfx-dev mailing list announcing this.