React native 实现音乐播放图片暂停播放效果

首先动画 旋转动画搞起来

在构造里面添加旋转的定义

constructor(props) {
		super(props);
		this.state = {
			rotateValue: new Animated.Value(0),  //旋转
		};
		this.isPause = false;
		this.mAnimate = Animated.timing(this.state.rotateValue, {
			toValue: 1,
			duration: 30000,
			easing: Easing.inOut(Easing.linear),
		});
	}

render 渲染的方法里

render() {
	return (
		<View style={styles.container}>
			<Animated.Image ref='mAnimate'  source={require("./timg.jpg")} style={{
              width:width/2,
              height:width/2,
              borderRadius:width/4,
			  transform: [{
                rotate: this.state.rotateValue.interpolate({ /旋转，使用插值函数做值映射
				inputRange: [0, 1],
				outputRange: ['0deg', '360deg']})},
				],
			   }
		   }/>
		</View>
	);
}

同时在定义两个方法来启动或暂停图片

开启动画的方法：

//重复动画
_imgStarting = () => {
	if (this.isPause) {
		this.state.rotateValue.setValue(0);
		this.mAnimate.start(() => {
			this._imgStarting()
		})
	}
};

startAnim(){
	if (this.isPause){ //避免多次点击启动多次动画出现异常.
	    return
    }
	this.isPause = true;
	    this.setState({
		btnStatus:'pause'
    })
	this.mAnimate.start(() => {
	    this.mAnimate = Animated.timing(this.state.rotateValue, {
			toValue: 1,
			duration: 30000,
			easing: Easing.inOut(Easing.linear),
		});
		this._imgStarting()
	})
  }

暂停动画的方法：

pauseAnim(){
    if (!this.isPause){   //避免多次点击启动多次动画出现异常.
		return
	}
	this.isPause = false;
	this.setState({
		btnStatus:'start'
	})
	this.state.rotateValue.stopAnimation((oneTimeRotate) => {
		//计算角度比例
		this.mAnimate = Animated.timing(this.state.rotateValue, {
			toValue: 1,
			duration: (1 - oneTimeRotate) * 30000,
			easing: Easing.inOut(Easing.linear),
		});
	});
  }

同时我们需要定义一个按钮来模拟暂停和播放的效果，控制图片的播放和暂停的状态

在render </Animated.Image>闭合标签添加一个按钮

 <TouchableOpacity
          style={{backgroundColor:'#9ed048',marginTop:30,margin:14,paddingLeft:40,paddingRight:40}}
          onPress={()=>{this.isPause ? this.pauseAnim() : this.startAnim()}}>
          <Text style={{fontSize:24}}>{this.state.btnStatus}</Text>
        </TouchableOpacity>

最后在 “componentDidMount”中默认启动动画。

componentDidMount(){
  this.startAnim()
}

实现效果

完整代码参考