├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── example
├── AnimateSpriteExample.gif
├── app
│ ├── .babelrc
│ ├── .buckconfig
│ ├── .flowconfig
│ ├── .gitattributes
│ ├── .gitignore
│ ├── .watchmanconfig
│ ├── __tests__
│ │ ├── index.android.js
│ │ └── index.ios.js
│ ├── android
│ │ ├── app
│ │ │ ├── BUCK
│ │ │ ├── build.gradle
│ │ │ ├── proguard-rules.pro
│ │ │ └── src
│ │ │ │ └── main
│ │ │ │ ├── AndroidManifest.xml
│ │ │ │ ├── java
│ │ │ │ └── com
│ │ │ │ │ └── animatedspriteexample
│ │ │ │ │ ├── MainActivity.java
│ │ │ │ │ └── MainApplication.java
│ │ │ │ └── res
│ │ │ │ ├── mipmap-hdpi
│ │ │ │ └── ic_launcher.png
│ │ │ │ ├── mipmap-mdpi
│ │ │ │ └── ic_launcher.png
│ │ │ │ ├── mipmap-xhdpi
│ │ │ │ └── ic_launcher.png
│ │ │ │ ├── mipmap-xxhdpi
│ │ │ │ └── ic_launcher.png
│ │ │ │ └── values
│ │ │ │ ├── strings.xml
│ │ │ │ └── styles.xml
│ │ ├── build.gradle
│ │ ├── gradle.properties
│ │ ├── gradle
│ │ │ └── wrapper
│ │ │ │ ├── gradle-wrapper.jar
│ │ │ │ └── gradle-wrapper.properties
│ │ ├── gradlew
│ │ ├── gradlew.bat
│ │ ├── keystores
│ │ │ ├── BUCK
│ │ │ └── debug.keystore.properties
│ │ └── settings.gradle
│ ├── index.android.js
│ ├── index.ios.js
│ ├── ios
│ │ ├── AnimatedSpriteExample-tvOS
│ │ │ └── Info.plist
│ │ ├── AnimatedSpriteExample-tvOSTests
│ │ │ └── Info.plist
│ │ ├── AnimatedSpriteExample.xcodeproj
│ │ │ ├── project.pbxproj
│ │ │ └── xcshareddata
│ │ │ │ └── xcschemes
│ │ │ │ ├── AnimatedSpriteExample-tvOS.xcscheme
│ │ │ │ └── AnimatedSpriteExample.xcscheme
│ │ ├── AnimatedSpriteExample
│ │ │ ├── AppDelegate.h
│ │ │ ├── AppDelegate.m
│ │ │ ├── Base.lproj
│ │ │ │ └── LaunchScreen.xib
│ │ │ ├── Images.xcassets
│ │ │ │ └── AppIcon.appiconset
│ │ │ │ │ └── Contents.json
│ │ │ ├── Info.plist
│ │ │ └── main.m
│ │ └── AnimatedSpriteExampleTests
│ │ │ ├── AnimatedSpriteExampleTests.m
│ │ │ └── Info.plist
│ ├── package.json
│ └── sprites
│ │ └── monster
│ │ ├── monsterSprite.js
│ │ ├── monster_celebrate01.png
│ │ ├── monster_celebrate02.png
│ │ ├── monster_disgust01.png
│ │ ├── monster_eat01.png
│ │ ├── monster_eat02.png
│ │ ├── monster_idle.png
│ │ ├── monster_walk01.png
│ │ ├── monster_walk02.png
│ │ └── monster_walk03.png
├── rnas
│ ├── .babelrc
│ ├── .buckconfig
│ ├── .flowconfig
│ ├── .gitattributes
│ ├── .gitignore
│ ├── .watchmanconfig
│ ├── __tests__
│ │ ├── index.android.js
│ │ └── index.ios.js
│ ├── android
│ │ ├── app
│ │ │ ├── BUCK
│ │ │ ├── build.gradle
│ │ │ ├── proguard-rules.pro
│ │ │ └── src
│ │ │ │ └── main
│ │ │ │ ├── AndroidManifest.xml
│ │ │ │ ├── java
│ │ │ │ └── com
│ │ │ │ │ └── rnas
│ │ │ │ │ ├── MainActivity.java
│ │ │ │ │ └── MainApplication.java
│ │ │ │ └── res
│ │ │ │ ├── mipmap-hdpi
│ │ │ │ └── ic_launcher.png
│ │ │ │ ├── mipmap-mdpi
│ │ │ │ └── ic_launcher.png
│ │ │ │ ├── mipmap-xhdpi
│ │ │ │ └── ic_launcher.png
│ │ │ │ ├── mipmap-xxhdpi
│ │ │ │ └── ic_launcher.png
│ │ │ │ └── values
│ │ │ │ ├── strings.xml
│ │ │ │ └── styles.xml
│ │ ├── build.gradle
│ │ ├── gradle.properties
│ │ ├── gradle
│ │ │ └── wrapper
│ │ │ │ ├── gradle-wrapper.jar
│ │ │ │ └── gradle-wrapper.properties
│ │ ├── gradlew
│ │ ├── gradlew.bat
│ │ ├── keystores
│ │ │ ├── BUCK
│ │ │ └── debug.keystore.properties
│ │ └── settings.gradle
│ ├── app.json
│ ├── index.android.js
│ ├── index.ios.js
│ ├── ios
│ │ ├── rnas-tvOS
│ │ │ └── Info.plist
│ │ ├── rnas-tvOSTests
│ │ │ └── Info.plist
│ │ ├── rnas.xcodeproj
│ │ │ ├── project.pbxproj
│ │ │ └── xcshareddata
│ │ │ │ └── xcschemes
│ │ │ │ ├── rnas-tvOS.xcscheme
│ │ │ │ └── rnas.xcscheme
│ │ ├── rnas
│ │ │ ├── AppDelegate.h
│ │ │ ├── AppDelegate.m
│ │ │ ├── Base.lproj
│ │ │ │ └── LaunchScreen.xib
│ │ │ ├── Images.xcassets
│ │ │ │ └── AppIcon.appiconset
│ │ │ │ │ └── Contents.json
│ │ │ ├── Info.plist
│ │ │ └── main.m
│ │ └── rnasTests
│ │ │ ├── Info.plist
│ │ │ └── rnasTests.m
│ ├── package.json
│ ├── sprites
│ │ └── monster
│ │ │ ├── monsterSprite.js
│ │ │ ├── monster_celebrate01.png
│ │ │ ├── monster_celebrate02.png
│ │ │ ├── monster_disgust01.png
│ │ │ ├── monster_eat01.png
│ │ │ ├── monster_eat02.png
│ │ │ ├── monster_idle.png
│ │ │ ├── monster_walk01.png
│ │ │ ├── monster_walk02.png
│ │ │ └── monster_walk03.png
│ └── yarn.lock
└── sprites
│ └── monster
│ ├── monsterSprite.js
│ ├── monster_celebrate01.png
│ ├── monster_celebrate02.png
│ ├── monster_disgust01.png
│ ├── monster_eat01.png
│ ├── monster_eat02.png
│ ├── monster_idle.png
│ ├── monster_walk01.png
│ ├── monster_walk02.png
│ └── monster_walk03.png
├── index.js
├── package.json
└── src
├── Tweens
└── Tweens.js
└── components
└── AnimatedSprite.js
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 |
3 | node_modules/
4 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 |
2 | example/
3 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # The React Native Animated Sprite
2 |
3 | react-native-animated-sprite (RNAS) package is a feature rich declarative component for animation, tweening, and dragging sprites. Animation is achieved using frame-by-frame animation, tweening uses the React Native Animated class, and dragging uses React Native PanResponder.
4 |
5 | RNAS is ideal for use in general applications or games. Development has been driven by [Curious Learning's](http://www.curiouslearning.org/) work in cognitive assessment and literacy.
6 |
7 | ## Installation
8 | ```
9 | $ npm install --save react-native-animated-sprite
10 | ```
11 |
12 | ## Overview
13 | There are three key features to RNAS: AnimatedSprite, sprites, and tweens.
14 | Together these three features provide the full capabilities of RNAS.
15 |
16 | ### AnimatedSprite
17 | AnimatedSprite is the primary component interface which would be included in a
18 | React Native application.
19 |
20 | ### Sprites
21 | Sprites are objects that are required by AnimatedSprite. A sprite object contains
22 | references to the images used for frame-by-frame animation and other related
23 | information. See "example/sprites/monster/monsterSprite.js"
24 |
25 | ### Tweens
26 | Tweens ("src/Tweens/Tweens.js") operate on AnimatedSprites to enable tweening.
27 |
28 | ### Example Use
29 |
30 |
31 | ## Example Projects
32 | **coming soon**
33 |
34 | Add yours :D
35 |
36 | ## Example Declaration
37 | This is the declaration used for the example application included in this projects
38 | Github [repo](https://github.com/micahrye/react-native-animated-sprite/blob/master/example/app/index.android.js), and demonstrated in the GIF above.
39 |
40 | ```
41 | {this.onPress();}}
58 | />
59 | ```
60 | The above example would create an "AnimatedSprite" with the "monsterSprite." The animation loops and is set to an animation type of the sprite. The coordinates place the start location of the AnimatedSprite, while size declares the size. Draggable set to true (draggable={true}) means that the AnimatedSprite can be dragged. The tween options are
61 | set to a tween object, and the tween can be started 'fromCode', i.e. programmatically.
62 | There is also an "onPress" handler declared that is used to switch animation type.
63 | See [the code](https://github.com/micahrye/react-native-animated-sprite/blob/master/example/app/index.android.js) for full details.
64 |
65 | ## Component Properties (need to finish)
66 |
67 | | Name | Required | Type | Description | Default Value |
68 | |------|----------|------|-------------|---------------|
69 | | sprite | true | object | An object that describes the underlying sprite asset. | See [Sprite fields](#sprite-fields) below. |
70 | | coordinates | true | object | The top/left coordinates of the AnimatedSprite. | none |
71 | | size | true | object | The width/height size of the sprite assets. | none |
72 | | animationFrameIndex | true | array | The indices of the current animation. | none |
73 | | rotate | false | array | Rotation information for sprite. | [{rotateY: '0deg'}] |
74 | | opacity | false | number | Opacity of sprite. | 1 |
75 | | spriteUID | false | string | Unique string used for ID purposes. | randome string of length 7 |
76 | | draggable | false | bool | Set draggable state of sprite. | false |
77 | | onPress | false | func | Function handle for press (touch) event. | none |
78 | | onPressIn | false | func | Function handle for pressIn event. | none |
79 | | onPressOut | false | func | Function handle for pressOut event. | none |
80 | | loopAnimation | false | bool | Indicates if animation should loop | none |
81 | | timeSinceMounted | false | func | Indicates time since component was mounted | none |
82 | | currentLocation | false | func | Function to retrieve current coordinates. | none |
83 | | tweenStart | false | string | Indicates how tween should start, one of ['fromMethod', 'fromPress', 'fromMount'] | none |
84 | | tweenOptions | false | object | Describes tween options. | See [Tweens](#tweens-overview) |
85 | | stopAutoTweenOnPressIn | false | bool | Indicates if tween started at component mount should stop on press event. | none |
86 | | onTweenStopped | false | func | Function handle called when tween stopped by press event. | none |
87 | | onTweenFinish | false | func | Function handle called when tween completes full tween. | none |
88 | | onAnimationFinish | false | func | Function handle called when animation comes to end. | none |
89 | | visible | false | bool | Indicates if sprite is visible. | true |
90 | | fps | false | number | Indicates the number of frames per second. | 10 |
91 |
92 | ## Use of Refs to Access AnimatedSprite Methods
93 | While "refs" should be avoided in most cases they can be useful. As Facebook [states](https://facebook.github.io/react/docs/refs-and-the-dom.html),
94 | "there are a few cases where you need to imperatively modify a child outside of the typical dataflow." One of those cases is triggering imperative animations.
95 |
96 | There are several methods of AnimatedSprite that you will want to access via refs.
97 | The are:
98 | * **startTween**: Allows for programatic starting a tween.
99 | * **getCoordinates**: Gets the current position ([top, left]) coordinates for an AnimatedSprite.
100 |
101 | The following is an example of usage. Suppose you had the following AnimatedSprite component:
102 | ```
103 |
108 | ```
109 | Then in your declaring application you would be able to access the AnimatedSprite
110 | references as follows (See [example app](https://github.com/micahrye/react-native-animated-sprite/blob/master/example/app/index.android.js)):
111 | ```
112 | this.refs.monsterRef.startTween();
113 | // or
114 | const coords = this.refs.monsterRef.getCoordinates();
115 | ```
116 |
117 | ## Sprites & Tweens Overview
118 | Sprites and tweens are key aspects of the AnimatedSprite component. The following
119 | gives an overview of each.
120 |
121 | ### Sprites Overview
122 | A sprite is an object that contain with the following shape:
123 | ```
124 | {
125 | name: ,
126 | size: