react-native 如何实现鼓掌动画

首先发个非常小的鼓掌动画效果演示视频，看看我们最终到底要实现一个什么样的鼓掌动画：

https://pan.baidu.com/s/1KSibyvRpHBFiqiatlzcIHg

其中鼓掌图片的尺寸为： 512 x 512，可以下载图片另存为clap.png即可直接使用

app/components/ClapButton.js文件的代码如下：

import React,{Component} from 'react';
import {
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
Animated,
} from 'react-native';

export default class ClapsButton extends Component {
render(){
return(
<View style={styles.container}>
<TouchableOpacity style={styles.clapsButton}>
<Image source={require('../images/clap.png')} style={{height: 57,width:55}} />
</TouchableOpacity>
<ClapBubble />
</View>
);
}

}

class ClapBubble extends Component {
constructor(){
super()
this.state = {
yPosition: new Animated.Value(0),
opacity: new Animated.Value(0)
}
}

componentDidMount() {
Animated.parallel([
Animated.timing(this.state.yPosition,{
toValue: -200,
duration: 500,
}),
Animated.timing(this.state.opacity,{
toValue: 1,
})
]).start()
}

render(){
let animationStyle = {
transform: [{
translateY: this.state.yPosition
}],
opacity: this.state.opacity
}
return(
<Animated.View style={[styles.clapBubble,animationStyle]}>
<Text style={styles.clapText}> +2 </Text>
</Animated.View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
},
clapsButton: {
position: 'absolute',
height: 60,
width: 60,
borderRadius: 30,
backgroundColor: '#ecf0f1',
bottom: 20,
right: 20,
elevation: 3,
justifyContent: 'center',
alignItems: 'center',
clapBubble: {
position: 'absolute',
backgroundColor: '#15a872',
clapText: {
color: 'white',
fontSize: 18
},
})

App.js文件的代码如下：

import React,
} from 'react-native';

import ClapsButton from './app/components/ClapsButton';

export default class App extends Component {
render(){
return(
<View style={styles.container}>
<ClapsButton />
</View>
);
}

}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fde4a7',

})

给鼓掌按钮加一个事件方法，首先另外单独开启一个终端，cd zigoo && react-native log-android，点击鼓掌按钮12次，日志效果图如下：

constructor(props) {
super(props)
this.state = {
count: 0,
claps: []
}
this.clap = this.clap.bind(this)
}

clap() {
let count = this.state.count
let claps = this.state.claps
count++
claps.push(count)
this.setState({count})
console.log(count)
console.log(claps)
}

render(){
return(
<View style={styles.container}>
<TouchableOpacity
activeOpacity={0.7}
onPress={this.clap}
style={styles.clapsButton}>
<Image source={require('../images/clap.png')} style={{height: 57,

})

以上2个范例是鼓掌动画的演变开发过程，上面的动画效果要想看到它只能Reload刷新手机屏幕，下面代码的演变过程是通过点击鼓掌按钮记录鼓掌次数的动画效果，注意标识了背景色的部分代码变化：

鼓掌用到的红色小手掌图片 app/images/clapped.png 文件如下，另存为可直接使用：

renderClaps() {
return this.state.claps.map(countNum => <ClapBubble key={countNum} count={countNum} />)
}

render(){
let clapIcon = this.state.count > 0 ? <Image source={require('../images/clapped.png')} style={{height: 57,width:55}} />
: <Image source={require('../images/clap.png')} style={{height: 57,width:55}} />
return(
<View style={styles.container}>
<TouchableOpacity
activeOpacity={0.7}
onPress={this.clap}
style={styles.clapsButton}>
{clapIcon}
</TouchableOpacity>
{this.renderClaps()}
</View>
);
}

}

class ClapBubble extends Component {
constructor(){
super()
this.state = {
yPosition: new Animated.Value(0),animationStyle]}>
<Text style={styles.clapText}> +{this.props.count} </Text>
</Animated.View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,204,51);">App.js文件的代码如下：

import React,51);">接下来实现每次点击鼓掌按钮递增加1后，动画延迟5秒后自动从屏幕上消失，注意标识背景色的部分代码变化：

app/components/ClapButton.js文件的代码如下：

import React,
claps: []
}
this.clap = this.clap.bind(this)
}

animationComplete(countNum) {
claps = this.state.claps
claps.splice(claps.indexOf(countNum),1)
this.setState({claps})
}

clap() {
let count = this.state.count
let claps = this.state.claps
count++
claps.push(count)
this.setState({count})
}

renderClaps() {
return this.state.claps.map(
countNum => <ClapBubble key={countNum}
count={countNum}
animationComplete={this.animationComplete.bind(this)}
/>)
}

