在上一章中React Native 之自定义下拉刷新中,已经完成了对React Native中封装与使用下拉刷新,但在实际项目中,经常需要在下拉刷新中添加各种动画效果.
如下:
当用户往下拉时,鸡蛋的蛋壳 会往上移动;触发刷新时,播放一段鸡蛋摇晃的动画效果;当刷新完毕时,鸡蛋从上往下掉,最后盖住鸡蛋壳.
实现原理:
在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动画录得不太好,导致最后的动画效果有跳跃性,敬请谅解.
