Ray

永远保持一颗年轻又充满活力的心啊

  • 主页
  • 随笔
所有文章 友链 关于我

Ray

永远保持一颗年轻又充满活力的心啊

  • 主页
  • 随笔

DOM高级-运动

2019-04-07

运动原理

运动也可以叫做动画。
通过连续不断的改变物体的位置,而发生移动变化。
使用 setInterval 实现。
匀速运动:速度值一直保持不变。
多物体同时运动:将定时器绑设置为对象的一个属性。
注:物体每次运动都应该把之前的定时器清除掉。

1
2
3
4
5
//box为绝对定位
var speedX = 2;
box.timer = setInterval(function () {
box.style.left = box.offsetLeft + speedX + "px";
}, 80);

边界处理

遇到边界是应该停止掉还是反弹,方向相反。
改变物体运动方向:将物体的速度值取反。

1
2
3
4
5
6
7
//边界属性  浏览器视口宽高
//返回当前视口的高度(即浏览器窗口的高度)
console.log(document.documentElement.clientHeight);
console.log(document.documentElement.clientWidth);
// 网页总高度 body默认有margin,记得重置
console.log(document.body.clientHeight);
console.log(document.body.clientWidth);
1
2
3
4
5
6
7
8
var speedX = 2
box.timer = setInterval(function(){
box.style.left = box.offsetLeft + speedX +'px';
//左右边界
if(box.offsetLeft <=0 || box.offsetLeft >= cWidth - box.offsetWidth){
speedX = -speedX;
}
},80

加速减速

加速:速度越来越快。
减速:速度越来越慢。

1
2
3
4
box.timer = setInterval(function () {
speedX = speedX + 2;
div.style.left = div.offsetLeft + speedX + "px";
}, 50);

抛物线

水平方向有一速度,垂直方向有一速度,并做自由落体。

1
2
3
4
5
6
7
8
9
var speedY = 0;
var speedX = 10;
// x 方向 匀速
// y 方向 匀加速
box.timer = setInterval(function () {
speedY += 9.8;
box.style.left = box.offsetLeft + speedX + "px";
box.style.top = box.offsetTop + speedY + "px";
}, 80);

透明度的变换

box 逐渐消失

1
2
3
4
5
6
7
8
//使用css将box的opacity 设置为1
var op = 1;
box.timer = setInterval(function () {
op = op - 0.01;
div.style.opacity = op;
//或者
//div.style.opacity = getComputedStyle(div).opacity - 0.01;
}, 80);

缓冲运动

速度一开始很大,然后慢慢变小,比较类似自然界中的缓冲运动

1
2
3
4
5
6
7
8
9
10
11
12
13
//一开始box 在 (0,0)位置,我们将box运动到(300,0)位置
var target = 300; //目标位置
box.timer = setInterval(function () {
//target - div.offsetLeft 是元素距离目标的路程,随着越来越靠近目标,这个值就越来越小,如果把这个值当做速度,速度一开始很大,然后慢慢变小,比较类似自然界中的缓冲运动。如果把这个值直接当速度,一下子就到,所以除以8以后当做速度
var speed = (target - div.offsetLeft) / 8;
//所以要对速度向上取整得到速度1,当speed小于0.375的时候,div就不会移动了
speed = Math.ceil(speed);
box.style.left = div.offsetLeft + speed + "px";
if (box.offsetLeft == target) {
//到达目标清除定时器
clearInterval(box.timer);
}
}, 30);

考虑到运动的时候可能往前,也可以能往后,增加判断

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//一开始box 在 (0,0)位置,我们将box运动到(300,0)位置
var target = 300; //目标位置
div.timer = setInterval(function () {
var speed = (target - div.offsetLeft) / 8;
//当speed小于0.375的时候,div就不会移动了
//所以要对速度向上取整或者向下取整
if (speed > 0) {
//speed大于0 说明是往前运动
//当speed小于0.375的时候,div就不会移动了
//所以要对速度向上取整或者向下取整
speed = Math.ceil(speed);
} else {
//speed大于0 说明是往后运动
speed = Math.floor(speed);
}
div.style.left = div.offsetLeft + speed + "px";
if (div.offsetLeft == target) {
clearInterval(div.timer);
}
}, 30);

上面代码封装为函数

1
2
3
4
5
6
7
8
9
10
11
function animate(div, targetX) {
var target = targetX;
div.timer = setInterval(function () {
var speed = (target - div.offsetTop) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
div.style.top = div.offsetTop + speed + "px";
if (div.offsetTop == target) {
clearInterval(div.timer);
}
}, 30);
}

多属性缓冲运动函数封装

上面的封装只能固定的在 x 方向做动画
如果想让一个 div 从一个点运动到另一个点,怎么办?
比如从(0,0)到(100,200)
这个时候我们把第二个参数改为一个这样的对象 {left:100;top:200}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function animate(div, obj) {
//{left:100;top:200}
//{left:100}
clearInterval(div.timer);
div.timer = setInterval(function () {
var flag = true; //假设已经到了目的地
for (var key in obj) {
console.log(key); //left top
console.log(obj[key]); //300
var target = obj[key]; //目标值
// getComputedStyle['left'] 元素left 属性 当前值
var speed = (target - parseInt(getComputedStyle(div)[key])) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
div.style[key] = parseInt(getComputedStyle(div)[key]) + speed + "px";
if (parseInt(getComputedStyle(div)[key]) != target) {
flag = false;
}
}
//必须等到所有的 属性都到达目的地 才能结束定时器
if (flag == true) {
clearInterval(div.timer);
}
}, 30);
}

本文作者:人模人样的搬砖老段
本文链接:DOM 高级-运动
如有错误,请及时评论或者知乎私信或者 B 站私信哦~


最后更新于:2020/01/28

赏

谢谢你让我少搬一块砖

支付宝
微信
  • JavaScript
  • DOM高级

扫一扫,分享到微信

微信分享二维码
ES6
localStorage本地存储
  1. 1. 运动原理
  2. 2. 边界处理
  3. 3. 加速减速
  4. 4. 抛物线
  5. 5. 透明度的变换
  6. 6. 缓冲运动
  7. 7. 多属性缓冲运动函数封装
© 2025 Ray
Hexo Theme Yilia by Litten
本站总访问量15031次 总访客数12458人次 豫ICP备2022001138号-1

豫公网安备 41162702000161号

  • 所有文章
  • 友链
  • 关于我

tag:

  • CSS
  • 3D转换
  • 关键帧动画
  • BFC
  • JavaScript
  • BOM
  • DOM
  • CSS3
  • 2D转换
  • DOM高级
  • ES6
  • Express
  • multer
  • 文件上传
  • HTML
  • HTML5
  • 摘要算法
  • node
  • HmacSHA256
  • Math
  • Date
  • NestJS
  • SQL Server
  • NodeJS
  • nvm
  • Node多版本管理
  • Ollama
  • DeepSeek-R1
  • 本地部署deepseek
  • React
  • 项目开发
  • 注意点
  • 随笔
  • StableDiffution
  • AIGC
  • AI绘画
  • Vue
  • aes
  • 博客搭建
  • hexo
  • yilia
  • github
  • jQuery
  • localStorage
  • markdown
  • typora
  • 七牛云
  • tinify
  • 项目配置
  • 事件
  • 元素类型
  • ES5
  • string
  • redux
  • Vuex
  • 闭包
  • 函数
  • 图片压缩
  • 小程序
  • 定位
  • 锚点跳转
  • 宽高自适应
  • 弹性盒模型
  • 多栏布局
  • 循环语句
  • 数组
  • 正则
  • 浏览器内核
  • 浏览器兼容
  • 精灵图
  • 盒模型
  • 响应式布局
  • 表格高级
  • 表单高级
  • 逻辑分支
  • 面向对象

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录(注意不是yilia根目录)执行以下命令:
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置:

      jsonContent:
        meta: false
        pages: false
        posts:
          title: true
          date: true
          path: true
          text: false
          raw: false
          content: false
          slug: false
          updated: false
          comments: false
          link: false
          permalink: false
          excerpt: false
          categories: false
          tags: true
    

  • Ollama本地部署DeepSeek-R1模型

    2024-09-23

    #Ollama#DeepSeek-R1#本地部署deepseek

  • StableDiffution入门

    2024-02-11

    #StableDiffution#AIGC#AI绘画

  • Node多版本管理-nvm

    2023-10-17

    #NodeJS#nvm#Node多版本管理

  • NestJS入门

    2023-06-10

    #NestJS

  • node实现图片上传到本地服务器(自定义文件夹参数)& 上传到七牛云,且压缩处理

    2022-10-13

    #node#七牛云#tinify

  • node项目通用配置

    2022-10-12

    #node#随笔#项目配置

  • 前端及node端的图片压缩处理

    2022-10-11

    #node#图片压缩#小程序

  • 小程序项目通用配置

    2022-10-10

    #随笔#项目配置#图片压缩#小程序

  • aes对称加密

    2022-10-09

    #node#aes

  • 采用HmacSHA256算法对字符串进行摘要算法

    2022-10-08

    #摘要算法#node#HmacSHA256

  • Node.js使用SQL Server数据库

    2022-10-01

    #node#SQL Server

  • Express通过multer实现文件上传

    2022-03-04

    #Express#multer#文件上传

  • markdown文件编辑器Typora

    2022-01-24

    #markdown#typora

  • React开发中需要注意的一些内容

    2020-04-05

    #React#项目开发#注意点#随笔

  • 关于redux

    2020-03-22

    #React#redux

  • 关于vuex

    2020-03-08

    #Vue#Vuex

  • React的基本内容

    2020-02-23

    #React

  • 小程序开发中需要注意的一些内容

    2020-02-09

    #项目开发#注意点#随笔#小程序

  • vue开发中需要注意的一些内容

    2020-01-26

    #项目开发#注意点#随笔#Vue

  • Vue之写一个简单的Todolist

    2020-01-12

    #Vue

  • Vue的一些基本内容

    2019-12-29

    #Vue

  • 关于闭包

    2019-12-15

    #JavaScript#闭包

  • jQuery一些基本内容(二)

    2019-12-01

    #jQuery

  • jQuery一些基本内容(一)

    2019-11-17

    #jQuery

  • 基于hexo+yilia的博客主题修改和基本设置

    2019-11-03

    #博客搭建#hexo#yilia#github

  • hexo+yilia搭建博客的坎坷历程

    2019-10-20

    #博客搭建#hexo#yilia#github

  • 面向对象

    2019-10-05

    #JavaScript#面向对象

  • 逻辑分支

    2019-09-21

    #JavaScript#逻辑分支

  • JS基本语法

    2019-09-08

    #JavaScript

  • 循环语句

    2019-08-25

    #JavaScript#循环语句

  • 函数

    2019-08-10

    #JavaScript#函数

  • 数组

    2019-07-28

    #JavaScript#数组

  • 关于ES5和字符串string

    2019-07-14

    #JavaScript#ES5#string

  • Math和Date

    2019-06-30

    #JavaScript#Math#Date

  • BOM和DOM

    2019-06-16

    #JavaScript#BOM#DOM

  • DOM补充

    2019-06-02

    #JavaScript#DOM

  • 事件Event

    2019-05-19

    #JavaScript#事件

  • 正则

    2019-05-05

    #JavaScript#正则

  • ES6

    2019-04-21

    #JavaScript#ES6

  • DOM高级-运动

    2019-04-07

    #JavaScript#DOM高级

  • localStorage本地存储

    2019-03-23

    #JavaScript#localStorage

  • 3D转换和关键帧动画

    2019-03-10

    #CSS#3D转换#关键帧动画

  • CSS核心属性(二)

    2019-02-24

    #CSS#CSS3#2D转换

  • 移动端布局

    2019-02-10

    #CSS#响应式布局

  • 弹性盒模型和几种布局方式

    2019-01-27

    #CSS#弹性盒模型#多栏布局

  • CSS3新特性

    2019-01-13

    #CSS#CSS3

  • BFC

    2018-12-29

    #BFC

  • 浏览器兼容和精灵图

    2018-12-16

    #CSS#浏览器内核#浏览器兼容#精灵图

  • 表单表格高级

    2018-12-02

    #CSS#表格高级#表单高级

  • H5新增元素和属性

    2018-11-18

    #HTML#HTML5

  • 宽高自适应

    2018-11-04

    #CSS#宽高自适应

  • 盒模型

    2018-10-21

    #CSS#盒模型

  • 定位锚点

    2018-10-07

    #CSS#定位#锚点跳转

  • 元素类型

    2018-09-23

    #CSS#元素类型

  • CSS核心属性

    2018-09-09

    #CSS

  • CSS基础

    2018-08-26

    #CSS

  • HTML基础

    2018-08-11

    #HTML

  • 阮一峰博客
  • 司徒正美博客
  • 张鑫旭博客
  • 朴灵的深入浅出nodejs
  • 掘金大佬-敖丙
  • 掘金大佬-花裤衩
随和且慢热

你主动我们就会有故事

爬山爱好者

马拉松爱好者

爱好干净、轻微整洁癖