【搭建react-native項目框架】4.自定義TabBar中間按鈕，實現(xiàn)播放時旋轉(zhuǎn)動畫

時間：2020-01-09 10:26:01

關(guān)鍵字： native react 框架

手機看文章

掃描二維碼
隨時隨地手機看文章

[導讀]關(guān)于如何集成TabBar，請看上一節(jié)《【搭建react-native項目框架】3.集成第三方路由和tab頁》本節(jié)只講解如何自定義TabBar的中間按鈕，以及播放時旋轉(zhuǎn)動畫的實現(xiàn)。關(guān)于動畫與播放器的集成

關(guān)于如何集成TabBar，請看上一節(jié)《【搭建react-native項目框架】3.集成第三方路由和tab頁》

本節(jié)只講解如何自定義TabBar的中間按鈕，以及播放時旋轉(zhuǎn)動畫的實現(xiàn)。

關(guān)于動畫與播放器的集成可以參考https://github.com/pheromone/react-native-videoDemo，但這個項目目前安卓存在bug，所以我只借鑒了動畫部分。

還是先來看效果圖

其實思路很簡單，首先要使TabBar把中間按鈕的位置空出來，然后擺上一個懸浮的按鈕，就能實現(xiàn)中間按鈕了。1.設(shè)置CustomTabBar的placeMiddle屬性為true，這個屬性表示是否把中間按鈕的位置留出來。

2.懸浮效果可以用絕對定位來實現(xiàn)，見下圖

在components下新建一個playButton.js文件。先寫一個外層View，絕對定位到頁面底部中間位置；再做個帶邊框的圓形View；然后用長方形View將圓形View下半部的邊框覆蓋；最后寫個旋轉(zhuǎn)圖和按鈕。

                
                    
                    
                     this.play()} underlayColor="transparent" style={[styles.playInner]}>

const styles = StyleSheet.create({
    playBox: {
        width: Common.autoScaleSize(128),
        height: Common.autoScaleSize(136),
        position: 'absolute',
        bottom: 0,
        left: Common.autoScaleSize(311),
        flexDirection: 'column',
        justifyContent: 'flex-start',
        alignItems: 'center',
    },
    playBoxCircle: {
        backgroundColor: '#ffffff',
        width: Common.autoScaleSize(128),
        height: Common.autoScaleSize(128),
        borderRadius: Common.autoScaleSize(128),
        position: 'absolute',
        bottom: Common.autoScaleSize(8),
        borderWidth: Common.autoScaleSize(1),
        borderColor: '#cdcdcd',
    },
? ? playBoxBackground: {
? ? ? ? backgroundColor: '#ffffff',
? ? ? ? width: Common.autoScaleSize(125),
? ? ? ? height: Common.autoScaleSize(72),
? ? ? ? position: 'absolute',
? ? ? ? bottom: 0,
? ? ? ? left: Common.autoScaleSize(1),
? ? },
    playInner: {
        width: Common.autoScaleSize(101),
        height: Common.autoScaleSize(101),
        borderRadius: Common.autoScaleSize(101),
        position: 'absolute',
        bottom: Common.autoScaleSize(20),
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
    },
    playInnerBox: {
        backgroundColor: '#cdcdcd',
        width: Common.autoScaleSize(101),
        height: Common.autoScaleSize(101),
        borderRadius: Common.autoScaleSize(101),
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
    },
    playBackImage: {
        width: Common.autoScaleSize(101),
        height: Common.autoScaleSize(101),
        borderRadius: Common.autoScaleSize(101),
        position: 'absolute',
    },
});

3.實現(xiàn)旋轉(zhuǎn)動畫。

先構(gòu)造初始旋轉(zhuǎn)角度、播放狀態(tài)和旋轉(zhuǎn)動畫

        this.state = {
            playImage: require('./resources/images/play.png'),
            rotateValue: new Animated.Value(0), //旋轉(zhuǎn)角度的初始值
        };
        this.isPlaying = false;
        this.playerAnimated = Animated.timing(this.state.rotateValue, {
            toValue: 1, //角度從0變1
            duration: 15000, //從0到1的時間
            easing: Easing.inOut(Easing.linear), //線性變化，勻速旋轉(zhuǎn)
        });

根據(jù)播放狀態(tài)切換播放按鈕的圖標，并開始/暫停播放

    play() {
        this.isPlaying = !this.isPlaying;
        if (this.isPlaying === true) {
            this.setState({
                playImage: require('./resources/images/pause.png'),
            });
            this.startPlay();
        } else {
            this.setState({
                playImage: require('./resources/images/play.png'),
            });
            this.stopPlay();
        }
    }

