react 利用react-hammerjs插件实现滑动特效和点击特效

react-hammerjs是一款由hammer.js的JS插件来实现在react中实现手势滑动的事件插件，

它有各种各样的手势支持效果，这里我们就使用下它最简单的3种效果来实现我们要的动画

分别是点击（onTap）、滑动（onPan）、滑动结束（onPanEnd）

具体事件参数和其它事件可以参考官网

动画效果

上代码

import React from 'react'
import {draw} from './canvas'
import Hammer from 'react-hammerjs'
import axios from './../axios'
import "./index.css"

export default class Index extends React.Component{
    state = {
        bubble:[],
        bubbleState:true,
        bubbleClass:[
            {
                class:'bubble-1',
            },
            {
                class:'bubble-2',
            },
            {
                class:'bubble-3',
            },
            {
                class:'bubble-4',
            },
            {
                class:'bubble-5',
            }
        ],
        fishList:[],
        param:[
            {
                version:'v1',
                cityid:'101020100'
            }
        ]
    }
    componentWillMount() {
        this.tem()
        let num = Math.floor(Math.random()*5);
        console.log("num----->",num)
    }
    tem=()=>{ //天气温度
        axios.get("api/",this.state.param,
            result=> {
                console.log("--------->",result)
                this.setState({listData:result.data ||[]})
            },
            result=> {

            }
        );
    }
    handleClick=(e)=>{ //点击
        let fishList = this.state.fishList;
        let leftX = e.center.y
        let topY = e.center.y
        let fish = {}

        if(1080/2>e.center.x){ //左
            console.log("点击-1-》",e,topY,1080/2>e.center.x);
            fish.left = '-30'
            fish.right = ''
            fish.top = topY
            fish.class='fishClassL-1'
            fish.src='./video/fish-1.jpg'
        }else { //右
            fish.left = ''
            fish.right = '-30'
            fish.top = topY
            fish.class='fishClassR-1'
            fish.src='./video/fish-2.jpg'
            console.log("点击-2-》",e,topY,1080/2>e.center.x);
        }

        console.log("fish----->",fish)
        fishList.push(fish)
        this.setState({
            fishList:fishList
        })
    }
    onPan=(e)=>{ //划动
        let bubbleState = this.state.bubbleState
        if(bubbleState){
            let num = Math.floor(Math.random()*5);
            let bubbleClass = this.state.bubbleClass
            let bubble = {}
            bubble.left = e.center.x
            bubble.top = e.center.y
            bubble.src = './video/bubble-1.png'
            bubble.class = bubbleClass[num].class
            // bubble.class = 'bubble-3'
            let bubbleList = this.state.bubble
            bubbleList.push(bubble)
            // console.log("划动--》",e);

            this.setState({
                bubble:bubbleList,
                // bubbleState:false
            })
        }
    }
    onPanEnd =()=>{
        this.setState({
            bubbleState:false
        })
        console.log("划动结束--》");
        setTimeout(()=> {
            this.setState({
                bubble:[],
                bubbleState:true
            })
        },3000)
    }
    componentDidMount() {
        if (this.canvas) {
            draw(this.canvas)
        }
    }
    render() {
        const { percent,tops } = this.state;
        return(
            <Hammer onTap={this.handleClick}  onPan={this.onPan} onPanEnd={this.onPanEnd} >
                <div id={'scrollBox'} className="video-box">
                    {/*<div className="fish" style={{left:`${percent}%`,top:`${tops}px`}}></div>*/}
                    {
                        this.state.bubble && this.state.bubble.map((item,index)=>{
                            return (
                                <div className="bubble-box" key={index} style={{left:`${item.left}px`,top:`${item.top}px`}}><img className={`${item.class}`} src={item.src} /></div>
                            )
                        })
                    }
                    {
                        this.state.fishList && this.state.fishList.map((item,index)=>{
                            return (
                                <div id="fish-box" className={`${item.class}`} key={index} style={{left:`${item.left}px`,right:`${item.right}px`,top:`${item.top}px`}}><img  src={item.src} /></div>
                            )
                        })
                    }
                    <canvas width='1080' height='1920'  ref={node => this.canvas = node}  style={{width: '100%',height: 'auto',}}></canvas>
                </div>
            </Hammer>
        )
    }
}

.video-box{
    /*background-color: #0BB20C;*/
    height: auto;
    width: 100%;
    position: relative;
}
.bubble-box{
    position: absolute;
}
.bubble-box img{

}
.bubble-box img.bubble-1{
    width: 20px;
    height: 20px;
    animation:mymove1 5s normal;
}
.bubble-box img.bubble-2{
    width: 10px;
    height: 10px;
    animation:mymove2 4s normal;
}
.bubble-box img.bubble-3{
    width: 15px;
    height: 15px;
    animation:mymove3 5s normal;
}
.bubble-box img.bubble-4{
    width: 18px;
    height: 18px;
    animation:mymove4 4s normal;
}
.bubble-box img.bubble-5{
    width: 12px;
    height: 12px;
    animation:mymove5 5s normal;
}
.fish{
    position: absolute;
    /*left: 0;*/
    width: 20px;
    height: 20px;
    background-color: #0CD0C0;
}

