From 1390c45d3a1691a918a9a70538e6e044454ecfb8 Mon Sep 17 00:00:00 2001 From: Nimila Samarasinghe Date: Mon, 18 Jan 2016 10:49:35 +0530 Subject: [PATCH] Releasing react-native-kenburns-view 0.0.1 --- .idea/.name | 1 + .idea/encodings.xml | 6 + .idea/jsLibraryMappings.xml | 6 + .idea/misc.xml | 16 ++ .idea/modules.xml | 8 + .idea/react-native-kenburns-view.iml | 8 + .idea/workspace.xml | 258 +++++++++++++++++++++++++++ README.md | 31 ++++ index.js | 10 ++ lib/KenBurnsImage.js | 103 +++++++++++ 10 files changed, 447 insertions(+) create mode 100644 .idea/.name create mode 100644 .idea/encodings.xml create mode 100644 .idea/jsLibraryMappings.xml create mode 100644 .idea/misc.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/react-native-kenburns-view.iml create mode 100644 .idea/workspace.xml create mode 100644 README.md create mode 100644 index.js create mode 100644 lib/KenBurnsImage.js diff --git a/.idea/.name b/.idea/.name new file mode 100644 index 0000000..6ec5d5b --- /dev/null +++ b/.idea/.name @@ -0,0 +1 @@ +react-native-kenburns-view \ No newline at end of file diff --git a/.idea/encodings.xml b/.idea/encodings.xml new file mode 100644 index 0000000..97626ba --- /dev/null +++ b/.idea/encodings.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml new file mode 100644 index 0000000..b8387eb --- /dev/null +++ b/.idea/jsLibraryMappings.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..e503d88 --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..30f3abf --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/react-native-kenburns-view.iml b/.idea/react-native-kenburns-view.iml new file mode 100644 index 0000000..c956989 --- /dev/null +++ b/.idea/react-native-kenburns-view.iml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/workspace.xml b/.idea/workspace.xml new file mode 100644 index 0000000..c3a2ff3 --- /dev/null +++ b/.idea/workspace.xml @@ -0,0 +1,258 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + true + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + $PROJECT_DIR$ + true + + bdd + + DIRECTORY + + false + + + + + + + + 1453091901781 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..ae8bf86 --- /dev/null +++ b/README.md @@ -0,0 +1,31 @@ +# react-native-kenburns-view + +[`KenBurns`](https://en.wikipedia.org/wiki/Ken_Burns_effect) Image Effect for React Native. Based on Image Component [`Image` Component](https://facebook.github.io/react-native/docs/image.html). +Version: 0.0.1 + +Tested on React Native iOS Apps only. Feedback: nimilahiran@gmail.com + +## Installation + +```bash +$ npm i react-native-kenburns-view --save +``` + +## Usage + +```jsx + + +``` + + +## API (props) + +| Prop | Description | +|---|---| +|**`tension`**| `int` Tension Value. | +|**`friction`**| `int` Friction Value. | +|**`imageWidth`**| `int` Image Width. | +|**`imageHeight`**| `int` Image Height. | +|**`sourceUri`**| `URI String` Image URL. | +|**`placeholderSource`**| `URI String` Placeholder Image URL (Possibly a Local Image). | diff --git a/index.js b/index.js new file mode 100644 index 0000000..5e5d687 --- /dev/null +++ b/index.js @@ -0,0 +1,10 @@ +/** + * Created by Nimila Hiranya Samarasinghe + * Links: https://github.com/nHiRanZ + * + * Version: 0.0.1 + * + * Description: This reflects the KenBurns effect in a React Native Image + */ + +module.exports = require('./lib/KenBurnsImage'); \ No newline at end of file diff --git a/lib/KenBurnsImage.js b/lib/KenBurnsImage.js new file mode 100644 index 0000000..244157e --- /dev/null +++ b/lib/KenBurnsImage.js @@ -0,0 +1,103 @@ +/** + * Created by Nimila Hiranya Samarasinghe + * Links: https://github.com/nHiRanZ + * + * Version: 0.0.1 + * + * Description: This reflects the KenBurns effect in a React Native Image + */ + +'use strict'; + +var React = require('react-native'); +var TimerMixin = require('react-timer-mixin'); +var rebound = require('rebound'); +var { + Image, + View + } = React; + +var KenBurnsImage = React.createClass({ + + mixins: [TimerMixin], + propTypes: { + onPress: React.PropTypes.func, + }, + + getInitialState() { + return { + scale: null, + }; + }, + + componentWillMount() { + if (!this.isMounted()) { + this.springSystemFunctions(); + } + }, + + springSystemFunctions() { + this.springSystem = new rebound.SpringSystem(); + this._scrollSpring = this.springSystem.createSpring(); + var springConfig = this._scrollSpring.getSpringConfig(); + springConfig.tension = this.props.tension; + springConfig.friction = this.props.friction; + + this._scrollSpring.addListener({ + onSpringUpdate: () => { + this.setState({scale: this._scrollSpring.getCurrentValue()}); + }, + }); + + this._scrollSpring.setCurrentValue(1); + }, + + componentDidMount(){ + this.animLoop(); + }, + + animLoop(){ + this.animationFunc(); + this.setTimeout( + () => { this.animLoop(); }, + (Math.floor((Math.random() * 11000) + 10000)) + ); + }, + + animationFunc(){ + var max = 2.500; + var min = 2.000; + var endValue = (Math.random() * (max - min) + min).toFixed(3); + this._scrollSpring.setEndValue(endValue); + this.setTimeout( + () => { this._scrollSpring.setEndValue(1); }, + (Math.floor((Math.random() * 6000) + 4000)) + ); + }, + + render: function() { + var imageStyle = { + alignItems: 'stretch', + width: this.props.imageWidth, + height: this.props.imageHeight, + transform: [ + { + scale: this.state.scale + }, + ], + }; + + return ( + + + {this.props.children} + + + ); + }, +}); + +module.exports = KenBurnsImage;