Skip to content

Z
zh_zcb-ems
Commit b2f5ec62 authored by wu.hui's avatar wu.hui
Browse files
Options

feat: 动画

parent c4e582ea
Hide whitespace changes
Inline Side-by-side
Showing with 149 additions and 135 deletions
src/css/stat-bar.css
View file @ b2f5ec62
...@@ -67,8 +67,8 @@ ...@@ -67,8 +67,8 @@
font-family: 'Source Han Sans CN'; font-family: 'Source Han Sans CN';
} }
.stat-bar .animate { .stat-bar .animate {
-webkit-animation: move calc(var(--speed) * 1s) linear infinite, bounce-in-down 1s calc(var(--delay) * 1s) forwards; -webkit-animation: move calc(var(--duration) * 1s) calc(var(--delay) * 1s) linear, bounce-in-down 1s calc((var(--duration) + var(--delay)) * 1s) forwards;
animation: move calc(var(--speed) * 1s) linear infinite, bounce-in-down 1s calc(var(--delay) * 1s) forwards; animation: move calc(var(--duration) * 1s) calc(var(--delay) * 1s) linear, bounce-in-down 1s calc((var(--duration) + var(--delay)) * 1s) forwards;
} }
.stat-bar .init { .stat-bar .init {
-webkit-transform: translateY(calc(var(--i) * -9.09%)); -webkit-transform: translateY(calc(var(--i) * -9.09%));
...@@ -77,129 +77,85 @@ ...@@ -77,129 +77,85 @@
} }
@-webkit-keyframes move { @-webkit-keyframes move {
from { from {
-webkit-transform: translateY(-90%); -webkit-transform: translateY(calc(var(--i) * -9.09%));
transform: translateY(-90%); transform: translateY(calc(var(--i) * -9.09%));
-webkit-filter: url(#blur); -webkit-filter: url(#blur);
filter: url(#blur); filter: url(#blur);
} }
to { to {
-webkit-transform: translateY(1%); -webkit-transform: translateY(calc(var(--j) * -9.09%));
transform: translateY(1%); transform: translateY(calc(var(--j) * -9.09%));
-webkit-filter: url(#blur); -webkit-filter: url(#blur);
filter: url(#blur); filter: url(#blur);
} }
} }
@keyframes move { @keyframes move {
from { from {
-webkit-transform: translateY(-90%); -webkit-transform: translateY(calc(var(--i) * -9.09%));
transform: translateY(-90%); transform: translateY(calc(var(--i) * -9.09%));
-webkit-filter: url(#blur); -webkit-filter: url(#blur);
filter: url(#blur); filter: url(#blur);
} }
to { to {
-webkit-transform: translateY(1%); -webkit-transform: translateY(calc(var(--j) * -9.09%));
transform: translateY(1%); transform: translateY(calc(var(--j) * -9.09%));
-webkit-filter: url(#blur); -webkit-filter: url(#blur);
filter: url(#blur); filter: url(#blur);
} }
} }
@-webkit-keyframes bounce-in-down { @-webkit-keyframes bounce-in-down {
from { from {
-webkit-transform: translateY(calc(var(--i) * -9.09% - 7%)); -webkit-transform: translateY(calc(var(--j) * -9.09% - 1%));
transform: translateY(calc(var(--i) * -9.09% - 7%)); transform: translateY(calc(var(--j) * -9.09% - 1%));
-webkit-filter: none; -webkit-filter: none;
filter: none; filter: none;
} }
25% { 25% {
-webkit-transform: translateY(calc(var(--i) * -9.09% + 3%)); -webkit-transform: translateY(calc(var(--j) * -9.09% + 0.8%));
transform: translateY(calc(var(--i) * -9.09% + 3%)); transform: translateY(calc(var(--j) * -9.09% + 0.8%));
} }
50% { 50% {
-webkit-transform: translateY(calc(var(--i) * -9.09% - 1%)); -webkit-transform: translateY(calc(var(--j) * -9.09% - 1%));
transform: translateY(calc(var(--i) * -9.09% - 1%)); transform: translateY(calc(var(--j) * -9.09% - 1%));
} }
70% { 70% {
-webkit-transform: translateY(calc(var(--i) * -9.09% + 0.6%)); -webkit-transform: translateY(calc(var(--j) * -9.09% + 0.6%));
transform: translateY(calc(var(--i) * -9.09% + 0.6%)); transform: translateY(calc(var(--j) * -9.09% + 0.6%));
} }
85% { 85% {
-webkit-transform: translateY(calc(var(--i) * -9.09% - 0.3%)); -webkit-transform: translateY(calc(var(--j) * -9.09% - 0.3%));
transform: translateY(calc(var(--i) * -9.09% - 0.3%)); transform: translateY(calc(var(--j) * -9.09% - 0.3%));
} }
to { to {
-webkit-transform: translateY(calc(var(--i) * -9.09%)); -webkit-transform: translateY(calc(var(--j) * -9.09%));
transform: translateY(calc(var(--i) * -9.09%)); transform: translateY(calc(var(--j) * -9.09%));
} }
} }
@keyframes bounce-in-down { @keyframes bounce-in-down {
from { from {
-webkit-transform: translateY(calc(var(--i) * -9.09% - 7%)); -webkit-transform: translateY(calc(var(--j) * -9.09% - 1%));
transform: translateY(calc(var(--i) * -9.09% - 7%)); transform: translateY(calc(var(--j) * -9.09% - 1%));
-webkit-filter: none; -webkit-filter: none;
filter: none; filter: none;
} }
25% { 25% {
-webkit-transform: translateY(calc(var(--i) * -9.09% + 3%)); -webkit-transform: translateY(calc(var(--j) * -9.09% + 0.8%));
transform: translateY(calc(var(--i) * -9.09% + 3%)); transform: translateY(calc(var(--j) * -9.09% + 0.8%));
}
50% {
-webkit-transform: translateY(calc(var(--i) * -9.09% - 1%));
transform: translateY(calc(var(--i) * -9.09% - 1%));
}
70% {
-webkit-transform: translateY(calc(var(--i) * -9.09% + 0.6%));
transform: translateY(calc(var(--i) * -9.09% + 0.6%));
}
85% {
-webkit-transform: translateY(calc(var(--i) * -9.09% - 0.3%));
transform: translateY(calc(var(--i) * -9.09% - 0.3%));
}
to {
-webkit-transform: translateY(calc(var(--i) * -9.09%));
transform: translateY(calc(var(--i) * -9.09%));
}
}
@-webkit-keyframes enhance-bounce-in-down {
25% {
-webkit-transform: translateY(8%);
transform: translateY(8%);
}
50% {
-webkit-transform: translateY(-4%);
transform: translateY(-4%);
}
70% {
-webkit-transform: translateY(2%);
transform: translateY(2%);
}
85% {
-webkit-transform: translateY(-1%);
transform: translateY(-1%);
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes enhance-bounce-in-down {
25% {
-webkit-transform: translateY(8%);
transform: translateY(8%);
} }
50% { 50% {
-webkit-transform: translateY(-4%); -webkit-transform: translateY(calc(var(--j) * -9.09% - 1%));
transform: translateY(-4%); transform: translateY(calc(var(--j) * -9.09% - 1%));
} }
70% { 70% {
-webkit-transform: translateY(2%); -webkit-transform: translateY(calc(var(--j) * -9.09% + 0.6%));
transform: translateY(2%); transform: translateY(calc(var(--j) * -9.09% + 0.6%));
} }
85% { 85% {
-webkit-transform: translateY(-1%); -webkit-transform: translateY(calc(var(--j) * -9.09% - 0.3%));
transform: translateY(-1%); transform: translateY(calc(var(--j) * -9.09% - 0.3%));
} }
to { to {
-webkit-transform: translateY(0); -webkit-transform: translateY(calc(var(--j) * -9.09%));
transform: translateY(0); transform: translateY(calc(var(--j) * -9.09%));
} }
} }
src/js/index.js
View file @ b2f5ec62
...@@ -218,19 +218,24 @@ const lineChartOption = (xData, yData, interval) => { ...@@ -218,19 +218,24 @@ const lineChartOption = (xData, yData, interval) => {
} }
} }
// 创建一组数字 // 创建多组数字
function createMultiSrollNum(box, numArr, width, height, delays, speeds) { function createMultiSrollNum(numArr, width, height) {
box.style.setProperty('--width', width + 'px') const scrollBox = document.getElementsByClassName('scroll-box')
box.style.setProperty('--height', height + 'px') for (let i = 0; i < scrollBox.length; i++) {
const docFrag = document.createDocumentFragment() const scrollNode = scrollBox[i]
numArr.forEach((num, i) => { const childNumArr = numArr[i].split('')
docFrag.appendChild(createSrollNum(num, delays[i], speeds[i])) scrollNode.style.setProperty('--width', width + 'px')
}) scrollNode.style.setProperty('--height', height + 'px')
box.appendChild(docFrag) const docFrag = document.createDocumentFragment()
childNumArr.forEach((num, i) => {
docFrag.appendChild(createSrollNum(num))
})
scrollNode.appendChild(docFrag)
}
} }
// 创建单个数字 // 创建单个数字
function createSrollNum(num, delay, speed) { function createSrollNum(num) {
const scrollNumNode = document.createElement('div') const scrollNumNode = document.createElement('div')
scrollNumNode.className = 'scroll-num' scrollNumNode.className = 'scroll-num'
scrollNumNode.innerHTML = `<ul class="scroll-ul"> scrollNumNode.innerHTML = `<ul class="scroll-ul">
...@@ -247,32 +252,76 @@ function createSrollNum(num, delay, speed) { ...@@ -247,32 +252,76 @@ function createSrollNum(num, delay, speed) {
<li>0</li> <li>0</li>
</ul>` </ul>`
scrollNumNode.style.setProperty('--i', num)
scrollNumNode.style.setProperty('--delay', delay)
scrollNumNode.style.setProperty('--speed', speed)
const ulNode = scrollNumNode.childNodes[0] const ulNode = scrollNumNode.childNodes[0]
ulNode.classList.add('init') ulNode.setAttribute(
'style',
'transform: translateY(' + num * -9.09 + '%)'
)
return scrollNumNode return scrollNumNode
} }
function addDigitAnimate(delays, numArr) { // 创建多组数字动画
const scrollUl = document.getElementsByClassName('scroll-ul') function addMultiDigitAnimate(beforeNumArr, afterNumArr, delays, numArr) {
for (let i = 0; i < scrollUl.length; i++) { const scrollBox = document.getElementsByClassName('scroll-box')
const ulNode = scrollUl[i] for (let i = 0; i < scrollBox.length; i++) {
ulNode.classList.add('animate') const scrollBoxNode = scrollBox[i]
const scrollNum = scrollBoxNode.childNodes
addDigitAnimate(scrollNum, beforeNumArr[i], afterNumArr[i])
}
}
// 创建单个数字动画
function addDigitAnimate(scrollNum, beforeNumArr, afterNumArr) {
let delay = 0
for (let i = scrollNum.length - 1; i >= 0; i--) {
const scrollNumNode = scrollNum[i]
scrollNumNode.style.setProperty('--i', beforeNumArr[i])
scrollNumNode.style.setProperty('--j', afterNumArr[i])
const d = Math.abs(beforeNumArr[i] - afterNumArr[i]) * 0.3
scrollNumNode.style.setProperty('--duration', d)
scrollNumNode.style.setProperty('--delay', delay)
delay += d * 0.9
const ulNode = scrollNumNode.childNodes[0]
ulNode.classList.remove('animate')
ulNode.setAttribute(
'style',
'transform: translateY(' + beforeNumArr[i] * -9.09 + '%)'
)
setTimeout(() => {
ulNode.classList.add('animate')
}, 0)
if (isSafari || isWeChat) { if (isSafari || isWeChat) {
let timer = setTimeout(() => { let timer = setTimeout(() => {
ulNode.setAttribute( ulNode.setAttribute(
'style', 'style',
'animation: none;transform: translateY(' + numArr[i] * -9.09 + '%)' 'animation: none;transform: translateY(' +
afterNumArr[i] * -9.09 +
'%)'
) )
timer = null timer = null
}, delays[i] * 1000) }, delay * 1000)
} }
} }
} }
function createRandom() {
const arr = []
for (let i = 0; i < 4; i++) {
let str = ''
for (let j = 0; j < 5; j++) {
const num = Math.floor(Math.random() * 10) + ''
str += num
}
arr.push(str)
}
return arr
}
window.onload = () => { window.onload = () => {
// echart渲染 // echart渲染
const lineChart1 = echarts.init(document.getElementById('line_chart_1')) const lineChart1 = echarts.init(document.getElementById('line_chart_1'))
...@@ -392,12 +441,21 @@ window.onload = () => { ...@@ -392,12 +441,21 @@ window.onload = () => {
// 数据统计数字滚动 // 数据统计数字滚动
const width = 39 const width = 39
const height = 50 const height = 50
const delays = [3, 4, 5, 6, 7] // 滚动多少秒停止，设置一样就一起停
const speeds = [2, 2.5, 3, 3.5, 4] // 滚动速率，每个数字滚动快慢不一样 let beforeNumArr = ['00000', '00000', '00000', '00000']
const scrollBox = document.getElementsByClassName('scroll-box') let afterNumArr = ['35345', '83460', '36765', '36465']
;['35345', '83460', '36765', '36465'].forEach((numStr, i) => {
const numArr = numStr.split('') // 初始化
createMultiSrollNum(scrollBox[i], numArr, width, height, delays, speeds) createMultiSrollNum(beforeNumArr, width, height)
addDigitAnimate(delays, numArr)
}) // 开始动画
addMultiDigitAnimate(beforeNumArr, afterNumArr)
// 测试，点击第一列数字
document.getElementsByClassName('scroll-box')[0].onclick = function () {
const numArr = createRandom()
beforeNumArr = afterNumArr
afterNumArr = numArr
addMultiDigitAnimate(beforeNumArr, afterNumArr)
}
} }
src/less/stat-bar.less
View file @ b2f5ec62
...@@ -61,8 +61,8 @@ ...@@ -61,8 +61,8 @@
// } // }
.animate { .animate {
animation: move calc(var(--speed) * 1s) linear infinite, animation: move calc(var(--duration) * 1s) calc(var(--delay) * 1s) linear,
bounce-in-down 1s calc(var(--delay) * 1s) forwards; bounce-in-down 1s calc((var(--duration) + var(--delay)) * 1s) forwards;
} }
.init { .init {
transform: translateY(calc(var(--i) * -9.09%)); transform: translateY(calc(var(--i) * -9.09%));
...@@ -71,57 +71,57 @@ ...@@ -71,57 +71,57 @@
@keyframes move { @keyframes move {
from { from {
transform: translateY(-90%); transform: translateY(calc(var(--i) * -9.09%));
filter: url(#blur); filter: url(#blur);
} }
to { to {
transform: translateY(1%); transform: translateY(calc(var(--j) * -9.09%));
filter: url(#blur); filter: url(#blur);
} }
} }
@keyframes bounce-in-down { @keyframes bounce-in-down {
from { from {
transform: translateY(calc(var(--i) * -9.09% - 7%)); transform: translateY(calc(var(--j) * -9.09% - 1.0%));
filter: none; filter: none;
} }
25% { 25% {
transform: translateY(calc(var(--i) * -9.09% + 3%)); transform: translateY(calc(var(--j) * -9.09% + 0.8%));
} }
50% { 50% {
transform: translateY(calc(var(--i) * -9.09% - 1%)); transform: translateY(calc(var(--j) * -9.09% - 1%));
} }
70% { 70% {
transform: translateY(calc(var(--i) * -9.09% + 0.6%)); transform: translateY(calc(var(--j) * -9.09% + 0.6%));
} }
85% { 85% {
transform: translateY(calc(var(--i) * -9.09% - 0.3%)); transform: translateY(calc(var(--j) * -9.09% - 0.3%));
} }
to { to {
transform: translateY(calc(var(--i) * -9.09%)); transform: translateY(calc(var(--j) * -9.09%));
} }
} }
@keyframes enhance-bounce-in-down { // @keyframes enhance-bounce-in-down {
25% { // 25% {
transform: translateY(8%); // transform: translateY(8%);
} // }
50% { // 50% {
transform: translateY(-4%); // transform: translateY(-4%);
} // }
70% { // 70% {
transform: translateY(2%); // transform: translateY(2%);
} // }
85% { // 85% {
transform: translateY(-1%); // transform: translateY(-1%);
} // }
to { // to {
transform: translateY(0); // transform: translateY(0);
} // }
} // }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment