GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → CubeSugar → React Native Waveview

CubeSugar / React Native Waveview

Licence: mit
WaveView for React-Native

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

react-nativesvgwave

Projects that are alternatives of or similar to React Native Waveview

Goat
Annotate Images (or goats) On The Web™
Stars: ✭ 78 (-11.36%)
Mutual labels:  svg
Asciitosvg
Create beautiful SVG renderings of ASCII diagrams.
Stars: ✭ 82 (-6.82%)
Mutual labels:  svg
Svg Native Viewer
SVG Native viewer is a library that parses and renders SVG Native documents
Stars: ✭ 85 (-3.41%)
Mutual labels:  svg
Twelvemonkeys
TwelveMonkeys ImageIO: Additional plug-ins and extensions for Java's ImageIO
Stars: ✭ 1,221 (+1287.5%)
Mutual labels:  svg
Waveview
🏄 WaveView 一个水波纹动画控件视图，支持波纹数，波纹振幅，波纹颜色，渐变色，波纹速度，波纹方向等属性完全可配。
Stars: ✭ 81 (-7.95%)
Mutual labels:  wave
Svg.js
The lightweight library for manipulating and animating SVG
Stars: ✭ 9,315 (+10485.23%)
Mutual labels:  svg
Vue Flow Editor
Vue + Svg 实现的flow可视化编辑器
Stars: ✭ 77 (-12.5%)
Mutual labels:  svg
Buoyancysystem
A system for buoyancy and boat physics in Unreal Engine 4.
Stars: ✭ 87 (-1.14%)
Mutual labels:  wave
Outline Stroke
Convert stroked SVG into the outlined version
Stars: ✭ 81 (-7.95%)
Mutual labels:  svg
Dicom Ecg Plot
Dicom ECG Viewer and Converter. Convert to PDF, PNG, JPG, SVG, ...
Stars: ✭ 84 (-4.55%)
Mutual labels:  svg
Dashed Border Generator
Custom Dashed Border | Online CSS Generator 🚀
Stars: ✭ 79 (-10.23%)
Mutual labels:  svg
Pictogrify
🎭 Generate unique pictograms from any text
Stars: ✭ 80 (-9.09%)
Mutual labels:  svg
Materialdesign
✒6200+ Material Design Icons from the Community
Stars: ✭ 9,669 (+10887.5%)
Mutual labels:  svg
Waveforms
An interactive, explorable explanation about the peculiar magic of sound waves.
Stars: ✭ 1,218 (+1284.09%)
Mutual labels:  svg
Diagram Vue
A editable SVG-based diagram component for Vue
Stars: ✭ 86 (-2.27%)
Mutual labels:  svg
React Image Timeline
📆 An image-centric timeline component for React.js
Stars: ✭ 77 (-12.5%)
Mutual labels:  svg
Pathrenderinglab
Repository for research on complete SVG rendering
Stars: ✭ 83 (-5.68%)
Mutual labels:  svg
Vectorgraphics2d
Graphics2D implementations to export various vector file formats
Stars: ✭ 87 (-1.14%)
Mutual labels:  svg
Touchdesigner Sop To Svg
A pipeline for handling the SOP to SVG pipeline. This is especially handy for using procedurally generated geometry for paths to be cut or plotted.
Stars: ✭ 87 (-1.14%)
Mutual labels:  svg
Svgforxaml
Draw SVG image with Win2D
Stars: ✭ 84 (-4.55%)
Mutual labels:  svg
View All Similar Projects ➔

WaveView for React-Native

npm npm

SHOWCASE

Ball

Rectangle

DEPENDENCIES

INSTALL

  1. Install react-native-svg, use

    npm install --save react-native-svg or

    yarn add react-native-svg

  2. Link react-native-svg, check here for help.

  3. npm install --save react-native-waveview or yarn add react-native-waveview

USAGE

Props

name type desc
H number BaseLine height
animated bool animation when mounted
waveParams Array [{ A, T, fill}, ...]
easing string name of easing from ReactNative#Easing
speed number base duration in ms of one wave cycle
speedIncreasePerWave number increase in speed in ms per each wave 
/**
  ---------+------------------------+
  <-- P -->|<--    T    -->|        |______
           |   /\          |   /\   |  ^
           |  /  \         |  /  \  |  A
           | /    \        | /    \ |  |
           |/      \       |/      \|__V___
           |        \      /        |  ^
           |         \    /         |  |
           |          \  /          |  |
           |           \/           |  H
           |                        |  |
           |        fill            |  |
  ---------+------------------------+__V___
*/

Methods

  • setWaveParams(waveParams)

  • setWaterHeight(H)

  • startAnim

  • stopAnim

Example

<View style={_styles.container} >
    <TouchableHighlight onPress={()=>{
        // Stop Animation
        this._waveRect && this._waveRect.stopAnim();

        // set water baseline height
        this._waveRect && this._waveRect.setWaterHeight(70);

        // reset wave effect
        this._waveRect && this._waveRect.setWaveParams([
            {A: 10, T: 180, fill: '#FF9F2E'},
            {A: 15, T: 140, fill: '#F08200'},
            {A: 20, T: 100, fill: '#B36100'},
        ]);
    }}>
    <Wave
        ref={ref=>this._waveRect = ref}
        style={_styles.wave}
        H={30}
        waveParams={[
            {A: 10, T: 180, fill: '#62c2ff'},
            {A: 15, T: 140, fill: '#0087dc'},
            {A: 20, T: 100, fill: '#1aa7ff'},
        ]}
        animated={true}
    />
    </TouchableHighlight>
</View>

<View style={_styles.container} >
    <Wave
        style={_styles.waveBall}
        H={70}
        waveParams={[
            {A: 10, T: 180, fill: '#62c2ff'},
            {A: 15, T: 140, fill: '#0087dc'},
            {A: 20, T: 100, fill: '#1aa7ff'},
        ]}
        animated={true}
    />
</View>

const _styles = StyleSheet.create({
    container: {
        flex: 1,
        marginVertical: 10,
        marginHorizontal: 20,
        justifyContent: 'center',
        alignItems: 'center',
        borderWidth: StyleSheet.hairlineWidth,
    },
    wave: {
        width: 100,
        aspectRatio: 1,
        overflow: 'hidden',
        backgroundColor: 'white',
    },
    waveBall: {
        width: 100,
        aspectRatio: 1,
        borderRadius: 50,
        overflow: 'hidden',
    }
});
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].