render(){
let clapIcon = this.state.count > 0 ? <Image source={require('../images/clapped.png')} style={{height: 57,width:55}} />
return(
<View style={styles.container}>
<TouchableOpacity
activeOpacity={0.7}
onPress={this.clap}
style={styles.clapsButton}>
{clapIcon}
</TouchableOpacity>
{this.renderClaps()}
</View>
);
}

}

class ClapBubble extends Component {
constructor(){
super()
this.state = {
yPosition: new Animated.Value(0),
})
]).start(() => {
setTimeout(() => {
this.props.animationComplete(this.props.count)
},5000)
})
}

render(){
let animationStyle = {
transform: [{
translateY: this.state.yPosition
}],animationStyle]}>
<Text style={styles.clapText}> +{this.props.count} </Text>
</Animated.View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,

})

App.js文件的代码如下：

import React,

})

接下来实现的功能是点击1次鼓掌按钮递增加1会一直不停地出现，显示0.1秒立即消失

app/components/ClapButton.js文件的代码如下：

import React,
claps: []
}
this.clap = this.clap.bind(this)
this.keepClaping = this.keepClaping.bind(this）
}

animationComplete(countNum) {
claps = this.state.claps
claps.splice(claps.indexOf(countNum),1)
this.setState({claps})
}

clap() {
let count = this.state.count
let claps = this.state.claps
count++
claps.push(count)
this.setState({count})
}

keepClaping() {
setInterval(() => this.clap(),150);

}

renderClaps() {
return this.state.claps.map(
countNum => <ClapBubble key={countNum}
count={countNum}
animationComplete={this.animationComplete.bind(this)}
/>)
}

render(){
let clapIcon = this.state.count > 0 ? <Image source={require('../images/clapped.png')} style={{height: 57,width:55}} />
return(
<View style={styles.container}>
<TouchableOpacity
activeOpacity={0.7}
onPress={this.clap}
onPressIn={this.keepClaping}
style={styles.clapsButton}>
{clapIcon}
</TouchableOpacity>
{this.renderClaps()}
</View>
);
}

}

class ClapBubble extends Component {
constructor(){
super()
this.state = {
yPosition: new Animated.Value(0),
})
]).start(() => {
setTimeout(() => {
this.props.animationComplete(this.props.count)
},100)
})
}

render(){
let animationStyle = {
transform: [{
translateY: this.state.yPosition
}],
})

最后一步啦，既然出现了一直不停地出现递增加1动画，当然也需要实现动画停止的事件方法，我们想看到动画效果必须用鼠标一直点击在鼓掌按钮上不要放手，从鼓掌图标上放手动画很快就会自动消失停止，注意标识背景色的代码

this.keepClaping = this.keepClaping.bind(this)
this.stopClaping = this.stopClaping.bind(this)
}

animationComplete(countNum) {
claps = this.state.claps
claps.splice(claps.indexOf(countNum),51);"> keepClaping() {
this.clapTimer = setInterval(() => this.clap(),150);
}

stopClaping() {
if (this.clapTimer) {
clearInterval(this.clapTimer)
}
}
renderClaps() {
return this.state.claps.map(
countNum => <ClapBubble key={countNum}
count={countNum}
animationComplete={this.animationComplete.bind(this)}
/>)
}

render(){
let clapIcon = this.state.count > 0 ? <Image source={require('../images/clapped.png')} style={{height: 57,width:55}} />
return(
<View style={styles.container}>
<TouchableOpacity
activeOpacity={0.7}
onPress={this.clap}
onPressIn={this.keepClaping}
onPressOut={this.stopClaping}
style={styles.clapsButton}>
{clapIcon}
</TouchableOpacity>
{this.renderClaps()}
</View>
);
}

}

class ClapBubble extends Component {
constructor(){
super()
this.state = {
yPosition: new Animated.Value(0),100)
})
}

render(){
let animationStyle = {
transform: [{
translateY: this.state.yPosition
}],

})

补充一点上面递增加1是从0开始递增的，如果我们希望是从100开始递增也很简单稍微变换一下app/components/ClapButton.js文件中的代码行：

constructor(props) {
super(props)
this.state = {
count: this.props.count ? this.props.count : 0,
claps: []
}
this.clap = this.clap.bind(this)
this.keepClaping = this.keepClaping.bind(this)
this.stopClaping = this.stopClaping.bind(this)

}

调用动画组件我们只需要在App.js文件中稍微变化一下即可：

import React,
} from 'react-native';

import ClapsButton from './app/components/ClapsButton';

export default class App extends Component {
render(){
return(
<View style={styles.container}>
<ClapsButton count={100} />
</View>
);
}

}

const styles = StyleSheet.create({
container: {
flex: 1,

})

react-native 如何实现鼓掌动画

猜你在找的React相关文章