实现上下动画的方法
在开发中实现上下动画十分常见，需要控制元素的height值通过不断修改该值，才能实现动画效果，这里需要用到定时器。定时器分为两种，一种是重复不断的定时器setInterval(fn,time)，另一种是延时只在设定时间后只出现一次的定时器setTimeout(fn,time)。在经历所有的传进的每一个值，都要用到一个boolean来控制是否完成解析，解析成功则返回true，结束定时器，返回false,直到返回true位置。
实现上下动画代码
如下是实现上下动画的完美运动js插件代码，该插件能根据传进来的值进行匹配，不仅有理想运动效果，且运行逻辑也非常合理。
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
function startMove(obj, json, fnEnd) {
if (obj.timer) {
clearInterval(obj.timer);
};
obj.timer = setInterval(function() {
var bStop = true; //假设全部找到
for (var attr in json) {
var icurr = 0;
if (attr == 'opacity') { //匹配key
icurr = Math.round(parseFloat(getStyle(obj, attr)) * 100); //获取元素的属性值
} else {
icurr = parseInt(getStyle(obj, attr));
};
var sPeed = (json[attr] - icurr) / 8;
sPeed = sPeed > 0 ? Math.ceil(sPeed) : Math.floor(sPeed);
if (attr == 'opacity') {
obj.style.filter = "alpha(opacity:" + (icurr + sPeed) + ")";
obj.style.opacity = (icurr + sPeed) / 100;
} else {
obj.style[attr] = icurr + sPeed + 'px';
}
if (icurr != json[attr]) {
bStop = false;
}
}
if (bStop) {
clearInterval(obj.timer);
if (fnEnd) {
fnEnd();
}
}
}, 30);
}用户只需要传入需要动画的元素、目标属性值、以及完成动画后的回调函数，即可以实现理想的动画效果。
原创文章，作者：小编小本本，如若转载，请注明出处：https://www.benjiyun.com/yunzhujiyunwei/vps-yunwei/7372.html
相关推荐
-
HTTPS默认端口是多少？（附：HTTPS使用的默认端口是什么？）
HTTPS是一种常用的网络传输协议，它在传输数据时会默认使用SSL/TLS来保证数据的加密和安全性。那么在使用HTTPS协议时，我们该使用哪个端口呢？下面就为大家介绍一下： HTT…
-
关于搭建日志服务器遇到的二三事
如何搭建日志服务器 谈论到linux系统的日志，那永远绕不开的就是rsyslog和syslog服务。在centos6之后，syslog服务被rsyslog服务替代，一跃成为linu…
-
电子申报(药品生产许可证办理官网？)
如何办理药品生产许可证？ 你好，我是本际云服务器推荐网的小编小本本。药品生产许可证是药品生产企业生产药品必需的法定资格。以下是办理药品生产许可证的步骤： 办理药品生产许可证的具体步…
-
docker构建镜像
您好，这里是本际云服务器推荐网的小编小本本。今天我们将谈论如何通过自动化发布自动化部署来保持线上项目的稳定运行，提高服务可用性，减少开发人员在项目部署时的精力消耗。 一、技术栈 自…
-
什么是外贸跟单(跟单员是做什么的？)
跟单员的工作内容 跟单员是指在企业运作过程中，以客户订单为依据，跟踪产品，跟踪服务运作流向的专职人员。跟单员的主要工作内容包括： 出口订单的跟踪、单证、物流以及跟单工作中涉及的各项…
-
OGG故障处理事记
OGG故障处理事记 我是本际云服务器推荐网的小编小本本，今天给大家分享一下我们遇到的一次OGG故障处理经历。 故障背景 一次出账期间，突然出现OGG异常抽取进程告警，无法自动拉起，…
-
Linux安装MySQL详细教程
Linux是一种常用的操作系统，MySQL是一个常用的关系型数据库管理系统。在Linux系统中，安装MySQL是很常见的一项操作。下面我们就来了解一下Linux安装MySQL的详细…
-
解析uni-app和原生小程序混合开发的具体实现过程
利用uni-app进行微信小程序开发的优缺点 作为本际云服务器推荐网的小编小本本，今天我们来聊一下在微信小程序开发中利用uni-app这个新功能来开发的优缺点。 uni-app官网…
-
Hive架构原理和性能优化
小编介绍 大家好，我是本际云服务器推荐网的小编小本本。今天给大家分享一下Hive架构原理和性能优化方面的知识，希望对大家有所帮助。 Hive介绍 Hive是基于Hadoop的一个数…
-
详细说明python二维动画、二维动画目录的复位难题
Python二维动画目录的复位方法 本文将详细介绍Python二维动画、二维动画目录的复位方法。根据两种形式，我们会为大家提供详细的讲解，相信对大家在学习和工作上具有很强的参考意义…