项目作者: maaxg

项目描述 :
A React Native lib that provides to you a glitch effect in your texts and images
高级语言: JavaScript
项目地址: git://github.com/maaxg/rn-glitch-effect.git
创建时间: 2021-02-20T18:50:26Z
项目社区:https://github.com/maaxg/rn-glitch-effect

开源协议:MIT License

下载


rn-glitch-effect

Welcome to Glitch Effect :wave:

glitch(1) glitch-button
image-glitch

What is React native Glitch Effect?

  • Is a simple way to glitch your text and images.

Instalation

  1. npm i rn-glitch-effect

Properties - Glitch

props description default value
text Your text label that’s going to be displayed. empty String
glitchHeight The height that you want your glitch effect will have. 80 Integer
glitchAmplitude The amplitude of your glitch. In other words, how far your effect will be from the main text. 5 Integer
glitchDuration The duration of your glitch effect. 1500 Milisseconds
repeatDelay How long time your effect will wait, to start another turn of effect. 2000 Milisseconds
shadowColor The shadow color of your effect. #add8e6 rgb
textStyle The style that you want to give to your text. {color: ‘#000000’,fontWeight: ‘bold’,letterSpacing: 3,} Object
heightInputRange The input range to the interpolation of main animation. With this you can control each part of your effect height. [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100] array
positionYInputRange The input range to the interpolation of main animation. With this you can control each part of your effect position. [0, 10, 20, 30, 60, 65, 70, 80, 90, 100] array
outOfTextRange Will make your effect get out of the range from your text false Boolean
disableAutoAnimation enable or disabled your animation false Boolean

Properties - GlitchImage

props description default value
glitchHeight The height that you want your glitch effect will have. 200 Integer
glitchAmplitude The amplitude of your glitch. In other words, how far your effect will be from the main text. 5 Integer
glitchDuration The duration of your glitch effect. 1500 Milisseconds
repeatDelay How long time your effect will wait, to start another turn of effect. 2000 Milisseconds
shadowColor The shadow color of your effect. #add8e6 rgb
imageStyle The style that you want to give to your text. {width: 400,height: 200} Object
heightInputRange The input range to the interpolation of main animation. With this you can control each part of your effect height. [0, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110] array
positionYInputRange The input range to the interpolation of main animation. With this you can control each part of your effect position. [0, 10, 20, 30, 60, 65, 70, 80, 90, 100] array
disableAutoAnimation enable or disabled your animation false Boolean
source Your image path. false String

Usage

Basic Glitch

  • You can use this with or without the View container
    ```javascript
    import React from ‘react’;
    import {View, StyleSheet} from ‘react-native’;
    import {Glitch} from ‘rn-glitch-effect’;
    const App = () => {

    return (

    1. <View style={styles.containerWithBg}>
    2. <Glitch
    3. text={'GLITCH'}
    4. mainColor={'black'}
    5. shadowColor={'green'}
    6. ></Glitch>
    7. </View>

    );
    };
    const styles = StyleSheet.create({
    containerWithBg: {backgroundColor: ‘red’, marginBottom: ‘5%’},
    });
    export default App;

  1. Glitch with Button
  2. - You can use this with a button wrapping your text and define if it will activate the glitch when clicked
  3. ```javascript
  4. import React, {useRef} from 'react';
  5. import {TouchableHighlight, StyleSheet} from 'react-native';
  6. import {Glitch} from 'rn-glitch-effect';
  7. const App = () => {
  8. const ref = useRef();
  9. return (
  10. <View style={[styles.container]}>
  11. <TouchableHighlight
  12. onPress={() => {
  13. ref.current.animate();
  14. }}
  15. style={[styles.containerWithBg]}>
  16. <Glitch
  17. text={'RESPONSIVE'}
  18. ref={ref}
  19. mainColor={'black'}
  20. shadowColor={'pink'}
  21. disableAutoAnimation={true}
  22. ></Glitch>
  23. </TouchableHighlight>
  24. </View>
  25. );
  26. };
  27. const styles = StyleSheet.create({
  28. container: {flex: 1, justifyContent: 'center', alignItems: 'center'},
  29. containerWithBg: {backgroundColor: 'red', marginBottom: '5%'},
  30. });
  31. export default App;
  1. import React from 'react';
  2. import {StyleSheet, View} from 'react-native';
  3. import {Glitch, GlitchImage} from 'rn-glitch-effect';
  4. import Gator from './assets/images/gator.jpeg';
  5. const App = () => {
  6. return (
  7. <View style={[styles.container]}>
  8. <View style={styles.containerWithBg}>
  9. <Glitch
  10. text={'GLITCH'}
  11. mainColor={'black'}
  12. shadowColor={'green'}
  13. outOfTextRange={false}
  14. ></Glitch>
  15. <GlitchImage shadowColor={'red'} mainColor={'black'} source={Gator} ></GlitchImage>
  16. </View>
  17. </View>
  18. );
  19. };
  20. const styles = StyleSheet.create({
  21. container: {
  22. flex: 1,
  23. justifyContent: 'center',
  24. alignItems: 'center',
  25. backgroundColor: 'white',
  26. },
  27. containerWithBg: {backgroundColor: 'red', marginBottom: '5%'},
  28. image: {
  29. width: 400,
  30. height: 200,
  31. },
  32. });
  33. export default App;

End of the line :)

If you have any ideia to contribute with this project, please make your self home.