Skip to content

Digital Growth Animation Implemented with PHP+JS (Non Traditional Linear Growth)

License

add-qwq/php-count-up-animation

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 

Repository files navigation

English:

php-count-up-animation

A project featuring number counting-up animation implemented with PHP-generated random growth sequences and JS, with non-traditional linear growth.

Function Description

  1. Use PHP to dynamically generate random step sequences for number growth
  2. Control animation rhythm through JS, with all numbers configurable to have a unified total duration to ensure synchronized completion
  3. Support custom key parameters, including target numbers, total animation duration, and number of growth split steps

Usage Method

  1. Download the project files and deploy index.php to an environment supporting PHP
  2. Open the file and modify the 3 core parameters at the top:
    • $dayCount: Target number of days of stable operation
    • $attackCount: Target number of intercepted attacks
    • $userCount: Target number of registered users
  3. (Optional) Adjust parameters when calling the generateAnimationNumbers function:
    • Second parameter: Number of split steps (e.g., 50 means splitting the growth process into 50 steps)
    • Third parameter: Total animation duration (unit: ms, e.g., 2000 means the animation lasts 2 seconds)
  4. Visit index.php to see the animation effect of numbers growing from 0 to the target values

Key Configurations

Parameter Name Location Description
Target Numbers PHP code section Need to modify the values of the three variables: $dayCount, $attackCount, $userCount
Animation Steps generateAnimationNumbers function call Control the smoothness of number growth; more steps result in smoother animation
Total Duration generateAnimationNumbers function call Control the overall speed of the animation, in milliseconds (ms)
Delay Start setTimeout in JS code section The animation starts with an initial delay of 150ms; this value can be modified to adjust the start timing

中文:

php-count-up-animation

一个使用PHP生成随机增长序列+JS实现的动效,数字增长动画项目,非传统线性增长

功能说明

  1. 使用PHP动态生成数字增长的随机步骤序列
  2. 通过JS控制动画节奏,所有数字可配置为统一总时长,确保同步结束
  3. 支持自定义关键参数,包括目标数字、动画总时长、增长拆分步数

使用方法

  1. 下载项目文件,将index.php部署到支持PHP的环境中
  2. 打开文件,修改顶部3个核心参数:
    • $dayCount:已稳定运行天数的目标数字
    • $attackCount:已拦截攻击数的目标数字
    • $userCount:已注册用户数的目标数字
  3. (可选)调整generateAnimationNumbers函数调用时的参数:
    • 第二个参数:拆分的步数(如50表示将增长过程拆分为50步)
    • 第三个参数:动画总时长(单位:ms,如2000表示动画持续2秒)
  4. 访问index.php即可看到数字从0增长到目标值的动画效果

关键配置

参数名称 位置 说明
目标数字 PHP代码部分 需修改$dayCount$attackCount$userCount三个变量的值
动画步数 generateAnimationNumbers函数调用 控制数字增长的细腻程度,步数越多动画越平滑
总时长 generateAnimationNumbers函数调用 控制动画整体速度,单位为毫秒(ms)
延迟启动 JS代码部分中的setTimeout 初始延迟150ms启动动画,可修改该数值调整启动时机

About

Digital Growth Animation Implemented with PHP+JS (Non Traditional Linear Growth)

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages