Recently I wrote rn project and met the animation requirements. I would like to share the code for the reference of front-end ER with requirements. First, the final effect picture is as follows
Step 1: Get the starting position of the animation. First click to get the starting position of the animation. Use mesure method to get the position of the element from the upper left corner of the screen.
Task – list. Js file
Method parameters: task- This task information, object; Mount – The amount of gold you can receive
doneCallBack=(task, mount)=>{
let refname = `goldimg${task.task_id}`;
let X,Y;
this.refs[refname].measure((frameX, frameY, frameWidth, frameHeight, pageX, pageY)=>{
X=pageX;
Y=pageY;
this.props._showAnimate(true, pageX, pageY, mount);
});
};
Copy the codeStep 2: Execute three parts of animation in the parent component of task-list.js;
1. Clear the last animation timer, no animation can be seen; 2 store location information and divide gold coins such as 60 into [6, 0] to create digital rolling animation; Perform gold animation, gold background animation, digital animation
Status-boolean Specifies whether to perform animation; X-number Distance from the left side of the screen; Y-number Indicates the distance from the top of the screen. Mount-number Specifies the amount of gold you can receive.
_showAnimate=(status, X, Y ,mount)=>{
this.timer && clearTimeout(this.timer);
this.state.isShowAnim && this.setState({isShowAnim:false}); This.setstate ({clickedPositionX:X, clickedPositionY:Y, mount:mount.toString().split()' '),
isShowAnim:true,
}, ()=> {
if(status){ this.goldAnimate._startGoldAnimate(); // Execute gold animation this.goldbganimate._startGoldAnimate(); // Execute gold background animation this.goldnumrunanimate._startAnimate(); // Execute the digital scroll animation this._gettAskList (); // Retrieve task data}}); // After 4s, remove the bonus popover this.timer =setTimeout(()=>{
this.setState({
isShowAnim:false}})}, 4000);Copy the codeGold animation code: gold-animate. Js
Use rn’s built-in Animated module with three animation effects: 1 spring-spring physics model, 2 timing – easing function (mostly used); 3 Decay – Started at a specified initial speed and then slowed down to a stop; [new Animated.Value(0)] [new Animated.Value(0)] [new Animated. UseNativeDriver :true Uses native drivers to load animations, which can improve animation fluency, but supports CSS animations. Interpolate Interpolate functions (official documentation) ClickedPositionX click occurred from the left side of the screen; FinalPosY Y position of gold coin background
Js part
_startGoldAnimate=()=>{
let spring = Animated.spring, timing = Animated.timing, parallel = Animated.parallel;
spring(
this.state.translateYVal,
{
toValue:1,
duration:500,
friction:3,
tension:50,
useNativeDriver:true
}
).start();
parallel([
timing(
this.state.translateXVal,
{
toValue:1,
duration:300,
useNativeDriver:true,
delay:600
}
),
timing(
this.state.translateSecYVal,
{
toValue:1,
duration:300,
useNativeDriver:true,
delay:600
}
)
]).start();
};
Copy the codeThe react part
return (
<Animated.View
style={{
position:'absolute',
zIndex:10000,
height:'100%',
width:'100%',
left:clickedPositionX - 5,
top:clickedPositionY - 5,
transform:[
{
translateY:translateYVal.interpolate({
inputRange: [0, 0.7, 1],
outputRange: [0, -40, 0]
})
},
]
}}
>
<Animated.Image
style={{
height:22,
width:22,
transform:[
{
translateX:translateXVal.interpolate({
inputRange: [0, 1],
outputRange: [0, Utils.windowSize.width - clickedPositionX - 89]
})
},
{ translateY:translateSecYVal.interpolate({
inputRange: [0, 1],
outputRange: [0, finalPosY - clickedPositionY + 15 ]
})
},
],
}}
source={require('resource/newtask/animategold.png')}
>
</Animated.Image>
</Animated.View>
)
Copy the codeThe code continues with the gold background animation gold-BG-animate. Js animation section in sequence: Background up Y, move 60
_startGoldAnimate = () => {
Animated.timing(
this.state.animValue,
{
toValue:1,
duration:1000,
useNativeDriver:true
}
).start();
}
Copy the codeThe react part
return (
<View
ref={(view) => this.goldNumBg = view}
style={styles.container}
>
<Animated.Image
style={{
position:'absolute',
bottom:-60,
right:0,
height:55,
width:104,
transform:[
{
translateY:animValue.interpolate({
inputRange: [0, 1],
outputRange: [0,-60]
})
}
],
}}
source={require('resource/newtask/animate_gold_bg.png')}
>
</Animated.Image>
</View>
)
Copy the codeNext the last animation, the digital scroll animation file goldnum-run-animate. Js animation section, the first transparency from 0 to 1; Each number starts the animation in turn, notice the delay property inside;
_startAnimate = () => {
Animated.timing(
this.state.opacityAnim,
{
toValue:1,
duration:1000,
}
).start();
this.state.animAry.forEach((item, index) => {
Animated.timing(
item.value,
{
toValue:1,
duration:(Number(item.num)+1) * 200,
delay:index * 400
}
).start();
});
};
Copy the codeAnimAry adds the initial animation value for each number to create an array;
let numAry = this.state.mount;
let animAry = [];
for (let i = 0; i < numAry.length; i++) {
animAry.push({
num: numAry[i],
name: `animValue${i}`,
value: new Animated.Value(0),
})
}
Copy the codeReact: Mount array 60= [6, 0]
return (
<View style={styles.numContainer}>
<Animated.Text
style={[
styles.goldText,
styles.addMark,
{
opacity:opacityAnim.interpolate({
inputRange:[0, 1],
outputRange:[0, 1]
})
}
]}
>
+
</Animated.Text>
{
mount.map((item,index) => {
return (
<Animated.View
key={index}
style={[styles.textcon,{
height:(Number(item)+1) * 30,
top:this.createAnimate(item, index)
}]}>
{
this._createSingleNum(item)
}
</Animated.View>
)
})
}
</View>
)
Copy the code_createSingleNum(item)
Parameter item- The number passed in, number;
_createSingleNum = (num) => {
let ary =[];
for (let i =0; i <= num; i++) {
ary.push(i)
}
return (
<View>
{
ary.map((item,index)=>{
return (<Text key={index} style={[styles.goldText]}>{item}</Text>)
})
}
</View>
)
};
Copy the codeThe result is created as follows, each numeric column has an animation, scrolling from 0 to 5;
<View>
<Text>0<Text>
<Text>1<Text>
<Text>2<Text>
<Text>3<Text>
<Text>4<Text>
<Text>5<Text>
<View>
Copy the codeCreateAnimate () method, parameters: it- number e.g. 5 ind- index value, number, e.g. 0; Create an animation for each number in the array, and finally change the animation with the top value
createAnimate = (it, ind) => {
let propName = `animValue${ind}`;
return (
this.state.animAry[ind].value.interpolate({
inputRange: [0, 1],
outputRange: [30,-30 * it]
})
)
};
Copy the codeThe final three animations realize the beginning of the text animation. Sauce ~