正文
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)
}
}
![【电子书】[职业技术] 《深入react技术栈》[陈屹][epub+mobi+azw3]](https://www.04ip.com/template/qe/style/noimg/8.jpg "【电子书】[职业技术] 《深入react技术栈》[陈屹][epub+mobi+azw3]")