@keyframes mymove1
{
    0% {
        opacity:;
        transform:translateY(0px);
    }
    100% {
        opacity:;
        transform:translateY(-55px);
    }
}
@keyframes mymove2
{
    0% {
        opacity:;
        transform:translateY(0px);
    }
    100% {
        opacity:;
        transform:translateY(-65px);
    }
}
@keyframes mymove3
{
    0% {
        opacity:;
        transform:translateY(0px);
    }
    100% {
        opacity:;
        transform:translateY(-75px);
    }
}
@keyframes mymove4
{
    0% {
        opacity:;
        transform:translateY(0px);
    }
    100% {
        opacity:;
        transform:translateY(-95px);
    }
}
@keyframes mymove5
{
    0% {
        opacity:;
        transform:translateY(0px);
    }
    100% {
        opacity:;
        transform:translateY(-85px);
    }
}

#fish-box{
    position: absolute;

}
#fish-box img{
    width: 30px;
    height: 30px;
}

.fishClassL-1{
    animation:fishmovel1 10s normal;
}
@keyframes fishmovel1
{
    0% {
        left: -30px;
    }
    100% {
        left: 1100px;
    }
}
.fishClassR-1{
    animation:fishmover1 10s normal;
}
@keyframes fishmover1
{
    0% {
        right: -30px;
    }
    100% {
        right: 1100px;
    }
}
/*1920*1080*/

利用canvas将视频渲染成动画背景

export const draw = (canvas) => {
    if (canvas) {
        //获取canvas上下文
        let ctx = canvas.getContext('2d');
        let videoState = true;
        //创建video标签，并且设置相关属性
        let video = document.createElement('video');

        let videoSrc1 = './video/video-2.mp4'
        let videoSrc2 = './video/video-3.mp4'
        video.preload = true;
        video.autoplay = true;
        video.loop = true;
        video.src = videoSrc1;
        // video.className = 'aaaaaaaaa'
        //document.body.appendChild(video);

        //监听video的play事件，一旦开始，就把video逐帧绘制到canvas上
        video.addEventListener('play',() => {
            let play = () => {
                ctx.drawImage(video,0,0);
                requestAnimationFrame(play);
            };
            play();
        },false)

        //暂停/播放视频
        canvas.addEventListener('click',() => {
            // if (!video.paused) {
            //     video.pause();
            //     console.log("暂停视频！")
            // } else {
            //     video.play();
            //     console.log("开始视频！")
            // }
            if (videoState) {
                // video.src = videoSrc2;
                // videoState = false;
                // canvasBg = canvas

            } else {
                // video.src = videoSrc1;
                // videoState = true;
            }
        },false);

    }
}

封装axios插件

// import JsonP from 'jsonp'
import axios from 'axios'
// import showMsg from '../components/notification'

// 配置API接口地址
var root = 'https://www.tianqiapi.com/'
// var root = '/prefix'
// 自定义判断元素类型JS
function toType (obj) {
    return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
}
// 参数过滤函数
function filterNull (o) {
    for (var key in o) {
        if (o[key] === null) {
            delete o[key]
        }
        if (toType(o[key]) === 'string') {
            o[key] = o[key].trim()
        } else if (toType(o[key]) === 'object') {
            o[key] = filterNull(o[key])
        } else if (toType(o[key]) === 'array') {
            o[key] = filterNull(o[key])
        }
    }
    return o
}
/*
  接口处理函数
  这个函数每个项目都是不一样的，我现在调整的是适用于
  https://cnodejs.org/api/v1 的接口，如果是其他接口
  需要根据接口的参数进行调整。参考说明文档地址：
  https://cnodejs.org/topic/5378720ed6e2d16149fa16bd
  主要是，不同的接口的成功标识和失败提示是不一致的。
  另外，不同的项目的处理方法也是不一致的，这里出错就是简单的alert
*/

function apiAxios (method, url, params, success, failure) {
    if (params) {
        params = filterNull(params)
    }
    axios({
        method: method,
        url: url,
        data: method === 'POST' || method === 'PUT' ? params : null,
        params: method === 'GET' || method === 'DELETE' ? params : null,
        baseURL: root,
        withCredentials: false
    }).then(function (res) {
        // if (res.data.success === true) {
        //   if (success) {
        //     success(res.data)
        //   }
        // } else {
        //   if (failure) {
        //     failure(res.data)
        //   } else {
        //     // window.alert('error: ' + JSON.stringify(res.data))
        //     console.log('error: 222' + JSON.stringify(res.data));
        //   }
        // }
        success(res.data);
        // success(JSON.stringify(res.data));
    }).catch(function (err) {
        // let res = err.response
        // if (err) {
        //   // window.alert('api error, HTTP CODE: ' + res.status)
          console.log('api error333, HTTP CODE: ' + err.status);
        // }

        // showMsg.error('api error, HTTP CODE: ' +err.status);
    })
}

// 返回在react模板中的调用接口
export default {
    get: function (url, params, success, failure) {
        return apiAxios('GET', url, params, success, failure)
    },
    post: function (url, params, success, failure) {
        return apiAxios('POST', url, params, success, failure)
    },
    put: function (url, params, success, failure) {
        return apiAxios('PUT', url, params, success, failure)
    },
    delete: function (url, params, success, failure) {
        return apiAxios('DELETE', url, params, success, failure)
    }
}