标签名，只支持选择一个节点，类类名以及标签名只能选择页面中第一个
// attr：属性属性名
//值：目标值目标值
//时间：持续时间持续时间
//补间：定时function函数方程
// flag：Boolean判断是按值移动还是按位置移动，默认按位置移动
// fn：callback回调函数
//增加返回值：将内部参数对象返回，可以通过设置返回对象的属性stop为true打断动画
函数 requestAnimation（obj） {
// -------------------------------------参数设置---------------------------------------------
//默认属性
const参数= {
ele：null，
attr：null，
value：null，
time：1000，
tween：“linear”，
flag：true，
stop：false，
fn：“”
}
//合并传入属性
Object .assign（parameter，obj）; //覆盖重名属性
// -------------------------------------动画设置--------- ------------------------------------
//创建运动方程初始参数，方便复用
let start = 0 ; //用于保存初始时间戳
let target =（typeof parameter.ele === “string”？document .querySelector（parameter.ele）：parameter.ele），//目标节点
attr = parameter.attr，//目标属性
beginAttr = parseFloat（getComputedStyle（target）[attr]），// attr起始值
value = parameter.value，//运动目标值
count = value - beginAttr，//实际运动值
time = parameter.time，//运动持续时间，
tween = parameter.tween，//运动函数
flag = parameter.flag，
callback = parameter.fn，//回调函数
curVal = 0 ; //运动当前值
//判断传入函数是否为数组，多段运动
（function（） {
if（attr instanceof Array）{
beginAttr = [];
count = [];
对于（让我的 ATTR）{
常量 VAL = parseFloat（的getComputedStyle（目标）[I]）;
beginAttr.push（VAL）;
count.push（value - val）;
}
}
if（value instanceof Array）{
for（let i in value）{
count [i] = value [i] - beginAttr [i];
}
}
}）（）;
//运动函数
功能 动画（时间戳） {
如果（parameter.stop）返回 ; //打断
//存储初始时间戳
if（！start）start = timestamp;
//已运动时间
让 t =时间戳 - 开始;
//判断多段运动
if（beginAttr instanceof Array）{
// const len = beginAttr.length //存数组长度，复用
//多段运动第1类 - 多属性，同目标，同时间/不同时间
if（typeof count === “number”）{ //同目标
//同时间
if（typeof time === “number”）{
if（t> time）t = time; //判断是否超出目标值
//循环attr，分别赋值
为（let i in beginAttr）{
if（flag）curVal = Tween [tween]（t，beginAttr [i]，count，time）; //调用Tween，返回当前属性值，此时计算方法为移动到
写入位置else curVal = Tween [tween]（t，beginAttr [i]，count + beginAttr [i]，time）; //调用Tween，返回当前属性值，此时计算方法为移动了
写入距离if（attr [i] === “opacity”）target.style [attr [i]] = curVal; //给属性赋值
else target.style [attr [i]] = curVal + “px” ; //给属性赋值
if（t <time）requestAnimationFrame（animate）; //判断是否运动完
其他回调&& callback（）; //调用回调函数
}
回归 ;
}
//不同时间
if（time instanceof Array）{
//循环时间，attr，分别赋值
为（让我在 beginAttr中）{
//错误判断
if（！time [i] && time [i]！== 0）{
throw new Error（
“输入时间的长度不等于属性的长度”）;
}
//判断是否已经完成动画，完成则跳过此次循环
if（parseFloat（getComputedStyle（target）[attr [i]]）===（typeof value === “number”？value：value [i]） ）
继续 ;
// t =时间戳 - 开始; //每次循环初始化t
if（t> time [i]）t = time [i]; //判断是否超出目标值
if（flag
关键词：JS+CSS完成流星雨的动画效果（代码）