nativescript-facebookrebound 🏀
NativeScript plugin to provide access to Facebook's Spring Animations for Android. This is just a simple wrapper to remove some of the complexity of Rebound, if you want to provide more "sugar" on the native methods in the Rebound library then submit a PR :)
FacebookRebound Usage
Installation
npm install nativescript-facebookrebound
Usage
Typically, you'll want to attach a Spring during the loaded
event for your view item
XML:
<Image tap="springThis" height="240" loaded="picLoaded" src="~/images/deadpool2.jpg" stretch="aspectFit" />
JS:
var rebound = require("nativescript-facebookrebound"); function picLoaded (args) { // Getting the native android <img src="file:///C:\Users\Brad\Source\Repos\nativescript-facebookrebound\screens\facebookRebound.gif" />view (android.view.ImageView in this example) var view = args.object.android; // create a Rebound Spring() ( TENSION, FRICTION ) -- @returns a Spring() if successful rebound.createSpring(500, 10).then(function (result) { // Now we have a Spring to work with. Spring = result; // called whenever the spring is updated rebound.onSpringUpdate(function () { var mappedValue = com.facebook.rebound.SpringUtil.mapValueFromRangeToRange(Spring.getCurrentValue(), 0, 1, 1, 0.5); view.setScaleX(mappedValue); view.setScaleY(mappedValue); }); // called whenever the spring leaves its resting state rebound.onSpringActivate(function () { console.log('setSpringActivate started...'); }); // called whenever the spring notifies of displacement state changes rebound.onSpringAtEndState(function () { console.log('setSpringAtEndState...'); }); // called whenever the spring achieves a resting state rebound.onSpringAtRest(function () { console.log('setSpringAtRest...'); // Here you could do something like hide a view or trigger more spring if you wanted... }); }, function (err) { alert("Error in rebound.createSpring(): " + err); });}exports.picLoaded = picLoaded; function springThis(args) { // quick boolean to check if we are going up or down if (mMovedUp) { // setEndValue(): set the rest value to determine the displacement for the spring Spring.setEndValue(0); } else { Spring.setEndValue(1); } mMovedUp = !mMovedUp;}exports.springThis = springThis;
API
- createSpring(tension: number, friction: damper) Promise...
- returns - Spring()
Once you have a Spring returned from createSpring(), you set your callbacks for the listener events:
- onSpringUpdate(function)
- onSpringActivate(function)
- onSpringAtEndState(function)
- onSpringAtRest(function)