NativeScript-FacebookRebound :basketball

NativeScript 插件，提供对 Facebook Android 弹性动画的访问。这是一个简单的包装，用于移除 Rebound 的一些复杂性。如果您想对 Rebound 库中的原生方法提供更多“糖”，请提交 PR :)

FacebookRebound 使用说明

安装

npm install nativescript-facebookrebound

使用方法

通常，您会想在视图项的 loaded 事件中附加一个弹性体

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...
  • 返回 - Spring()

一旦从 createSpring() 返回一个弹性体，您就可以设置监听器事件的回调

• onSpringUpdate(function)
• onSpringActivate(function)
• onSpringAtEndState(function)
• onSpringAtRest(function)