DOCSEARCHbyAlgolia
Submit Docs

siriwave

repository·master·Indexed 23 days ago

https://github.com/kopiro/siriwave

A JavaScript library for creating animated wave visualizations similar to the Siri interface, version 2.4.0. It supports multiple curve styles, including the ClassicCurve for layered sine wave effects and the iOS9Curve for fluorescent curve styles. The library provides the SiriWave class for initialization and configuration options for amplitude, speed, and visual properties via IClassicCurveDefinition and IiOS9CurveDefinition.

Tokens
740
Snippets
0
Records
6
Agent score
81%

What's inside siriwave

  1. Configure iOS9Curve ranges via SiriWave options

    master

    When using the iOS9Curve style, you can customize the behavior of the individual fluorescent curves by providing specific ranges in the SiriWave options object. These ranges define the minimum and maximum values for randomized properties like speed, amplitude, and width. If no ranges are provided, the curve uses its internal defaults.

    Available range configuration keys within ctrl.opt.ranges:

    • noOfCurves: [number, number] - Range for the number of curves to spawn.
    • amplitude: [number, number] - Range for the final amplitude of each curve.
    • offset: [number, number] - Range for the phase offset of each curve.
    • width: [number, number] - Range for the width of each curve.
    • speed: [number, number] - Range for the speed of each curve.
    • despawnTimeout: [number, number] - Range for how long a curve stays active before fading.

  2. Get default ClassicCurve layer definitions

    master
    The ClassicCurve class provides a static method getDefinition() that returns an array of IClassicCurveDefinition objects. These predefined definitions are used to create the multi-layered, complex wave effect characteristic of the Siri animation by varying attenuation, line width, and opacity across multiple passes.

  3. Initialize SiriWave with the SiriWave class

    master

    To create a SiriWave animation, instantiate the SiriWave class by passing an Options object. The container property is required and specifies the HTMLElement where the canvas will be appended. By default, the animation starts automatically if autostart is true (which is the default).

    Note that speed and amplitude should not be modified directly on the instance; instead, use the provided setSpeed and setAmplitude methods to ensure smooth interpolation via lerpSpeed.

  4. Use the ClassicCurve style for SiriWave animations

    master

    The ClassicCurve class implements the ICurve interface to provide the signature 'Siri-style' wave animation. It renders multiple overlapping sine waves with varying attenuation, opacity, and line width to create a layered effect.

    To use it, you must instantiate it with a SiriWave instance (as the controller) and an IClassicCurveDefinition object which configures the specific visual properties of the curve layer.

  5. Use iOS9Curve predefined color definitions

    master
    The iOS9Curve class provides a static method getDefinition() which returns an array of IiOS9CurveDefinition objects. These definitions specify the color (as an RGB string without the rgb() wrapper) and whether a supportLine should be drawn. This is useful for selecting from the built-in color palettes (White, Blue, Red, Green) used in the iOS9 style.

  6. Configure ClassicCurve layers via IClassicCurveDefinition

    master

    When working with ClassicCurve, you can define the visual characteristics of the wave layers using the IClassicCurveDefinition interface.

    Key properties include:

    • attenuation: Controls the decay/strength of the wave effect.
    • lineWidth: The thickness of the drawn line.
    • opacity: The alpha transparency of the line (0 to 1).
    • color: An optional RGB string (e.g., 'rgb(0, 123, 255)'). If not provided, it falls back to the color defined in the SiriWave controller.