动画函数封装
时间:2022-07-26
本文章向大家介绍动画函数封装,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1. 动画实现原理
核心原理:通过定时器 setInterval() 不断移动盒子位置。
实现步骤:
- 获得盒子当前位置
- 让盒子在当前位置加上1个移动距离
- 利用定时器不断重复这个操作
- 加一个结束定时器的条件
- 注意此元素需要添加定位,才能使用element.style.left
<body>
<div></div>
<script>
//动画原理
// 1.获得盒子当前位置
// 2.让盒子在当前位置加上1个移动距离
// 3.利用定时器不断重复这个操作
// 4.加一个结束定时器的条件
// 5.注意此元素需要添加定位, 才能使用element.style.left
var div = document.querySelector('div' );
var timer = setInterval(function() {
if (div.offsetLeft >= 400) {
//停止动画本质是停止定时器
clearInterval(timer);
};
div.style.left = div.offsetLeft + 1 + 'px' ;
}, 30);
</script>
</body>
2.简单动画函数封装原理
<script>
//简单动画函数封装obj目标对象target 目标位置
function animate(obj, target) {
var timer = setInterval (function() {
if (obj.offsetLeft >= target) {
//停止动画本质是停止定时器
clearInterval(timer);
}
obj.style.left = obj.offsetLeft + 1 + 'px';
}, 30);
}
var div = document . querySelector('div' );
var span = document . querySelector( ' span );
//调用函数
animate(div, 300) ;
animate(span, 200);
</script>
3. 动画函数给不同元素记录不同定时器
如果多个元素都使用这个动画函数,每次都要var 声明定时器。我们可以给不同的元素使用不同的定时器(自己专门用自己的定时器)。
核心原理:利用 JS 是一门动态语言,可以很方便的给当前对象添加属性。
<script>
// var obj = {};
// obj.name = ' andy' ;
//简单动画函 数封装obj目标对象target目标位置
//给不同的元素指定了不同的定时器
function animate(obj, target) {
// 当我们不断的点击按钮,这个元素的速度会越来越快,因为开启了太多的定时器
// 解决方案就是 让我们元素只有一个定时器执行
// 先清除以前的定时器,只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
if (obj.offsetLeft >= target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + 1 + 'px';
}, 30);
}
var div = document . querySelector('div' );
var span = document . querySelector( 'span' );
var btn = document . querySelector( 'button' );
//调用函数
animate(div, 300) ;
btn.addEventListener( 'click', function() {
animate(span, 200);
})
</script>
- 深入理解 Java 并发之 synchronized 实现原理
- 你真的很熟分布式和事务吗?
- 基于Nginx负载均衡方案
- Android 使用android-support-multidex解决Dex超出方法数的限制问题
- Netty 实现原理浅析
- 上海2017QCon个人分享总结
- 为最佳性能调优 Nginx
- 《微信小程序七日谈》- 第一天:人生若只如初见
- 类加载器详解
- 《微信小程序七日谈》- 第二天:你可能要抛弃原来的响应式开发思维
- 《微信小程序七日谈》- 第三天:玩转Page组件的生命周期
- 《微信小程序七日谈》- 第四天:页面路径最多五层?导航可以这么玩
- 《微信小程序七日谈》- 第五天:你可能要在登录功能上花费大力气
- 《微信小程序七日谈》- 第六天:小程序devtool隐藏的秘密
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 3分钟短文 | Laravel 注册全局助手函数的2种方式
- 通过案例学Python之定义函数类
- 3分钟短文 | Laravel blade模板里优雅地定义PHP变量
- MySQL 日期时间类型怎么选?千万不要乱用!
- InnoDB存储引擎简介
- git改错分支的补救方法:git stash暂存
- 快速学习-Skywalking原理
- 快速学习-Skywalking常用插件
- 快速学习-Skywalking-MySql调用监控
- 我为何弃用Jetpack的App Startup?
- 快速学习-Skywalking的RPC调用-Dubbo的最佳实践
- Spring Cloud Gateway开发的几个要点
- 快速学习-Skywalking告警功能
- 使用Node.js实现一个express框架
- 快速学习-skywalking入门