直接上代码:
class HandIcon extends Component {
constructor(props) {
super(props);
this.state = {
offset: new Animated.Value(0),
}
}
componentDidMount() {
this.startAnimated();
}
startAnimated = () => {
const animationSlider = Animated.sequence([
Animated.timing(this.state.offset, {
toValue: 30,
duration: 300,
delay: 0,
easing: Easing.bezier(.79,.01,.33,1.01),
}),
Animated.timing(this.state.offset, {
toValue: 0,
duration: 300,
delay: 0,
easing: Easing.bezier(.79,.01,.33,1.01),
}),
]);
Animated.loop(animationSlider).start();
}
render() {
return (
<View pointerEvents={'none'} style={{
alignItems: 'center',
justifyContent: 'space-between',
...this.props.style
}}>
<Animated.Image
source={require('./source/images/hand-icon.png')}
style={{
width: 120,
height: 168,
transform: [
{
translateY: this.state.offset
}
],
}}>
</Animated.Image>
<Text style={{
fontSize: 30,
fontWeight: "900",
color: "#FFFFFF",
}}> 点击有惊喜~</Text>
</View>
);
}
}
效果如下:没错!就是这种进进出出的感觉~哈哈
附上小手的素材:是白的,白的。。。你看不见~