前面写了两篇关于 slider 组件如何实现的文章,有兴趣的朋友可以点击这里 原生 slider 组件的实现 和 React slider组件的实现 查看,今天写一篇关于 3D 轮播图实现原理的文章。
目前在找实习工作,有合适的机会希望小伙伴们多多推荐~
正文开始
本文最终的 3D 轮播效果如下图:
依然参照原来的思路,按照一个正规的项目来对待,我们还是按照如下过程来实现。
- 需求文档
- 设计方案
- 编码实现
- 自我测试
- 提交到 github
- 发布 npm 包
需求文档
因为我们是要实现一个 3D 轮播组件,所以不可避免地要使用一些 3D 属性,除了在 W3CSchool 上学习,我还买了本小册 WebGL 入门与实践,虽然这是本讲解 Webgl 的小册,但是这本小册也开辟了几个章节讲述 CSS3 中 3D 属性的用法,给我带来了一些新的思路。
列举一下我们的需求:
- 使用者传入四张图片,能够实现 3D 轮播效果,支持向上轮播和向下轮播的方向配置。
- 可以配置尺寸。
- 可以配置轮播持续时间。
- 可以配置轮播间隔时间。
- 可以通过 npm install 的方式安装使用。
需求比较简单,核心就是 3D 轮播效果。
设计方案
产品的需求到了,那么作为开发人员,要开始思考如何实现产品的需求了,除此之外,还需要考虑未来产品的意图,按照这个思路,我又想到了一些配置项,前面也讲过,这些都是隐含的开发需求:
- 针对以上的配置要设置一个默认参数:
- 方向配置,默认为 1,即向上转动。
- 尺寸配置,默认为父容器的尺寸。
- 轮播持续时间,默认为 2 秒。
- 轮播间隔时间,默认为 2 秒。
那么我们要开始写设计方案了。
- 需求关键: 关键需求就是根据传入的四张图片实现 3D 轮播效果。
- 视觉关键: 暂无。
- 交互关键: 暂无。
- 性能关键:这里我目前只想到:如果图片的尺寸过大,那么可能还未加载出来就已经开始转动了,需要在图片全部加载到本地之后再开始轮播。本期暂不做优化。
具体实现
实现主要就是利用 css3 transform 属性的 translateY 和 translateZ 值,将四张图片通过前移后移、上移、下移组成一个图片方盒。 拿四张 300px 高的图片举例。
- 父容器要设置 transform-style 为 preserve-3d 才可以让子元素展示出 3D 效果:
.container{
position: relative;
transform-style: preserve-3d;
}
- 同时子元素要上下前后平移:
.imgs:nth-child(1){
transform: translateZ(150px);
}
.imgs:nth-child(2){
transform: translateY(-150px) rotateX(90deg);
}
.imgs:nth-child(3){
transform: translateZ(-150px) rotateX(180deg);
}
.imgs:nth-child(4){
transform: translateY(150px) rotateX(270deg);
}
以上两个简单的设置,就可以形成一个图片方盒,那么,我们接下来要让它轮播起来,这些代码和上一节的 3D slider 实现原理类似,不做具体讲述,大家看看源码就很容易理解了:
import React from 'react';
import './index.css';
export default class extends React.Component {
constructor(props) {
super(props);
this.index = 1;
this.container = React.createRef();
}
componentDidMount () {
// 获取间隔时间,默认为 2000 ms。
const delayTime = this.props.delayTime * 1000 || 2000;
// 获取父容器
let parent = this.container.current.parentNode;
//获取父容器的宽度
let width = this.props.width || parent.clientWidth;
//获取父容器的高度。
let height = this.props.height || parent.clientHeight;
// 设置第一张图片和第三张图片的前后偏移。
let imgs = this.container.current.children;
imgs[0].style.transform = `translateZ(${height / 2}px)`;
imgs[2].style.transform = `translateZ(-${height / 2}px) rotateX(180deg)`;
// 设置轮播容器的尺寸
this.container.current.style.width = width + 'px';
this.container.current.style.height = height + 'px';
// 开始轮播
this.timer = setTimeout(this.loop.bind(this), delayTime);
this.container.current.addEventListener('transitionend', () => {
this.timer = setTimeout(this.loop.bind(this), delayTime);
})
}
loop () {
this.container.current.style.transform = 'rotateX(' + ((this.props.direction || 1) * this.index * 90) + 'deg)';
this.container.current.style.transition = (this.props.transitionTime || 2) + 's';
this.index++;
}
render () {
return <div className='container' ref={this.container}>
{this.props.imgList.map(item => {
return <img className='img-item' src={item.src} />
})}
</div>
}
}
自我测试
自我测试比较简单,就是将自己作为一个用户来模拟使用这个组件,模拟一切可能遇到的情况进行测试,如果有问题,再进行修复。
构建
- 执行 npm run build 构建出可供大家引入的 index.js
- 执行 npm run demo 构建出可供大家预览的页面。
提交到 git
分别将上面的构建结果提交到 github 的 master 和 gh-pages 分支。
- git add ./
- git commit -m '...'
- git push origin master
- git checkout -b gh-pages
- git push origin gh-pages
发布
最后一步就是发布了,这里也比较简单,但是我们要在package.json 中设置入口文件,设置 main 为./dist/index.js
即可。
{
"name": "react-slider3d-fjj",
"version": "0.0.1",
"description": "",
"main": "./dist/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --mode=development",
"demo": "webpack --config ./webpack.config.js --progress --colors",
"build": "babel src -d dist --copy-files "
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel": "^6.23.0",
"babel-cli": "^6.26.0",
"babel-core": "~6.26.0",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^2.1.0",
"html-webpack-plugin": "^3.2.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"source-list-map": "^2.0.1",
"style-loader": "^0.23.1",
"watchpack": "^1.6.0",
"webpack": "^4.29.5",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.2.1"
},
"dependencies": {
"react": "^16.8.3",
"react-dom": "^16.8.3"
}
}
小结
以上就是我做的第三个小组件,都比较简单,由于本人尚未毕业,所以能力有限,希望大家多提意见,未来我还会逐渐输出一些新的组件供大家学习~~