How to use @swim/interpolate - 1 common examples

To help you get started, we’ve selected a few @swim/interpolate 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 swimos / ripple / ui / main / MirrorView.ts View on Github external
const by = b.centerY.value! * bounds.height;
    const bColor = b.chargeColor.value!.darker(chargeDarken).alpha(chargeOpacity);

    const dt = now - a.t0;
    const pulseWidth = 2000;
    const halfPulse = pulseWidth / 2;
    let pulsePhase = (dt % pulseWidth) / halfPulse;
    if (pulsePhase > 1) {
      pulsePhase = 2 - pulsePhase;
    }

    context.lineWidth = 4;
    const gradient = context.createLinearGradient(ax, ay, bx, by);
    gradient.addColorStop(0, aColor.alpha(0).toString());
    if (pulsePhase !== 0 && pulsePhase !== 1) {
      const abColor = Interpolator.color(aColor, bColor).interpolate(pulsePhase);
      gradient.addColorStop(pulsePhase, abColor.toString());
    }
    gradient.addColorStop(1, bColor.alpha(0).toString());
    context.strokeStyle = gradient;

    context.beginPath();
    context.moveTo(ax, ay);
    context.lineTo(bx, by);
    context.stroke();
  }

@swim/interpolate

Interpolator types for blending between values, including numbers, dates, angles, lengths, colors, transforms, shapes, arrays, structures, and other interpolators

Apache-2.0
Latest version published 4 years ago

Package Health Score

60 / 100
Full package analysis

Popular @swim/interpolate functions

Similar packages