73R3WY / React Native Svg Animations
Licence: mit
SVG Animations wrapper for react-native.
Stars: ✭ 117
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Svg Animations
Reanimate
Haskell library for building declarative animations based on SVG graphics
Stars: ✭ 581 (+396.58%)
Mutual labels: svg, animations
Pathanimator
Moves a DOM element along an SVG path (or do whatever along a path...)
Stars: ✭ 251 (+114.53%)
Mutual labels: svg, animations
Elemental2
Type checked access to browser APIs for Java code.
Stars: ✭ 115 (-1.71%)
Mutual labels: svg
Svgdragtree
一个可以通过拖放 SVG 图标,来生成拥有树状结构的视图与数据的前端组件。 SDT example:
Stars: ✭ 113 (-3.42%)
Mutual labels: svg
Tabler Icons
A set of over 1400 free MIT-licensed high-quality SVG icons for you to use in your web projects.
Stars: ✭ 10,858 (+9180.34%)
Mutual labels: svg
React Fast Charts
Blazing Fast Charting Library in React with loading time less than 50ms
Stars: ✭ 113 (-3.42%)
Mutual labels: svg
Vue Graph
⚡️ Vue components based on the JUI chart available in Vue.js
Stars: ✭ 114 (-2.56%)
Mutual labels: svg
Svg Icon
👻 A lightweight library that makes it easier to use SVG icons in your Angular Application
Stars: ✭ 112 (-4.27%)
Mutual labels: svg
Construcao De Paginas Web
Desenvolvimento de páginas semânticas, acessíveis e responsivas. 🚀
Stars: ✭ 113 (-3.42%)
Mutual labels: animations
Butterfly
🦋Butterfly,A JavaScript/React/Vue2 Diagramming library which concentrate on flow layout field. (基于JavaScript/React/Vue2的流程图组件)
Stars: ✭ 2,343 (+1902.56%)
Mutual labels: svg
Panzoom
A library for panning and zooming elements using CSS transforms 🔍
Stars: ✭ 1,593 (+1261.54%)
Mutual labels: svg
Python Altium
Altium schematic format documentation, SVG converter and TK viewer
Stars: ✭ 112 (-4.27%)
Mutual labels: svg
Happy Birthday
Wish your friend/loved-ones happy birthday in a nerdy way.
Stars: ✭ 113 (-3.42%)
Mutual labels: animations
Apexcharts.js
📊 Interactive JavaScript Charts built on SVG
Stars: ✭ 10,991 (+9294.02%)
Mutual labels: svg
react-native-svg-animations
SVG Animations wrapper for react-native. Based on examples from this project: https://github.com/ethantran/react-native-examples
Dependencies
svg-path-properties
react-native-svg
Installation
$ npm i react-native-svg-animations --save
Demo
AnimatedSVGPath | AnimatedSVGPaths |
Usage
This package contains wrapper components for displaying animated SVG in react-native, currently, this contains the following:
- AnimatedSVGPath
- AnimatedSVGPaths
AnimatedSVGPath
Component to display a single animated SVG Path. See Hi example for the complete implementation.
import { AnimatedSVGPath } from "react-native-svg-animations";
...
<View>
<AnimatedSVGPath
strokeColor={"green"}
duration={500}
strokeWidth={10}
strokeDashArray={[42.76482137044271, 42.76482137044271]}
height={400}
width={400}
scale={0.75}
delay={100}
d={d}
loop={false}
/>
</View>
where the properties are:
-
d
- the SVG Path to be animated. (required) -
strokeColor
- the color of the path stroke. (defaults to black) -
strokeWidth
- the thickness of the path stroke. (defaults to 1) -
strokeDashArray
- the number and length of strokes. (defaults to total length obtained from properties of d) -
height
- the height of the base SVG. (defaults to screen viewport height) -
width
- the width of the base SVG. (defaults to screen viewport width) -
scale
- the scale of the output SVG based on the width and height of the base SVG. (defaults to 1.0 or 100%) -
delay
- time inms
before starting animation. (defaults to 1000ms or 1s) -
duration
- time inms
to complete the path drawing from starting point to ending point. (defaults to 1000ms or 1s) -
fill
- the color fill of the closed path. (defaults to none) -
loop
- whether the animation loops infinitely. (defaults to true) -
reverse
- Begins drawn and fades as you go . (defaults to false) -
rewind
- the path is rewinded when it was complete. (defaults to false)
AnimatedSVGPaths
Component to display a multiple animated SVG Paths. See Ingenuity preloader example for the complete implementation.
import { AnimatedSVGPaths } from "react-native-svg-animations";
...
<View>
<AnimatedSVGPaths
strokeColor={"red"}
strokeWidth={5}
duration={10000}
height={600}
width={600}
scale={0.5}
delay={100}
ds={ds}
/>
</View>
where the properties are:
-
ds
- the SVG Paths to be animated, must be an array. (required) -
strokeColor
- the color of the path stroke. (defaults to black) -
strokeWidth
- the thickness of the path stroke. (defaults to 1) -
height
- the height of the base SVG. (defaults to screen viewport height) -
width
- the width of the base SVG. (defaults to screen viewport width) -
scale
- the scale of the output SVG based on the width and height of the base SVG. (defaults to 1.0 or 100%) -
delay
- time inms
before starting animation. (defaults to 1000ms or 1s) -
duration
- time inms
to complete the path drawing from starting point to ending point. (defaults to 1000ms or 1s) -
fill
- the color fill of the closed path. (defaults to none) -
loop
- whether the animation loops infinitely. (defaults to true) -
reverse
- Begins drawn and fades as you go . (defaults to false) -
rewind
- the path is rewinded when it was complete. (defaults to false)
TODO
- Accept paths as objects to handle different delays and duration for each of the single path, as well as custom path properties.
- Other animated SVG objects.
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
Contributors
Special thanks to these developers:
License
MIT
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].