[FREE] SiriWave A simulate a Siri-like wave animation

Extensions
,
1

🧩 SiriWave

An extension for MIT App Inventor 2.
A custom component developed by th using Fast, designed to simulate a Siri-like wave animation.
Telegram | GitHub
Blogger | YouTube
Find More Extension
Terms & Conditions

:memo: Specifications

:package: Package: io.th.siriwave
:floppy_disk: Size: 12.72 KB
:gear: Version: 1.0
:iphone: Minimum API Level: 7
:date: Updated On: 2025-05-09T18:30:00Z
:computer: Built & documented using: FAST v2.8.4
:books: Library Used On Thanks alexgomes09 to this awesome library.
:arrow_down: Download Aix
:arrow_down: Aia
siriwaveview.aia (14.6 KB)

:placard: Find More info on GitHub

Demo

d13a89fc-7305-4b81-98aa-802814ebe4bd.gif

Screenshot_2025-05-11-10-38-15-223_appinventor.ai_Techhamara91.siriwaveview.jpg

Blocks

Start_Event
Error_Event
Stop_Event

WaveSpeed_Method
WaveColorWhite_Method
WaveColorRGB_Method
WaveColorRed_Method
WaveColorGreen_Method
WaveColorBlue_Method
WaveColorBlack_Method
WaveColorARGB_Method
TransparentBackground_Method
StrokeWidth_Method
StopAnimation_Method
StartAnimation_Method
Reset_Method
Initialize_Method
GradientBackground_Method
BackgroundColorRGB_Method
BackgroundColorARGB_Method

Transparent_Get_Property
StrokeWidth_Set_Property
Red_Get_Property
PhaseShift_Set_Property
PhaseShift_Get_Property
InitialPhaseOffset_Set_Property
InitialPhaseOffset_Get_Property
IdleAmplitude_Set_Property
IdleAmplitude_Get_Property
Green_Get_Property
Frequency_Set_Property
Frequency_Get_Property
Blue_Get_Property
Black_Get_Property
BackgroundColor_Set_Property
BackgroundAlpha_Set_Property
Amplitude_Set_Property
Amplitude_Get_Property
White_Get_Property
WaveVerticalPosition_Set_Property
WaveVerticalPosition_Get_Property
WaveSpeed_Set_Property
WaveNumber_Set_Property
WaveNumber_Get_Property
WaveHeight_Set_Property
WaveHeight_Get_Property
WaveColor_Set_Property
WaveColor_Get_Property

Events:

SiriWave has total 3 events.

OnStart

Triggered when the wave animation starts.

OnStop

Triggered when the wave animation stops.

OnError

Triggered when an error occurs.

Parameter Type
message text

Methods:

SiriWave has total 17 methods.

Initialize

Initialize the SiriWaveView inside a Vertical or Horizontal Arrangement.

Parameter Type
arrangement component

BackgroundColorRGB

Set background color using RGB values

Parameter Type
red number
green number
blue number

BackgroundColorARGB

Set background color using ARGB values (with alpha transparency). Example: SetBackgroundColorARGB(255, 255, 0, 0) for a fully opaque red background.

Parameter Type
alpha number
red number
green number
blue number

TransparentBackground

Set transparent background

GradientBackground

Set gradient background

Parameter Type
startColor number
endColor number
isVertical boolean

StartAnimation

Start the wave animation.

StopAnimation

Stop the wave animation.

WaveSpeed

Get current wave animation speed.

  • Return type: number

StrokeWidth

Get current wave stroke width.

  • Return type: number

Reset

Reset the wave to its initial state.

WaveColorRGB

Set the wave color using RGB values (0-255 for each component).

Parameter Type
red number
green number
blue number

WaveColorARGB

Set the wave color with alpha transparency (0-255 for each component).

Parameter Type
alpha number
red number
green number
blue number

WaveColorBlue

Set wave color to a predefined blue color (#2196F3).

WaveColorRed

Set wave color to a predefined red color (#F44336).

WaveColorGreen

Set wave color to a predefined green color (#4CAF50).

WaveColorWhite

Set wave color to white (#FFFFFF).

WaveColorBlack

Set wave color to black (#000000).

Setters:

SiriWave has total 13 setter properties.

BackgroundColor

Set background color of the view

  • Input type: number

BackgroundAlpha

Set background alpha (transparency) value (0-255)

  • Input type: number

WaveSpeed

Set wave animation speed. Default is 0.05.

  • Input type: number

StrokeWidth

Set wave stroke width. Default is 2.0.

  • Input type: number

WaveHeight

Set the wave height.

  • Input type: number

Amplitude

Set the wave amplitude. Example: Amplitude(0.5) sets the amplitude to 0.5.

  • Input type: number

IdleAmplitude

Set the idle amplitude of the wave. Example: IdleAmplitude(0.5) sets the idle amplitude to 0.5.

  • Input type: number

Frequency

Set the frequency of the waves. Example: Frequency(1.5) sets the frequency to 1.5.

  • Input type: number

WaveNumber

Set the Wave Number of the waves. Example: WaveNumber(2) sets the wave number to 2.

  • Input type: number

PhaseShift

Set the phase shift of the wave animation. Example: PhaseShift(0.15) sets the phase shift to 0.15.

  • Input type: number

WaveVerticalPosition

Set the vertical position of the wave (default is 2).

  • Input type: number

InitialPhaseOffset

Set the initial phase offset of the wave. Example: InitialPhaseOffset(0.0) sets the initial phase offset to 0.0.

  • Input type: number

WaveColor

Set the wave color using a hex string (e.g., #FF0000 for red).

  • Input type: text

Getters:

SiriWave has total 15 getter properties.

White

Returns the color White

  • Return type: number

Black

Returns the color Black

  • Return type: number

Red

Returns the color Red

  • Return type: number

Green

Returns the color Green

  • Return type: number

Blue

Returns the color Blue

  • Return type: number

Transparent

Returns a transparent color

  • Return type: number

WaveHeight

Set the wave height.

  • Return type: number

Amplitude

Set the wave amplitude. Example: Amplitude(0.5) sets the amplitude to 0.5.

  • Return type: number

IdleAmplitude

Set the idle amplitude of the wave. Example: IdleAmplitude(0.5) sets the idle amplitude to 0.5.

  • Return type: number

Frequency

Set the frequency of the waves. Example: Frequency(1.5) sets the frequency to 1.5.

  • Return type: number

WaveNumber

Set the Wave Number of the waves. Example: WaveNumber(2) sets the wave number to 2.

  • Return type: number

PhaseShift

Set the phase shift of the wave animation. Example: PhaseShift(0.15) sets the phase shift to 0.15.

  • Return type: number

WaveVerticalPosition

Set the vertical position of the wave (default is 2).

  • Return type: number

InitialPhaseOffset

Set the initial phase offset of the wave. Example: InitialPhaseOffset(0.0) sets the initial phase offset to 0.0.

  • Return type: number

WaveColor

Set the wave color using a hex string (e.g., #FF0000 for red).

  • Return type: text

Thanks

Techhamara

Feel free to contact us any quarry or suggestions.

2 Likes