JavaScript动画相关
JS动画原理
通过CSS缓慢变化从而实现动画效果
获取css属性
Window.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。 私有的CSS属性值可以通过对象提供的API或通过简单地使用CSS属性名称进行索引来访问。
Demo box斜线运动
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width: 20px;
height: 20px;
background-color: black;
position: absolute; /*必须要有定位才能实现动画效果*/
left: 0;
right: 0;
}
</style> </head>
<body>
<div class="box"></div>
<script>
var speedx = 3; // 设置每次移距离
var speedy = 3; // 设置每次移距离
var dv = document.getElementsByClassName("box")[0]; // 获取要移动的元素 这里使用的是ClassName 所以需要索引取出element_obj
function move(el) { // 创建移动函数
var currentleft = parseInt(window.getComputedStyle(el).left); //实时获取当前标签的left距离并转化为int类型
var currenttop = parseInt(window.getComputedStyle(el).top); //实时获取当前标签的top距离并转化为int类型
var left = currentleft + speedx; //进行动态数据计算
var top = currenttop + speedy; //进行动态数据计算
el.style.left = `${left}px`; //通过style属性实时更改数据量
el.style.top = `${top}px`;//通过style属性实时更改数据量
}
setInterval(function () { //设置定时任务
move(dv)
},20)
</script>
</body>
</html>
获取浏览器的宽/高
window.innerWidth
window.innerHeight
Demo box斜线运动边缘碰撞改良版
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width: 20px;
height: 20px;
background-color: black;
position: absolute;
left: 0;
right: 0;
overflow: hidden;
}
</style> </head>
<body>
<div class="box"></div>
<script>
var speedx = 3;
var speedy = 3;
var dv = document.getElementsByClassName("box")[0]; function move(el) {
var style = window.getComputedStyle(el);
var currentleft = parseInt(style.left);
var currenttop = parseInt(style.top);
check_border_collision(el);
var left = currentleft + speedx;
var top = currenttop + speedy;
el.style.left = `${left}px`;
el.style.top = `${top}px`;
} function check_border_collision(el) { // 矫正函数
var style = window.getComputedStyle(el); // 获取box对象css属性
var left = parseInt(style.left); // 获取当前左边距
var top = parseInt(style.top); // 获取当前下距离
var w = parseInt(style.width); // 获取元素宽度
var h = parseInt(style.height); // 获取元素高度
if (left < 0 || left > window.innerWidth - w) { // 判断条件 如果box左边距距离小于0 或者大于浏览器宽度-元素宽度
left = 0;
speedx *= -1; //反转移动
}
if (top < 0 || top > window.innerHeight - h) {// 判断条件 如果box上边距距离小于0 或者大于浏览器高度-元素高度
top = 0;
speedy *= -1; //反转移动
}
} setInterval(function () {
move(dv); //调用移动函数
}, 20)
</script>
</body>
</html>
Demo 两个box互相碰撞
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
overflow: hidden;
} .box {
width: 40px;
height: 40px;
background-color: black;
position: absolute;
left: 0;
right: 0;
overflow: hidden;
} .box2 {
width: 40px;
height: 40px;
background-color: black;
position: absolute;
left: 100px;
right: 100px;
overflow: hidden;
}
</style> </head>
<body>
<div class="box"></div>
<div class="box2"></div>
<script>
var middleware_x; // 声明中间变量 用于存放交换变量
var middleware_y; // 声明中间变量 用于存放交换变量
var dv1 = document.getElementsByClassName("box")[0]; // 获取要移动的元素 这里使用的是ClassName 所以需要索引取出element_obj
var dv2 = document.getElementsByClassName("box2")[0];// 获取要移动的元素 这里使用的是ClassName 所以需要索引取出element_obj
// 分别设置box横纵坐标移动速度
dv1.speedx = 3;
dv1.speedy = 5;
dv2.speedx = 5;
dv2.speedy = 3;
// 移动函数
function move(el) { // el 为element_obj
var style = window.getComputedStyle(el); // 获取标签的css属性obj
var currentleft = parseInt(style.left);
var currenttop = parseInt(style.top);
check_border_collision(el); // 调用函数 用于碰到周围弹回
if (check_block_collision(dv1, dv2)) { // 条件判断 如果两个box碰撞 速度属性反转 先试用中间变量存储x,y速度在依次调换
middleware_x = dv1.speedx;
middleware_y = dv1.speedy;
dv1.speedx = dv2.speedx;
dv1.speedy = dv2.speedy;
dv2.speedx = middleware_x;
dv2.speedy = middleware_y;
}
// 计算速度
var left = currentleft + el.speedx;
var top = currenttop + el.speedy;
// 更新至box标签
el.style.left = `${left}px`;
el.style.top = `${top}px`;
} function check_border_collision(el) { // 矫正函数
var style = window.getComputedStyle(el); // 获取box对象css属性
var left = parseInt(style.left); // 获取当前左边距
var top = parseInt(style.top); // 获取当前下距离
var w = parseInt(style.width); // 获取元素宽度
var h = parseInt(style.height); // 获取元素高度
if (left < 0 || left > window.innerWidth - w) { // 判断条件 如果box左边距距离小于0 或者大于浏览器宽度-元素宽度
left = 0;
el.speedx *= -1; //反转移动
}
if (top < 0 || top > window.innerHeight - h) {// 判断条件 如果box上边距距离小于0 或者大于浏览器高度-元素高度
top = 0;
el.speedy *= -1; //反转移动
}
}
// 判断函数 用于判断两个box是否相撞
function check_block_collision(ev1, ev2) {
var style1 = window.getComputedStyle(ev1);
var style2 = window.getComputedStyle(ev2);
var left1 = parseInt(style1.left);
var left2 = parseInt(style2.left);
var top1 = parseInt(style1.top);
var top2 = parseInt(style2.top);
var width1 = parseInt(style1.width);
var width2 = parseInt(style2.width);
var height1 = parseInt(style1.height);
var height2 = parseInt(style2.height);
// box坐标 x=left1+width/2 y=top+height/2
var center1 = {
x: left1 + width1 / 2,
y: top1 + height1 / 2
};
var center2 = {
x: left2 + width2 / 2,
y: top2 + height2 / 2
};
// 计算两个box的坐标差的绝对值
var diffx = Math.abs(center1.x - center2.x);
var diffy = Math.abs(center1.y - center2.y);
// 判断是否碰撞 如果x轴向大于两个box的宽之和且y轴大于两个box的高之和即为碰撞
if (diffx < (width1 + width2) / 2 && diffy < (height1 + height2) / 2) {
return true
}
return false
}
// 设置定时器
setInterval(function () {
move(dv1); //调用移动函数
move(dv2); }, 20)
</script>
</body>
</html>
封装动画函数
实现功能: 动态的渐变效果 支持多参数 例如 {"left":500} 从左至右500px从快至慢渐停
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
overflow: hidden;
} .box {
width: 40px;
height: 40px;
background-color: black;
position: absolute;
left: 0;
right: 0;
opacity: 1;
}
</style> </head>
<body>
<div class="box" id="box1"></div>
<script>
// 封装函数 解决兼容问题 得到Style
function getStyle(el) { // el指element节点
if (getComputedStyle) {
return window.getComputedStyle(el)
} else {
return el.currentStyle
}
} function animate(el, properties) {
//el指element节点 property指方向等但是只能使用默认的方向 left等 target 目标值
// property 新增透明模式 opacity
var interval_id; //声明计时器id 如果抛错把这个声明至外部
var current;
var speed;
if (interval_id) { //如果有定时器 清除
clearInterval(interval_id);
} interval_id = setInterval(function () { // 创建定时器函数
for (var property in properties) {
var target = properties[property];
if (property === 'opacity') { // 透明度特殊处理
current = Math.round(parseFloat(getStyle(el)["opacity"]) * 100)
//获取element透明度并x100进行后续数据处理 该方法将进行上舍入。
} else {
current = parseInt(getStyle(el)[property]); // 渐变值
}
speed = (target - current) / 30; // 步长 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); // Math.ceil向上取整 Math.floor向下取整
if (property === 'opacity') {
// 对opacity进行特殊处理
el.style.opacity = (current + speed) / 100 // 将前面先乘的除掉
} else {
el.style[property] = current + speed + 'px'
}
}
}, 20)
}
el = document.getElementById('box1'); //获取节点
animate(el, {'opacity': 0,"left":200,'width':500}) // 调用封装函数 </script>
</body>
</html>
JavaScript动画相关的更多相关文章
- 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
- javascript动画系列第三篇——碰撞检测
前面的话 前面分别介绍了拖拽模拟和磁性吸附,当可视区域内存在多个可拖拽元素,就出现碰撞检测的问题,这也是javascript动画的一个经典问题.本篇将详细介绍碰撞检测 原理介绍 碰撞检测的方法有很多, ...
- javascript动画系列第一篇——模拟拖拽
× 目录 [1]原理介绍 [2]代码实现 [3]代码优化[4]拖拽冲突[5]IE兼容 前面的话 从本文开始,介绍javascript动画系列.javascript本身是具有原生拖放功能的,但是由于兼容 ...
- JavaScript动画知多少？
今天,小学生以自己浅薄的见地,在前辈大能的基础上写这篇文章,希望给大家打开一扇窥探JavaScript(以下简称JS)动画的窗户. JS如何制造出动画效果? 结合浏览器提供的 setInterval ...
- Javascript动画效果（三）
Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...
- Javascript动画效果（一）
Javascript动画效果(一) 前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的 ...
- Javascript动画效果（二）
Javascript动画效果(二) 在前面的博客中讲了简单的Javascript动画效果,这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法. 在前面的多物体宽度变化的例子中,我们给其增加代码 ...
- Javascript动画效果（四）
Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...
- CSS3之动画相关
CSS3动画相关的属性:transform,transition,animation. 变形Transform 语法: transform: rotate | scale | skew | trans ...
随机推荐
- （转）java内存分配分析/栈内存、堆内存
转自(http://blog.csdn.net/qh_java/article/details/9084091) java内存分配分析/栈内存.堆内存 java内存分配分析 本文将由浅入深详细介绍Ja ...
- pycharm pro与你同在
下载激活码和激活依赖的jar包,地址(https://www.lanzous.com/b00t4aneb密码:67t9)按照步骤操作即可第一步:正确安装 Pycharm 软件(版本2019.1.3 p ...
- CefApp和CefClient的作用
CefApp 在cefsimple中,提到了一个cefapp的类型,这个类型是一个接口类,主要目的是提供获取三种handler的接口 /// // Implement this interface t ...
- angular清空node_modules
安装全局包 npm install rimraf -g 执行清空命令 rimraf node_modules
- 第二十三篇 玩转数据结构——栈（Stack）
1.. 栈的特点: 栈也是一种线性结构: 相比数组,栈所对应的操作是数组的子集: 栈只能从一端添加元素,也只能从这一端取出元素,这一端通常称之为"栈顶": 向栈中添加元 ...
- layui-table 样式
<!DOCTYPE html> <html> <head> <style> #lay-table { background-color: #fff; c ...
- 出现xxxtbox问题又有集群网络等问题时的解决
出现xxxtbox问题又有集群网络等问题时的解决 集群环境本身问题引发 重新rancher上删除集群,正常构建集群成功,环境就没问题,否则由于环境问题怎么找解决方案都有问题
- java获取配置文件中变量值
在resources 目录下新建config.properties文件 #文件保存路径 filePath=E:\\images\\file 工具类 public class ConfigUtil { ...
- Vue - 让水平滚动条(scroll bar)固定在浏览器的底部
效果 踩坑经历 TLDR; 在几个小时的google和stack overflow的苦苦搜索后,无果. 经过自我思考,想到了一种实现方法: 整个页面是一个盒子,要出现滚动条,必然里面的元素要溢出.也即 ...
- opencv：图像模糊
高斯模糊 #include <opencv2/opencv.hpp> #include <iostream> using namespace cv; using namespa ...