首先来看一下页面效果
一、前言
这个需求是起初是公司楼下大屏需要展示车位信息，车位变化的过程中需要有翻牌动作，因此做了这么一个翻页组件。
二、设计思路
-
至少有两张牌，一张是翻牌前的数字，一个是翻牌后的数字，并将他们叠加放在一起。
-
在翻牌的过程，需要有出现一定的动画，并区分是向上翻动还是向下翻动。
- 一次只增加 1 或者减少 1
三、组件实现
创建单个翻牌组件 Flipper，核心是翻牌函数 _flip
_flip(type, front, back) {
// 如果处于翻转中，则不执行
if (this.isFlipping) {
return false
}
this.frontTextFromData = front
this.backTextFromData = back
// 根据传递过来的type设置翻转方向
this.flipType = type
// 设置翻转状态为true
this.isFlipping = true
setTimeout(() => {
// 设置翻转状态为false
this.isFlipping = false
this.frontTextFromData = back
}, this.duration)
},
此函数介绍三个参数，type 表示翻转方向，接收的值为 down 和 up，front 表示处于前方的牌的数字，back 表示处于后方的牌的数字。
另外创建翻牌组合组件 Flow，这个组件会对 Flipper 组件进行组合，此组件只接收一个参数 nowNum 表示当前的数字。另外，此组件有个核心方法 flip
// 从 nowNum 翻到 nextNum
flip(nowNum, nextNum) {
let that = this
let beforeNum
let afterNum
beforeNum = nowNum
if (nowNum < nextNum) {
afterNum = nowNum + 1
if (afterNum <= nextNum) {
this.update(this.numToStr(beforeNum), this.numToStr(afterNum))
this.timer = setInterval(() => {
afterNum++
beforeNum++
if (afterNum > nextNum) {
that.$emit("flipFinish")
that.nowNumStr = that.numToStr(nextNum)
clearInterval(that.timer)
} else {
that.update(that.numToStr(beforeNum), that.numToStr(afterNum))
}
}, 700)
} else {
that.$emit("flipFinish")
}
} else {
afterNum = nowNum - 1
if (afterNum >= nextNum) {
this.update(this.numToStr(beforeNum), this.numToStr(afterNum))
this.timer = setInterval(() => {
afterNum--
beforeNum--
if (afterNum < nextNum) {
that.$emit("flipFinish")
that.nowNumStr = that.numToStr(nextNum)
clearInterval(that.timer)
} else {
that.update(that.numToStr(beforeNum), that.numToStr(afterNum))
}
}, 700)
} else {
that.$emit("flipFinish")
}
}
}
此方法接收 nowNum 和 nextNum，表示翻牌前后的数字，在方法中会判断应该是向上翻牌还是向下翻牌
，当翻牌结束后会触发 flipFinish 事件告知翻牌已结束。
该组件还会提供 changeNum 方法用于更新翻牌数字
// 翻到 nextNum
changeNum(nextNum) {
let nowNum = Number(this.nowNumStr)
this.flip(nowNum, nextNum)
}
四、业务使用
业务方在使用组件时，只需要传递 nowNum 参数即可，并通过调用 changeNum 方法进行翻牌
<Flow ref="freeNum" @parkFlipFinish="parkFlipFinish" :nowNum="FreeNum"></Flow>
flopUp() {
this.FreeNum = this.FreeNum + 10
this.$refs.freeNum.changeNum(this.FreeNum)
},
flopDown() {
this.FreeNum = this.FreeNum - 10
this.$refs.freeNum.changeNum(this.FreeNum)
}
五、完整代码
- Flipper 组件
<template>
<div class="M-Flipper" :class="[flipType, { go: isFlipping }]">
<div class="digital front" :class="_textClass(frontTextFromData)"></div>
<div class="digital back" :class="_textClass(backTextFromData)"></div>
</div>
</template>
<script>
export default {
name: "FlipClock",
data() {
return {
isFlipping: false,
flipType: "down",
frontTextFromData: 0,
backTextFromData: 1
}
},
props: {
// 前牌文字
frontText: {
type: [Number, String],
default: ""
},
// 后牌文字
backText: {
type: [Number, String],
default: 1
},
// flipping duration, please be consistent with the CSS animation-duration value.
// 翻牌动画时间，与CSS中设置的animation-duration保持一致
duration: {
type: Number,
default: 200
}
},
methods: {
_textClass(number) {
return "number" + number
},
_flip(type, front, back) {
// 如果处于翻转中，则不执行
if (this.isFlipping) {
return false
}
this.frontTextFromData = front
this.backTextFromData = back
// 根据传递过来的type设置翻转方向
this.flipType = type
// 设置翻转状态为true
this.isFlipping = true
setTimeout(() => {
// 设置翻转状态为false
this.isFlipping = false
this.frontTextFromData = back
}, this.duration)
},
// 下翻牌
flipDown(front, back) {
this._flip("down", front, back)
},
// 上翻牌
flipUp(front, back) {
this._flip("up", front, back)
},
// 设置前牌文字
setFront(text) {
this.frontTextFromData = text
},
// 设置后牌文字
setBack(text) {
this.backTextFromData = text
}
},
created() {
this.frontTextFromData = this.frontText
this.backTextFromData = this.backText
}
}
</script>
<style scoped>
.M-Flipper {
display: inline-block;
position: relative;
width: 26px;
height: 30px;
line-height: 30px;
/* border: solid 1px #000; */
border-radius: 2px;
font-size: 20px;
color: #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
text-align: center;
}
.M-Flipper .digital:before,
.M-Flipper .digital:after {
content: "";
position: absolute;
left: 0;
right: 0;
background: #1e2e74;
overflow: hidden;
box-sizing: border-box;
}
.M-Flipper .digital:before {
top: 0;
bottom: 50%;
border-radius: 2px 2px 0 0;
/* border-bottom: solid 1px #666; */
}
.M-Flipper .digital:after {
top: 50%;
bottom: 0;
border-radius: 0 0 2px 2px;
line-height: 0;
}
/*向下翻*/
.M-Flipper.down .front:before {
z-index: 3;
}
.M-Flipper.down .back:after {
z-index: 2;
transform-origin: 50% 0%;
transform: perspective(160px) rotateX(180deg);
}
.M-Flipper.down .front:after,
.M-Flipper.down .back:before {
z-index: 1;
}
.M-Flipper.down.go .front:before {
transform-origin: 50% 100%;
animation: frontFlipDown 0.2s ease-in-out both;
box-shadow: 0 -2px 6px rgba(255, 255, 255, 0.3);
backface-visibility: hidden;
}
.M-Flipper.down.go .back:after {
animation: backFlipDown 0.2s ease-in-out both;
}
/*向上翻*/
.M-Flipper.up .front:after {
z-index: 3;
}
.M-Flipper.up .back:before {
z-index: 2;
transform-origin: 50% 100%;
transform: perspective(160px) rotateX(-180deg);
}
.M-Flipper.up .front:before,
.M-Flipper.up .back:after {
z-index: 1;
}
.M-Flipper.up.go .front:after {
transform-origin: 50% 0;
animation: frontFlipUp 0.2s ease-in-out both;
box-shadow: 0 2px 6px rgba(255, 255, 255, 0.3);
backface-visibility: hidden;
}
.M-Flipper.up.go .back:before {
animation: backFlipUp 0.2s ease-in-out both;
}
@keyframes frontFlipDown {
0% {
transform: perspective(160px) rotateX(0deg);
}
100% {
transform: perspective(160px) rotateX(-180deg);
}
}
@keyframes backFlipDown {
0% {
transform: perspective(160px) rotateX(180deg);
}
100% {
transform: perspective(160px) rotateX(0deg);
}
}
@keyframes frontFlipUp {
0% {
transform: perspective(160px) rotateX(0deg);
}
100% {
transform: perspective(160px) rotateX(180deg);
}
}
@keyframes backFlipUp {
0% {
transform: perspective(160px) rotateX(-180deg);
}
100% {
transform: perspective(160px) rotateX(0deg);
}
}
.M-Flipper .number0:before,
.M-Flipper .number0:after {
content: "0";
}
.M-Flipper .number1:before,
.M-Flipper .number1:after {
content: "1";
}
.M-Flipper .number2:before,
.M-Flipper .number2:after {
content: "2";
}
.M-Flipper .number3:before,
.M-Flipper .number3:after {
content: "3";
}
.M-Flipper .number4:before,
.M-Flipper .number4:after {
content: "4";
}
.M-Flipper .number5:before,
.M-Flipper .number5:after {
content: "5";
}
.M-Flipper .number6:before,
.M-Flipper .number6:after {
content: "6";
}
.M-Flipper .number7:before,
.M-Flipper .number7:after {
content: "7";
}
.M-Flipper .number8:before,
.M-Flipper .number8:after {
content: "8";
}
.M-Flipper .number9:before,
.M-Flipper .number9:after {
content: "9";
}
</style>
- Flow 组件
<template>
<div class="FlipClock">
<Flipper ref="Thousand" />
<Flipper ref="Hundred" />
<Flipper ref="Digit" />
<Flipper ref="Unit" />
</div>
</template>
<script>
import Flipper from "./Flipper"
export default {
name: "FlipClock",
data() {
return {
timer: null,
flipObjs: [],
nowNumStr: ""
}
},
components: {
Flipper
},
methods: {
// 初始化数字
init(nowNumStr) {
this.nowNumStr = this.numToStr(nowNumStr)
for (let i = 0; i < this.flipObjs.length; i++) {
this.flipObjs[i].setFront(this.nowNumStr[i])
}
this.$emit("parkFlipFinish")
},
// 翻到 nextNum
changeNum(nextNum) {
let nowNum = Number(this.nowNumStr)
this.flip(nowNum, nextNum)
},
// 从 nowNum 翻到 nextNum
flip(nowNum, nextNum) {
let that = this
let beforeNum
let afterNum
beforeNum = nowNum
if (nowNum < nextNum) {
afterNum = nowNum + 1
if (afterNum <= nextNum) {
this.update(this.numToStr(beforeNum), this.numToStr(afterNum))
this.timer = setInterval(() => {
afterNum++
beforeNum++
if (afterNum > nextNum) {
that.$emit("flipFinish")
that.nowNumStr = that.numToStr(nextNum)
clearInterval(that.timer)
} else {
that.update(that.numToStr(beforeNum), that.numToStr(afterNum))
}
}, 700)
} else {
that.$emit("flipFinish")
}
} else {
afterNum = nowNum - 1
if (afterNum >= nextNum) {
this.update(this.numToStr(beforeNum), this.numToStr(afterNum))
this.timer = setInterval(() => {
afterNum--
beforeNum--
if (afterNum < nextNum) {
that.$emit("flipFinish")
that.nowNumStr = that.numToStr(nextNum)
clearInterval(that.timer)
} else {
that.update(that.numToStr(beforeNum), that.numToStr(afterNum))
}
}, 700)
} else {
that.$emit("flipFinish")
}
}
},
// 翻牌动作
update(now, next) {
for (let i = 0; i < this.flipObjs.length; i++) {
if (now[i] === next[i]) {
continue
} else if (now[i] < next[i]) {
this.flipObjs[i].flipDown(now[i], next[i])
} else {
this.flipObjs[i].flipUp(now[i], next[i])
}
}
},
// 数字转字符串，补上空缺
numToStr(num) {
let str = num.toString()
let finalStr = ""
for (let i = 1; i <= 4 - str.length; i++) {
finalStr += "0"
}
return finalStr + str
}
},
mounted() {
this.flipObjs = [this.$refs.Thousand, this.$refs.Hundred, this.$refs.Digit, this.$refs.Unit]
console.log("===============", this.nowNum, this.nowNumStr)
// this.init();
// let nextNum = 23500;
// this.changeNum(nextNum);
}
}
</script>
<style scoped>
.FlipClock {
text-align: center;
}
/* .FlipClock .M-Flipper {
margin: 0 3px;
} */
</style>
- 业务使用
<template>
<div class="about">
<h1>翻牌演示</h1>
<Flow ref="freeNum" @parkFlipFinish="parkFlipFinish" :nowNum="FreeNum"></Flow>
<br />
<button @click="flopUp">向上翻</button>
<button @click="flopDown">向下翻</button>
</div>
</template>
<script>
import Flow from "@/components/Flow.vue"
export default {
name: "HomeView",
components: {
Flow
},
data() {
return {
FreeNum: 99
}
},
mounted() {
this.$refs.freeNum.init(this.FreeNum)
},
methods: {
parkFlipFinish() {
console.log(2121)
},
flopUp() {
this.FreeNum = this.FreeNum + 10
this.$refs.freeNum.changeNum(this.FreeNum)
},
flopDown() {
this.FreeNum = this.FreeNum - 10
this.$refs.freeNum.changeNum(this.FreeNum)
}
}
}
</script>
