动画函数封装
时间: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>
- 1分钟生成Net对象的注释
- Android Studio之gradle的配置与介绍
- MLlib中的随机森林和提升方法
- android JNI调用机制
- Android开发小窍门通过泛型简化findViewById类型转换
- lodash源码分析之缓存使用方式的进一步封装
- Android LruCache技术原理
- RecyclerView 必知必会
- AndFix使用感想
- iOS GPUImage源码解读(一)
- Android 几种网络请求的区别与联系
- 构建基于JAVA的朴素贝叶斯文本分类器
- Spring Cloud构建微服务架构:服务网关(基础)【Dalston版】
- RxBinding使用和源码解析
- 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 数组属性和方法
- 学了这个,三歪再也不想写各种setter了
- 使用 GitLab CI 与 Argo CD 进行 GitOps 实践
- Java 语言中十大“坑爹”功能!
- 面试:说说啥是一致性哈希算法?
- 问一下,线程池里面到底该设置多少个线程?
- 进程和线程基础知识全家桶,30 张图一套带走
- Python-matplotlib 学术柱状图绘制
- 为什么要避免大事务以及大事务如何解决?
- [即时通信IM]群@消息如何实现?
- 利用PySpark对 Tweets 流数据进行情感分析实战
- ConcurrentHashMap源码学习
- HashMap源码学习
- Pytest自动化测试fixture之conftest.py
- ArrayList源码学习
- 科技将带给我们什么变化?讲述基于 HTML5 WebGL 的 3D 科幻风机