JavaScript缓动动画函数的封装方法
作者:kuke_kuke 发布时间:2023-08-07 10:48:26
标签:js,缓动动画
本文实例为大家分享了JavaScript缓动动画函数的封装代码,供大家参考,具体内容如下
本文将从封装缓动动画的以下几个部分进行封装(1、单个属性,2、多个属性,3、缓动框架之回调函数,4、缓动框架之层级与透明度)
首先:获取元素样式的兼容方式
function getStyle(ele,attr){ //获取任意类型的CSS样式的属性值
if(window.getComputedStyle){
return window.getComputedStyle(ele,null)[attr];
}
return ele.currentStyle[attr];
}
封装单个属性
function animate(ele,attr,target){ //元素(box) 样式(left) 目标值(400)
clearInterval(ele.timer); //使用定时器时,先清除定时器,防止多个定时器并行
ele.timer = setInterval(function(){
//先定义一个当前值
var leader = parseInt(getStyle(ele,attr)) || 0; //当这个样式为空时设置为0,获取来的样式值要取整。
var step = (target - leader)/10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
ele.style[attr] = leader + "px"; //注意设置元素样式,注意加单位
if(Math.abs(target-leader) <= Math.abs(step)){
ele.style[attr] = target + "px";
clearInterval(ele.timer);
}
},25);
}
封装多个属性
function animate(ele,json){ //把样式和目标值放在json中,如:var json = {"left":10,"top":200,"width":300,"height":200}
clearInterval(ele.timer);
ele.timer = setInterval(function(){
//开闭原则,目的保证所有样式都到达目标值
var bool = true;
// 分别单独处理json;
for(k in json){
var attr = k; //这里的k即上文中的样式
var target = json[k]; //这里的json[k]即上文中的目标值,熟练后直接写k,json[k]。
var leader = parseInt(getStyle(ele,attr)) || 0;
var step = (target - leader) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
ele.style[attr] = leader + "px";
//如果使用上文中清除定时器的方式,则完成了一个json内容就清除了定时器,显然不能这么做
// if(Math.abs(target - leader) <= Math.abs(step)){
// ele.style[attr] = target + "px";
// clearInterval(ele.timer);
// }
if(target !== leader){ //依据上文定义的bool,遍历json时当有一个样式未完成,则bool值依旧为false。
bool = false;
}
}
//只有所有属性样式都到了指定位置,bool值才变成true
if(bool){
clearInterval(ele.timer);
}
},25);
}
缓动框架之回调函数
function animate(ele,json,fn){
clearInterval(ele.timer);
ele.timer = setInterval(function(){
var bool = true;
for(k in json){
var leader = parseInt(getStyle(ele,k)) || 0;
var step = (json[k] - leader) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
ele.style[k] = leader + "px";
if(json[k] !== leader){
bool = false;
}
}
if(bool){
clearInterval(ele.timer);
if(fn){ //此处如果有函数,则掉用,如果没有则自动不执行,当然也可加个判断,if(typeof fn == "function"),当fn类型为函数时。
fn();
}
}
},25);
}
//调用
animate(box,json,function(){ //这里的function是一整个函数体,所以上文中的fn要加();
animate(box,json1,function(){ //当执行完第一个缓动动画时,有function则继续执行。
animate(box,json);
});
});
缓动框架之层级与透明度
function animate(ele,json,fn){
clearInterval(ele.timer);
ele.timer = setInterval(function(){
var bool = true;
for(k in json){
var leader;
if(k === "opacity"){ //如果属性为opacity
leader = getStyle(ele,k) * 100 || 1; //不能取整,先把它乘100
}else{
leader = parseInt(getStyle(ele,k)) || 0;
}
var step = (json[k] - leader) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
if(k === "opacity"){
ele.style[k] = leader/100; //如果是opacity,赋值时在除以100
ele.style.filter = "alpha(opacity="+leader+")"; //兼容IE
}else if(k === "zIndex"){
ele.style[k] = leader; //直接赋值就是了,不用加单位
}else{
ele.style[k] = leader + "px";
}
if(json[k] !== leader){
bool = false;
console.log(leader);
}
}
if(bool){
clearInterval(ele.timer);
if(fn){
fn();
}
}
},30);
}
**//注意这里赋值的opacity要乘以100,如:30,100等**
来源:https://blog.csdn.net/qq_33599109/article/details/77257182
0
投稿
猜你喜欢
- 内容摘要:现在InterNet 越来越成为生活中不可或缺的一部分,制作网页的动态语言也越来越多,主要流行的有以下几种,ASP,PH
- 首先建一个access 数据库,库中有一个URLINDEX表,其中URL和Keywords字段分别添加了索引,如下:URL &nb
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 11 - Using Fx.Morph, Fx O
- PDOStatement::rowCountPDOStatement::rowCount — 返回受上一个 SQL 语句影响的行数(PHP
- 在经过前面几个部分的操作之后,我们的网页已经图文并茂,具有相当的效果了,但是这对于网页来说还不够,为了网站中的众多网页能够成为一个有机的整体
- mysql_result定义和用法mysql_result() 函数返回结果集中一个字段的值。mysql_result() 返回 MySQL
- System.Data.OleDb.OleDbDataAdapter与System.Data.OleDb.OleDbDataReader的区
- 概述:本控件使用 html+css+javascript模拟HTML内置的select元素,实现其部分方法与属性,也增加了一部分功能,并且从
- 本文实例为大家分享了PyQt5实现暗黑风格的计时器的具体代码,供大家参考,具体内容如下主要是学习多线程知识,使用的是QTime(),但是似乎
- 目前,我们要在网页中使用圆角效果,总是通过切图然后嵌套很多div,用背景来实现圆角效果。对于前端开发工程师来说,圆角的确是一个让人又爱又恨的
- 采集中 或者 在线添加文章中 都可以用到此功能俺自己在baidu上搜索的保存远程图片到本地的代码 感觉比较难用点 而且没有现成的比较全的代码
- 目标是想把在服务器上用pytorch训练好的模型转换为可以在移动端运行的tflite模型。最直接的思路是想把pytorch模型转换为tens
- 文通过一个操作实例来说明SQL中主标识列IDENTITY的使用技巧。要求:在 sql server 2005中,建立数据表book,在表bo
- 使用本文给出的方法就可以制作出一个简单的rss阅读器了。用xmldom方法打开xml文件,如果是本地的没有问题,就是用Server.MapP
- 经过一轮的项目封闭开发,页面制作的动手能力提高了不少,用AW的话说就是被复杂的东西虐过以后很多问题都变得容易了,的确很有道理。我个人觉得技术
- 本人非计算机,亦非心理学,或者交互设计,更非设计专业出身,因此什么都是半桶水。即使如此,依然靠着兴趣寻找乐趣。对于设计,爱之,但没有受过系统
- 这几天无聊的很看着china.nba.com焦点图效果捣鼓了一下有待完善!兼容性:IE6 , IE7 &nb
- 如何检测某个对象是否有某个属性?第一想到的——没错,in:"prop" in obj这很完美,不过,还有不少人热衷下面的
- 在很多企业会使用闲置的 Windows 机器作为临时服务器,有时候我们想远程调用里面的程序或查看日志文件Windows 内置的服务
- 我以centos 4.4 下面的mysql 5.0.33 手工编译版本为例说明:vi /usr/local/mysql/bin/m