技术分享
简单的网页数字变更动画实现
00 分钟
2019-12-13
2024-5-19
type
status
date
slug
summary
tags
category
icon
password

分析拆解

数字变更的整个周期,主要分为三个状态。
  1. 数字的初始状态(即原始值
  1. 数字变化中的状态(原始值到新赋值之间的变动
  1. 数字的结束状态(即新赋值
状态的变化可能性
  1. 数字一次性由少变到多,或者由多变到少
  1. 数字变化状态中,多次改变结束状态的值
这里解释下两种变化可能性,第一种就是说,数字的变化从少到多或者从多到少,都是一次性变化,中间不会有任何干扰。而第二种,打个比方,初始值为1,新赋值为10,数字在从1到10的渐变中,还没有变化完全,仅仅变到了7的时候,就被用户再一次改变了新赋值为5或者20(即可能比第一个新赋值低,也可能高)。这个时候,应该顺应此时已经变化到的数值7,以7为起点,向着5或者20去渐增或者渐减。不然,重新以1为起点开始向5或者20进行变化,就会有违和感。而顺应已经变化到的值进行变化,即便中途进行了再多次数值变更,整体的变化仍是流畅自然的。

代码实现

注意事项

  1. 进行变化的数值变量,本身不能是一个单纯的基本变量,而应该存储在一个对象中。
  1. 此方法需要一个map来进行临时的计时器数据变量保存
 

评论
Loading...