データ値をロードして移動しましょう!
説明する：
デジタルビートコンポーネント！
CountUp コンポーネントは、一定期間内に数値が特定の値まで徐々に増加するアニメーション効果を表示するために使用されます。 Web ページまたはアプリケーションで使用して、動的なデータ変更エクスペリエンスをユーザーに提供できます。
1. コンポーネントをインポートする
npm install react-countup 2. コンポーネント構成の概要
| パラメータ |
説明する |
タイプ |
デフォルト値 |
述べる |
| クラス名 |
コンポーネントクラス名 |
弦 |
-- |
-- |
| 10進数 |
小数点区切り文字 |
弦 |
ピリオド（半角） |
-- |
| 小数 |
小数精度 |
番号 |
0 |
丸める |
| 遅れ |
アニメーションが読み込まれるまでの遅延 |
番号 |
5 |
単位は秒\Sです。カプセル化してバッチで使用する場合は、キー値の追加に注意してください。追加しないと、遅延効果が互いに上書きされます。 |
| 間隔 |
アニメーションの長さ |
番号 |
2 |
単位は秒\S |
| 終わり |
アニメーション読み込み終了値 |
番号 |
-- |
end は拍動値です。最終的なアニメーションのフリーズ フレームの値を表します |
| 接頭語 |
数字の接頭辞 |
弦 |
-- |
-- |
| 再描画 |
更新時にアニメーションを再描画するかどうか |
ブール値 |
間違い |
-- |
| 値を保存 |
デジタルアニメーション終了後、必要に応じて最終値を保持して更新を継続するかどうかを更新します |
ブール値 |
間違い |
-- |
| セパレータ |
千の区切り文字 |
弦 |
カンマ(半角) |
-- |
| 始める |
アニメーション読み込み初期値 |
番号 |
0 |
-- |
| サフィックス |
数字の接尾辞 |
弦 |
-- |
-- |
| 使用イージング |
イージング効果を有効にするかどうか |
ブール値 |
真実 |
-- |
| useGrouping |
グループ区切り文字を有効にするかどうか |
ブール値 |
真実 |
-- |
| useIndianSeparators |
インドの数字区切り文字を有効にするかどうか |
ブール値 |
真実 |
-- |
| イージングFn |
カスタムイージング関数を指定する |
関数 |
イーズインエキスポ |
-- |
| フォーマットFn |
カスタム数値形式 |
関数 |
-- |
(値)=>無効 |
| スクロールスパイを有効にする |
コンポーネントが視野に表示されたときにアニメーションの読み込みを開始するかどうか |
ブール値 |
間違い |
これは、ページが非常に大きい場合に使用されます。上下にスクロールするときに、ページ ビュー内のコンポーネントの表示状態と非表示状態が使用されます。状態が変化したときにジャンプ アニメーションを読み込むかどうか。 |
| スクロールスパイディレイ |
ビューに表示されてからアニメーションの読み込みが遅れる |
番号 |
0 |
-- |
| スクロールスパイワンス |
1 回だけロードするかどうか |
ブール値 |
-- |
-- |
| オンエンド |
アニメーション読み込み終了コールバックメソッド |
関数 |
-- |
|
| onStart |
アニメーション開始コールバックメソッド |
関数 |
-- |
|
| onPauseResume |
一時的または回復コールバック |
関数 |
-- |
|
| オンリセット |
リセット時のコールバック |
関数 |
-- |
|
| onUpdate |
データ更新時のコールバック |
関数 |
-- |
|
| コンポーネントのインスタンスメソッド |
||||
| リセット |
初期値をリセットする |
関数 |
-- |
|
| 始める |
アニメーションの読み込みを開始します |
関数 |
-- |
|
| アップデート |
最新の値に更新する |
関数 |
-- |
|
| 休憩再開 |
アニメーションを停止します |
関数 |
-- |
|
| countUpRef |
フック関数はCountupのプロパティを取得します。 |
関数 |
-- |
|
3. コンポーネントの簡単な使用、実際の効果
完全なコード:
import CountUp from 'react-countup';
const China = () => {
return (
<>
<div style={
{ fontSize: '32px' }}>
// 组件使用
<CountUp
key={1000}
// 动画结束值
end={9597000}
// 保留一位小数
decimals={1}
// 动画持续时间
duration={3}
// 动画延迟时间
delay={1}
// 千位分隔符
separator=','
// 数据初始值
start={0}
// 数据前缀
prefix='中华人民共和国国土面积：'
// 数据后缀
suffix='平方公里'
// 动画结束回调
onEnd={() => {
console.log('动画结束');
}}
// 动画开始回调
onStart={() => {
console.log('动画开始');
}}
/>
</div>
</>
);
};
export default China;4. countUpRef 関数を高度に使用して CountUp インスタンス メソッドを構成する
このコンポーネントは現在 ref をサポートしていないようなので、このコンポーネントのインスタンス メソッドを使用するには countUpRef を使用する必要があります。このインスタンスの使用方法の簡単な例を次に示します。
import { useRef } from 'react';
import CountUp, { useCountUp } from 'react-countup';
const CountUpRef = () => {
// 定义实例
const countUpRefs: any = useRef();
// 定义 重置动画方法和重置初始值方法
const { start, reset } = useCountUp({
// 结束值
end: 20,
// 前缀
prefix: '今日温度：',
// 后缀
suffix: '°C',
// 动画持续时间
duration: 3,
// 绑定标签
ref: countUpRefs,
onEnd: ({ pauseResume, reset, start, update }) => {
console.log('加载结束');
}
});
return (
<>
// 绑定 CountUp 给div
<div style={
{ fontSize: '32px' }} ref={countUpRefs}></div>
// 配置方法
<div>
<button onClick={() => { start();}}>
重置动画
</button>
<button style={
{margin:'0 10px'}} onClick={() => {reset();}} >
重置为 0
</button>
</div>
</>
);
};
export default CountUpRef;レンダリング：