滚动效果
anime在html中的实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单DEMO</title>
<style>
.demo{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="demo">DEMO</div>
<script type="text/javascript" src="https://cdn.bootcss.com/animejs/2.2.0/anime.min.js" ></script>
<script>
const animationDemo = anime({
targets: '.demo',
innerHTML: [0, 1000000],
easing: 'easeInOutExpo',
round: 100
})
</script>
</body>
</html>
anime在react中的实现
首先 npm i animejs
动态数字组件简单实现
/**
* @description 动态数字
*/
import React, { useEffect, forwardRef, useRef,useState} from 'react';
import anime from 'animejs';
const Number = (props:any, ref: any) => {
const dynamic = useRef(null);
useEffect(() => {
anime({
targets: dynamic.current,
innerHTML: [0, props.number],
easing: 'easeInOutExpo',
round: 1
});
}, [props.number]);
return (
<span ref={dynamic}>
</span>
);
};
export default forwardRef(Number);
页面中调用组件
<Number number={23222222222} />
效果
有的需求需要实现类似这样 222,122,122 的效果，我们加个方法就行
//转化价格千分位分隔
export const toThousands = (num) => {
if (num == 0) return 0;
if (!num) return;
let dot = '';
let numb = '';
num = num.toString();
if ((num || 0).toString().indexOf('.') > -1) {
dot = num.substring(num.indexOf('.'));//.6689
numb = num.substring(0, num.indexOf('.'));//123456723456
} else {
numb = num;
}
let result = [], counter = 0;
numb = numb.split('');
for (let i = numb.length - 1; i >= 0; i--) {
counter++;
result.unshift(numb[i]);
if ((counter % 3 == 0) && i != 0) { result.unshift(','); }
}
return result.join('') + dot;
};
将方法引入组件
/**
* @description 动态数字
*/
import React, { useEffect, forwardRef, useRef,useState} from 'react';
import anime from 'animejs';
import { toThousands } from '@/utils';
const Number = (props:any, ref: any) => {
const dynamic = useRef(null);
useEffect(() => {
anime({
targets: dynamic.current,
innerHTML: [0, toThousands(props.number)],
easing: 'easeInOutExpo',
round: 1
});
}, [props.number]);
return (
<span ref={dynamic}>
</span>
);
};
export default forwardRef(Number);
效果
如果还不错，给个赞支持一下呗