開始播放

    startPlay() {
        this.playerAnimated.start(() => {
            this.playerAnimated = Animated.timing(this.state.rotateValue, {
                toValue: 1, //角度從0變1
                duration: 15000, //從0到1的時間
                easing: Easing.inOut(Easing.linear), //線性變化，勻速旋轉(zhuǎn)
            });
            this.rotating();
        });
    }

暫停播放

    stopPlay() {
        this.state.rotateValue.stopAnimation((oneTimeRotate) => {
            //計算角度比例
            this.playerAnimated = Animated.timing(this.state.rotateValue, {
                toValue: 1,
                duration: (1-oneTimeRotate) * 15000,
                easing: Easing.inOut(Easing.linear),
            });
        });
    }

開始旋轉(zhuǎn)動畫

    rotating() {
        if (this.isPlaying) {
            this.state.rotateValue.setValue(0);
            this.playerAnimated.start(() => {
                this.rotating()
            })
        }
    };

4.在App.js文件中引入playButton.js

import PlayButton from "./components/playButton";

在最外層View組件底部渲染PlayButton

            
                //Router......

最后上完整的playButton.js代碼

import React, { Component } from 'react';
import {
    Animated,
    Easing,
    StyleSheet,
    View,
    TouchableOpacity,
    Image,
} from "react-native";
//自定義組件
import Common from "./common";
//頁面
import PlayScreen from '../views/play'; //播放頁

export default class PlayButton extends Component {
    constructor(props) {
        super(props);
        //使用Animated.Value設(shè)定初始化值（角度）
        this.state = {
            playImage: require('../resources/images/play.png'),
            rotateValue: new Animated.Value(0), //旋轉(zhuǎn)角度的初始值
        };
        this.isPlaying = false;
        this.playerAnimated = Animated.timing(this.state.rotateValue, {
            toValue: 1, //角度從0變1
            duration: 15000, //從0到1的時間
            easing: Easing.inOut(Easing.linear), //線性變化，勻速旋轉(zhuǎn)
        });
    }

    play() {
        this.isPlaying = !this.isPlaying;
        if (this.isPlaying === true) {
            this.setState({
                playImage: require('../resources/images/pause.png'),
            });
            this.startPlay();
        } else {
            this.setState({
                playImage: require('../resources/images/play.png'),
            });
            this.stopPlay();
        }
    }

    rotating() {
        if (this.isPlaying) {
            this.state.rotateValue.setValue(0);
            this.playerAnimated.start(() => {
                this.rotating()
            })
        }
    };

    startPlay() {
        this.playerAnimated.start(() => {
            this.playerAnimated = Animated.timing(this.state.rotateValue, {
                toValue: 1, //角度從0變1
                duration: 15000, //從0到1的時間
                easing: Easing.inOut(Easing.linear), //線性變化，勻速旋轉(zhuǎn)
            });
            this.rotating();
        });
    }

    stopPlay() {
        this.state.rotateValue.stopAnimation((oneTimeRotate) => {
            //計算角度比例
            this.playerAnimated = Animated.timing(this.state.rotateValue, {
                toValue: 1,
                duration: (1-oneTimeRotate) * 15000,
                easing: Easing.inOut(Easing.linear),
            });
        });
    }

    render() {
        return (
            
                
                
                 this.play()} underlayColor="transparent" style={[styles.playInner]}>
                    
                        
                        
                    
                
            
        );
    }
}

const styles = StyleSheet.create({
    playBox: {
        width: Common.autoScaleSize(128),
        height: Common.autoScaleSize(136),
        position: 'absolute',
        bottom: 0,
        left: Common.autoScaleSize(311),
        flexDirection: 'column',
        justifyContent: 'flex-start',
        alignItems: 'center',
    },
    playBoxCircle: {
        backgroundColor: '#ffffff',
        width: Common.autoScaleSize(128),
        height: Common.autoScaleSize(128),
        borderRadius: Common.autoScaleSize(128),
        position: 'absolute',
        bottom: Common.autoScaleSize(8),
        borderWidth: Common.autoScaleSize(1),
        borderColor: '#cdcdcd',
    },
    playBoxBackground: {
        backgroundColor: '#ffffff',
        width: Common.autoScaleSize(128),
        height: Common.autoScaleSize(101),
        position: 'absolute',
        bottom: 0,
    },
    playInner: {
        width: Common.autoScaleSize(101),
        height: Common.autoScaleSize(101),
        borderRadius: Common.autoScaleSize(101),
        position: 'absolute',
        bottom: Common.autoScaleSize(20),
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
    },
    playInnerBox: {
        backgroundColor: '#cdcdcd',
        width: Common.autoScaleSize(101),
        height: Common.autoScaleSize(101),
        borderRadius: Common.autoScaleSize(101),
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
    },
    playBackImage: {
        width: Common.autoScaleSize(101),
        height: Common.autoScaleSize(101),
        borderRadius: Common.autoScaleSize(101),
        position: 'absolute',
    },
});