How to use the d3-ease.easeCubicInOut function in d3-ease

To help you get started, we’ve selected a few d3-ease examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github myxvisual / react-uwp / packages / reveal-effect / src / index.ts View on Github external
hoverColor: config.hoverColor === void 0 ? revealConfig.hoverColor : config.hoverColor,
        zIndex: config.zIndex === void 0 ? revealConfig.zIndex : config.zIndex,
        borderColor: config.borderColor === void 0 ? revealConfig.borderColor : config.borderColor
    } as Required;

    const newTinyColor = tinyColor(newConfig.hoverColor);
    const hsla = newTinyColor.toHsl();
    const hslaColor = newTinyColor.toHslString();
    let storeColor = colorMap.get(hslaColor) as ColorStore;

    if (!storeColor) {
        const gradient = revealStore.hoverCtx.createRadialGradient(0, 0, 0, 0, 0, 1);
        const step = 0.01;
        for (let x = 1; x > 0; x -= step) {
            // let alpha = easing.easeCubicIn(x);
            let alpha = easing.easeCubicInOut(x);
            gradient.addColorStop(x / 2, `hsla(${hsla.h}, ${hsla.h * 100}%, ${hsla.l * 100}%, ${(1 - alpha) * hsla.a})`);
        }
        const borderColor = tinyColor({
            h: hsla.h,
            s: hsla.s,
            l: hsla.l,
            a: 1
        }).toHslString();
        storeColor = { gradient, borderColor };
        colorMap.set(hslaColor, storeColor);
    }

    newConfig.hoverGradient = storeColor.gradient;
    if (!newConfig.borderColor) {
        newConfig.borderColor = storeColor.borderColor;
    }
github DefinitelyTyped / DefinitelyTyped / d3-ease / d3-ease-tests.ts View on Github external
import * as d3Ease from 'd3-ease';

let t_in: number = 0.5;
let t_out: number;

t_out = d3Ease.easeLinear(t_in);

t_out = d3Ease.easeQuad(t_in);
t_out = d3Ease.easeQuadIn(t_in);
t_out = d3Ease.easeQuadOut(t_in);
t_out = d3Ease.easeQuadInOut(t_in);

t_out = d3Ease.easeCubic(t_in);
t_out = d3Ease.easeCubicIn(t_in);
t_out = d3Ease.easeCubicOut(t_in);
t_out = d3Ease.easeCubicInOut(t_in);


let easePolyFactory: d3Ease.PolynomialEasingFactory;

easePolyFactory = d3Ease.easePoly;
easePolyFactory = d3Ease.easePoly.exponent(2);
t_out = easePolyFactory(t_in);

easePolyFactory = d3Ease.easePolyIn;
easePolyFactory = d3Ease.easePolyIn.exponent(2);
t_out = easePolyFactory(t_in);

easePolyFactory = d3Ease.easePolyOut;
easePolyFactory = d3Ease.easePolyOut.exponent(2);
t_out = easePolyFactory(t_in);
github seansfkelley / react-layered-chart / src / core / decorators / AnimateProps.ts View on Github external
const setIntervalId = setInterval(() => {
    onFrame(interpolator(d3Ease.easeCubicInOut(frame / frameCount)));
    if (frame === frameCount) {
      clearInterval(setIntervalId);
    }
    frame++;
  }, durationMs / frameCount);
github row1 / react-declarative-d3 / src / views / bar-chart / animated-chart.js View on Github external
return data.map(x => ({
    letter: x.letter,
    frequency: x.frequency * easeCubicInOut(t),
  }));
};