SiriLazor

Sirwave.js wrapper for blazor to generate siri-wave animations in both classic and IOS9+ Styles.

Classical Style

Before IOS9 style

IOS9 Style

The IOS9 style

Installation

Install SiriLazor with dotnet cli in your Blazor app.

dotnet add package SiriLazor

using SiriLazor.Component.Extention;

// Inside your ConfigureServices method
builder.Service.AddSiriLazor();

3.Add these two script tag in your root file _Host.cshtml for Blazor Server Apps or index.html for Blazor WebAssembly Apps:

<script src="_framework/blazor.webassembly.js"></script>
<script src="_content/SiriLazor/siriWave.js" type="text/javascript"></script>
<script src="_content/SiriLazor/siriLazorInterop.js" type="text/javascript"></script>

Usage

After you installed SirLazor, then you can use the SiriLazor's components:

1. Classic Style

@using SiripLazor.UI;

<ClassicWave SetDefaultOptions></ClassicWave>

2. IOS9 Style

@using SiripLazor.UI;

<IOS9Wave SetDefaultOptions></IOS9Wave>

Options

Both components have several options to be set to customize the wave:

ClassicWave

Parameter	Type	Description	Default
`Ratio`	`double?`	Ratio of the display to use.	calculated
`Speed`	`double?`	The speed of the animation.	0.2
`Amplitude`	`double?`	The amplitude of the complete wave-form.	1.0
`Frequency`	`double?`	The frequency of the complete wave-form.	6.0
`Color`	`string?`	The hex color of the wave.	#ffffff
`Cover`	`bool?`	The canvas covers the entire width or height of the container	false
`Width`	`double?`	Sets the width parameter.	600.0
`Height`	`double?`	Sets the height parameter.	200.0
`Autostart`	`bool?`	Decide wether start the animation on boot	false
`PixelDepth`	`double?`	Number of step (in pixels) used when drawed on canvas.	0.2
`LerpSpeed`	`double?`	Lerp speed to interpolate properties.	0.01
`Definitions`	`IEnumerable<ClassicWaveCurveDefintion>?`	Override definition of the curves, check the siriwave.js.	null
`GlobalCompositeOperation`	`string?`	GlobalCompositeOperation of the canvas, controls wave overlap design.	"lighter"

IOS9Wave

Parameter	Type	Description	Default
`Ratio`	`double?`	Ratio of the display to use.	calculated
`Speed`	`double?`	The speed of the animation.	0.2
`Amplitude`	`double?`	The amplitude of the complete wave-form.	1.0
`Cover`	`bool?`	The canvas covers the entire width or height of the container	false
`Width`	`double?`	Sets the width parameter.	600.0
`Height`	`double?`	Sets the height parameter.	200.0
`Autostart`	`bool?`	Decide wether start the animation on boot	false
`PixelDepth`	`double?`	Number of step (in pixels) used when drawed on canvas.	0.2
`LerpSpeed`	`double?`	Lerp speed to interpolate properties.	0.01
`iOS9Ranges`	`IOS9WaveRanges?`	Sets the iOS 9 wave ranges parameter, check the siriwave.js.	null
`Definitions`	`IEnumerable<IOS9WaveCurveDefintion>?`	Override definition of the curves, check the siriwave.js.	null
`GlobalCompositeOperation`	`string?`	GlobalCompositeOperation of the canvas, controls wave overlap design.	"lighter"

For setting the GlobalCompositeOperation, you can use GlobalCompositeOperation static class.

Default Options

You can just use SetDefaultOptions parameter to set the options to default:

 @using SiripLazor.UI;

 <IOS9Wave SetDefaultOptions></IOS9Wave>

SiriObject

By refrencing both components you can access SiriLazor object''s methods,basically the object holds the index of the Siriwave's instance so it can access it's animation.

 @using SiripLazor.UI;

 <ClassicWave SetDefaultOptions @ref="wave"></ClassicWave>

 @code{
   ClassicWave wave;

   async Task Stop() => await wave.Stop();
  }

Methods

Stop:
- Description: Stops the SiriWave animation.
- Usage: await Stop();
Start:
- Description: Starts the SiriWave animation.
- Usage: await Start();
SetSpeed(animated):
- Description: Sets the speed of the SiriWave animation to the specified value.
- Usage: await SetSpeed(double value);
SetAmplitude(animated):
- Description: Sets the amplitude of the SiriWave to the specified value.
- Usage: await SetAmplitude(double value);
DisposeAsync:
- Description: Disposes of the SiriWave, cleaning up associated resources.
- Usage: await DisposeAsync();

Example

📑 See the full example here.

License

MIT

p6laris/SiriLazor