react-native-sf-sprite v1.0.12

react-native-sf-sprite

精灵控件,支持移动、放大、旋转、渐变动画,可以拖动

绘制图层,支持绘制线段、连续线段实现画笔功能

安装

• npm install react-native-sf-sprite

IOS

Add the ART.xcodeproj (found in node_modules/react-native/Libraries/ART) to the Libraries group and add libART.a to Link Binary With Libraries under Build Phases.

Props

SFSprite

SFDrawLayer

Methods

SFSprite

SFSprite-Animated (所有动画都需要调用run相应的函数去执行才能生效)

SFDrawLayer

例子

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    TouchableWithoutFeedback,
    ScrollView,
    findNodeHandle,
    Dimensions,
    Image
} from 'react-native';
import {SFSprite,SFDrawLayer} from "react-native-sf-sprite"
var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;

# 动画例子
var obj = this.sp;
var dur = 300;
obj.runSequence([//顺序执行动画
        obj.moveTo({x:width/2-200,y:100,dur:dur}),
        obj.moveTo({x:width/2-100,y:100,dur:dur}),
    ],(tag,finished)=>{//顺序执行结束回调
        obj.runParallel([//同时执行动画
            obj.moveTo({x:width/2,y:50,dur:dur}),
            obj.scaleTo({scaleX:0.5,scaleY:0.5,dur:dur})
        ],(tag,finished)=>{同时执行动画回调
            obj.setScale({x:0.5,y:0.5})
            //旋转动画
            obj.runRotateLoop(dur,()=>{
                obj.run(obj.scaleTo({scaleX:1,scaleY:1,dur:dur}),()=>{
                    obj.setScale({x:1.5,y:1.5});
                    obj.run(obj.moveTo({x:width/2,y:height/2,dur:dur}),()=>{
                        obj.runRotateLoop(300,()=>{},0)
                    })

                })

            },2);
        })

    },1)

//精灵绘制
<SFSprite
    ref={(ref)=> {this.sp = ref}}
    width={100}
    height={100}
    x={width/2}
    y={height/2}
    scaleX={1}
    scaleY={1}
    showHitBox={true}
    canDrag={true}
    onMove={this.onMove}
    onMoveBegin={this.onMoveBegin}
    anchorPointX={0.5}
    anchorPointY={0.5}
    onPress={()=>console.log('onPress')}
    onPressIn={()=>console.log('onPressIn')}
    onPressOut={()=>console.log('onPressOut')}
    source={require('./1.png')}/>


# 绘制例子

<SFDrawLayer ref={(ref)=>{this.draw = ref}}/>

//绘制线段
this.draw.drawLine({x:0,y:0},{x:width,y:height},'black',5);

//绘制连续线段
//在开始移动函数里调用
onMoveBegin = (data) => {
    this.draw.drawPathBegin('white',10);
}
//在移动函数里调用
onMove = (data) => {
    if (this.sp.checkLineIn({px1:0,py1:0,px2:width,py2:100})){//碰撞检测
        console.log('碰到线段')
    }
    //绘制连续线段
    this.draw.drawPath({x:data.touchX,y:data.touchY})
}