React Native 下拉刷新添加自定义动画

在上一章中React Native 之自定义下拉刷新中,已经完成了对React Native中封装与使用下拉刷新,但在实际项目中,经常需要在下拉刷新中添加各种动画效果.

http://www.jianshu.com/p/47ffaec2433a

如下:


当用户往下拉时,鸡蛋的蛋壳 会往上移动;触发刷新时,播放一段鸡蛋摇晃的动画效果;当刷新完毕时,鸡蛋从上往下掉,最后盖住鸡蛋壳.

实现原理:
在React Native中要使用该效果,光靠js 可能是不够的,光是播放 帧动画,React Native也没有实现该效果的控件. 所以最简单的办法 是将鸡蛋与蛋壳的逻辑都放入原生代码中实现, React Native端告诉原生代码移动的距离与状态.

关键代码:

封装View ,使用UIManager.dispatchViewManagerCommand调用View的方法.

var React = require('React');
var ReactNative = require('ReactNative');
var requireNativeComponent = require('requireNativeComponent');

var UIManager = require('UIManager');
import {
    View,
} from 'react-native';

const PK_REF_KEY="pk_ref_key";

var PluImageLayout =React.createClass({

    propTypes: {
        ...View.propTypes,
    },
    /**调用蛋壳向上移动的原生方法*/
    shellUpward:function(distance){
        UIManager.dispatchViewManagerCommand(
            this.getPluImageHandle(),
            1,
            [distance]
        );
    },
    /**调用鸡蛋摇动帧动画的原生方法*/
    loadingAnim:function () {
        UIManager.dispatchViewManagerCommand(
            this.getPluImageHandle(),
            2,
            null
        );
    },
    /**调用恢复蛋壳位置的原生方法*/
    resetShell:function (distance,maxLength,maxTime) {
        UIManager.dispatchViewManagerCommand(
            this.getPluImageHandle(),
            3,
            [distance,maxLength,maxTime]
        );
    },

    render:function () {
        return (
            <RCTPluImageLayout
                style={{width:38,height:70,marginRight:10,marginTop:-20}}
                ref={PK_REF_KEY}
            >
            </RCTPluImageLayout>
        );
    },
    /**找到控件的节点*/
    getPluImageHandle: function() {
        return ReactNative.findNodeHandle(this.refs[PK_REF_KEY]);
    },
});

var RCTPluImageLayout = requireNativeComponent('AndroidPluImageLayout', PluImageLayout);

module.exports = PluImageLayout;

在React Native的touchMove事件中使蛋壳移动

        if (lastMoveY===0){
            lastMoveY=gestureState.y0;
        }
        //到了一定长度后,让蛋壳上升
        //  >90 只有移动到了视野可见范围才开始移动蛋壳
        if (gestureState.dy>90){
            //移动的距离
            let distance=gestureState.moveY-lastMoveY;
            //计算总共的移动距离
            hasMovedDistance+=distance;
            //调用原生代码移动蛋壳
            self.refs[PLU_IMAGE_KEY].shellUpward(distance);
        }
        lastMoveY=gestureState.moveY;

lastMoveY是记录上次移动的距离,distance表示当前需要移动的距离,
gestureState.dy 是touchMove方法返回的移动路程.

在原生代码中处理移动

double topMargin=iv_shell.getTop();
topMargin-=args.getDouble(0)*FACTOR;
iv_shell.layout(iv_shell.getLeft(),getIntValue(topMargin),iv_shell.   getRight(),iv_shell.getBottom());

使用view.layout方法移动蛋壳的布局.

本人项目中的运行效果:


gif动画录得不太好,导致最后的动画效果有跳跃性,敬请谅解.

完整代码下载

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值