运动讲解（1）

最新推荐文章于 2024-07-25 15:44:34 发布
最新推荐文章于 2024-07-25 15:44:34 发布
阅读量64 收藏
点赞数
文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48847448/article/details/126413535
版权

概述

运动主要是动画的操作，主要是操作某个document元素的属性变化（位置变化）

运动主要的三步骤

  • 使用定时器来定时更改对应的内容
  • 实时获取对应的元素的属性及相关内容
  • 判断是否到达目标位置（到达后清除定时器）

匀速运动

概述：匀速运动的本质就是每次变化值都是同一个

示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name=
"
viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
position: relative;
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<button>匀速运动</button>
<div></div>
<script>
//获取div
var btn = document.querySelector('button')
var div = document.querySelector('div')
btn.onclick = ()=>{
//使用定时器
var step = 10
var target = 500
var current = 0
var timer = setInterval(() => {
//在定时器内控制div的位置变化
current += step //当前位置变化
div.style.left = current + 'px' //设置位置
//当到达目标位置清除定时器
if(current == target){
clearInterval(timer)
}, 20);
}
</script>
</body>
</html>

缓冲运动

概述: 缓冲运动的本质就是每次变化的值越来越小

示例

//缓冲运动
//获取div和对应的按钮
var btns = document.querySelectorAll('button')
var box = document.querySelector('div')
btns[0].onclick = ()=>{
//获取当前位置
var current = parseInt(getStyle(box,'left'))
//定义步长和对应的目标位置
var step = 10 //初始步长
var target = 500 //目标位置
//定时器
var timer = setInterval(() => {
//控制步长的变化 离目标会越来越小 把步长和这个距离绑定
step = (target - current)/20 > 0 ? Math.ceil((target - current)/20) :
Math.floor((target - current)/20)
//控制当前位置的变化
current += step
//给当前位置赋值
box.style.left = current + 'px'
//到达目标位置清除定时器
if(current == target){
clearInterval(timer)
}
}, 80);
}

匀速移动和缓冲移动的封装

//获取样式的方法
function getStyle(ele, attr) {
return window.getComputedStyle ? window.getComputedStyle(ele, null)[attr] :
ele.currentStyle[attr]
}
//缓冲动画为true 不传就是匀速
function move(ele, target, isBuffer) {
//获取当前位置
var current = parseInt(getStyle(ele, 'left'))
//定义步长和对应的目标位置
var step = target - current > 0 ? 10 : -10
//定时器
var timer = setInterval(() => {
if (isBuffer) {
//控制步长的变化 离目标会越来越小 把步长和这个距离绑定
step = (target - current) / 20 > 0 ? Math.ceil((target - current) /
20) : Math.floor((target - current) / 20)
}
//控制当前位置的变化
current += step
//给当前位置赋值
ele.style.left = current + 'px'
//到达目标位置清除定时器
if (current == target) {
clearInterval(timer)
}
}, 20)
}

透明度变化

//透明度变化
function opacityAction(box,target){
//获取当前的透明度
//设置步长及对应的目标位置
var step
var current = parseFloat(getStyle(box, 'opacity'))
//开启定时器
var timer = setInterval(() => {
// step = target-current>0?0.1:-0.1
//当透明度到达目标位置清除定时器
if(Math.abs(target-current) <= step){
clearInterval(timer)
}
// 最小值 0.01
step = (target-current)*100/10 > 0 ? Math.ceil((target-
current)*100/10)/100 : Math.floor((target-current)*100/10)/100
//控制透明度的变化
current += step
box.style.opacity = current
}, 20);
}

宽度变化

//获取按钮及div
var box = document.querySelector('div')
var btn = document.querySelector('button')
btn.onclick = ()=>{
//获取开始的宽度 以及步长
var current = parseFloat(getStyle(box,'width'))
var step
var target = 500
//设置目标位置
var timer = setInterval(() => {
//判断是否到达目标位置
if(Math.abs(target-current) <= step){
clearInterval(timer)
}
//设置步长
// step = target - current > 0 ? 10 : -10
step = (target-current )/10 > 0 ? Math.ceil((target-current)/10) :
Math.floor((target-current)/10)
//设置当前的位置
current += step
box.style.width = current + 'px'
}, 20);
}
//获取样式的方法
function getStyle(ele, attr) {
return window.getComputedStyle ? window.getComputedStyle(ele, null)[attr] :
ele.currentStyle[attr]
}

简易封装move.js

//获取样式的方法
function getStyle(ele, attr) {
return window.getComputedStyle ? window.getComputedStyle(ele, null)[attr] :
ele.currentStyle[attr]
}
//缓冲动画为true 不传就是匀速
function move(ele, target, isBuffer = false) {
clearInterval(ele.timer) //清除之前的定时器影响
//针对于px为单位的 width,height,left,top
//opacity不需要px
//zIndex不需要动画
//获取target对象里面的所有的key
ele.timer = setInterval(() => {
var flag = true
for (let key in target) {
//获取当前位置
var current = parseFloat(getStyle(ele, key)) ?
parseFloat(getStyle(ele, key)) : 0
//定义步长和对应的目标位置
if(key == 'opacity'){
var step = target[key] - current > 0 ? 0.01 : -0.01
}else{
var step = target[key] - current > 0 ? 10 : -10
}
//定时器
if (key == 'zIndex') { //层级
ele.style[key] = target[key] //直接设置
} else {
//没有到达设置为false
if (Math.abs(target[key] - current ) > step) {
flag = false
}
if (isBuffer) { //如果是缓冲的
if (key == 'opacity') { //透明度
// 最小值 0.01
step = (target[key] - current) * 100 / 10 > 0 ?
Math.ceil((target[key] - current) * 100 / 10) / 100 : Math.floor((target[key] -
current) * 100 / 10) / 100
} else { //其他的
//控制步长的变化 离目标会越来越小 把步长和这个距离绑定
step = (target[key] - current) / 10 > 0 ?
Math.ceil((target[key] - current) / 10) : Math.floor((target[key] - current) /
10)
}
}
//控制当前位置的变化
current += step
//给当前位置赋值
if (key != 'opacity') {
ele.style[key] = current + 'px'
} else {
ele.style[key] = current
}
}
}
if (flag) {
clearInterval(ele.timer)
}
}, 20)
}

链式动画

链式动画 等一个完成以后再进行某个操作 （通过回调函数来实现）

//获取样式的方法
function getStyle(ele, attr) {
return window.getComputedStyle ? window.getComputedStyle(ele, null)[attr] :
ele.currentStyle[attr]
}
//缓冲动画为true 不传就是匀速
function move(ele, target, isBuffer = true,callback) {
clearInterval(ele.timer) //清除之前的定时器影响
//针对于px为单位的 width,height,left,top
//opacity不需要px
//zIndex不需要动画
//获取target对象里面的所有的key
ele.timer = setInterval(() => {
var flag = true
for (let key in target) {
//获取当前位置
var current = parseFloat(getStyle(ele, key)) ?
parseFloat(getStyle(ele, key)) : 0
//定义步长和对应的目标位置
if(key == 'opacity'){
var step = target[key] - current > 0 ? 0.01 : -0.01
}else{
var step = target[key] - current > 0 ? 10 : -10
}
//定时器
if (key == 'zIndex') { //层级
ele.style[key] = target[key] //直接设置
} else {
//没有到达设置为false
if (Math.abs(target[key] - current ) > step) {
flag = false
}
if (isBuffer) { //如果是缓冲的
if (key == 'opacity') { //透明度
// 最小值 0.01
step = (target[key] - current) * 100 / 10 > 0 ?
Math.ceil((target[key] - current) * 100 / 10) / 100 : Math.floor((target[key] -
current) * 100 / 10) / 100
} else { //其他的
//控制步长的变化 离目标会越来越小 把步长和这个距离绑定
step = (target[key] - current) / 10 > 0 ?
Math.ceil((target[key] - current) / 10) : Math.floor((target[key] - current) /
10)
}
}
//控制当前位置的变化
current += step
//给当前位置赋值
if (key != 'opacity') {
ele.style[key] = current + 'px'
} else {
ele.style[key] = current
}
}
}
if (flag) {
clearInterval(ele.timer)
//如果你的回调是一个函数就执行
if(callback instanceof Function){
callback()
}
}
}, 20)
}

回到顶部的实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name=
"
viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
height: 1500px;
}
button{
display: none;
position: fixed;
bottom: 50px;
right: 30px;
}
</style>
</head>
<body>
<div></div>
<button>回到顶部</button>
<script src="./move.plus.js"></script>
<script>
//滚动栏 监听滚动栏滚动
var btn = document.querySelector('button')
window.onscroll = function(){
if(window.scrollY >= 500){
btn.style.display = 'block'
move(btn,{opacity:1})
}else{
move(btn,{opacity:0})
}
}
btn.onclick = function(){
//将对应的滚动栏 以缓冲动画运动到对应的位置0
var target = 0
var current = window.scrollY
var step = (target - current)/10 > 0 ? Math.ceil((target -
current)/10) : Math.floor((target - current)/10)
var timer = setInterval(() => {
current += step
window.scrollTo(0,current)
if(current == target){
clearInterval(timer)
}
}, 20);
}
</script>
</body>
</html>

第三方 move.js

主要使用

to 从当前位置到达某个位置（x,y）
set 设置相关样式 (样式名,样式值)
end 结束当前动画
duration 运动的时长（默认时长为0.5s）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name=
"
viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.
box{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
<script src="./move.min.js"></script>
<script>
move('.box')
.
to(500, 200) //到某个位置 to到某个位置 set 设置相关样式 then回调 end 表示结
束 duration 总时长
// .rotate(180)
// .scale(.5)
.
set('background-color', '#888')
.
set('border-color', 'black')
.
duration('2s')
// .skew(50, -10)
// .then()//回调
// .set('opacity', 0)
// .duration('0.3s')
// .scale(0.1)
// .pop()
.
end();
</script>
</body>
</html>

前端-笙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
运动控制系统讲解.pdf
08-19
运动控制系统讲解 在工业控制系统中，运动控制系统扮演着至关重要的角色，它是指控制电机或其他执行机构的运动轨迹、速度和加速度，以实现生产过程的自动化和智能化。运动控制系统的主要组成部分包括电机、控制器、...
原生js封装运动框架的示例讲解
10-19
下面小编就为大家带来一篇原生js封装运动框架的示例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
船舶运动数学模型
02-17
在稳定性分析部分，作者讲解了如何评估船舶在不同工况下的稳性，包括初稳性、静稳性和动稳性。初稳性主要关注船舶在静止状态下的平衡，而静稳性和动稳性则涉及船舶在运动过程中的稳定性能。此外，书中还涵盖了船舶的...
基于匀速运动的实例讲解(侧边栏,淡入淡出)
08-29
基于匀速运动的实例讲解 本篇文章主要讲解了基于匀速运动的实例讲解，通過JavaScript和CSS来实现div元素的运动效果。文章从基本的HTML和CSS结构开始，逐步讲解了如何使用JavaScript来控制div元素的运动。 首先，...
运动控制之电子齿轮讲解及其C#源代码.zip
05-24
在运动控制系统中，"电子齿轮"是一个非常关键的概念，它是一种通过软件算法模拟机械齿轮传动比的技术，使得电机能够按照预设的比例精确地移动。这种技术广泛应用于机器人、自动化设备和精密定位等领域，能有效提高...
flex：1
m0_47999208的博客
07-25 381
2.flex-shrink,在flex布局中经常会遇到页面宽度不够而导致的文字换行问题，由于flex布局默认flex-shrink为1,就是默认可以缩小然后会导致换行，需要设置flex-shrink:0,默认不缩小就可以了。上面是120px高，给下面的外盒子高度设置为calc(100% - 120px);答：给外部盒子添加display：flex,内部盒子设置为flex-grow：1。现在有一个上下盒子，上面是固定值，下面是随页面高度变换的，如何让下面盒子的子盒子高度适应外部的高度呢？
CSS 自适应图片根据 div 大小进行均匀填充
gz_qiulinyong的博客
07-24 945
在Web开发中，经常需要图片根据其容器的大小进行自适应填充，使得图片在任何设备和屏幕尺寸下都能保持良好的显示效果。本文将介绍如何使用CSS中的object-fit属性来实现这一需求。使用object-fit属性可以非常方便地实现图片在容器中的自适应填充，保持图片的宽高比并使其均匀填充容器。这个方法适用于各种情况，例如响应式设计和多设备支持。
CSS前端面试题——CSS 中，有哪些方式可以隐藏页面元素？有什么区别?
lbcbjtlhmjq的博客
07-25 300
这些方式的区别在于是否占据空间和是否可见，开发者可以根据实际情况选择不同的方式来隐藏页面元素。
css更改图片颜色
程序员
07-25 188
这些滤镜组合在一起，可以产生独特的视觉效果，可能用于特定的设计需求或视觉效果。：将图像的颜色反转51%。即把图像的颜色变为它们的补色，反转比例为51%。css更改图片颜色，比较时候颜色单一的图片，比如logo之类的。：将图像转换为深褐色调，类似于旧照片效果，深褐色比例为94%。：增加图像的饱和度，使颜色更加鲜艳，饱和度为原来的6433%。：调整图像的亮度，使图像的亮度变为原来的93%。：调整图像的对比度，使对比度变为原来的101%。) 添加一系列的滤镜效果。：改变图像的色相，将色相顺时针旋转190度。
css 作业 2
没有 bug 的代码是不完美的！
07-25 713
写完了
CSS相关记录
oThrowsException的博客
07-24 782
它接受两个参数，分别表示在X轴和Y轴上的缩放比例。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。CSS的transform属性是一个功能强大的工具，允许你对HTML元素应用2D或3D转换效果，包括旋转、缩放、倾斜和移动等。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。scaleX()、scaleY()、scaleZ()：这些函数分别用于沿X轴、Y轴和Z轴缩放元素。
第三十天 CSS的引入方式
out_stand_ing的博客
07-24 258
前端大佬修炼之路 筑基期第八层
前端开发知识(二)-css
modi000的博客
07-24 274
若直接在在.css文件中写css,文件中，直接写就行，如下所示。div是布局标签， 一般放在head标签内，最下部。
常见的CSS属性（一）——字体、文本、边框、内边距、外边距、背景、行高、圆角、透明度、颜色值
weixin_64294248的博客
07-25 1159
元素的继承性是指给父元素设置了某些属性，子元素或后代元素也会有作用。
Web开发：图片九宫格与非九宫格动态切换效果（HTML、CSS、JavaScript）
m0_65029152的博客
07-20 988
本文主要记录图片九宫格与非九宫格展示效果动态切换的实现过程；
CSS 的工作原理
07-25 860
我可能会为一个框给出一个以像素为单位的回退宽度，然后继续给出一个值为 .旧浏览器将使用像素版本，忽略该行，因为它们不理解它。请记住，这是浏览器加载网页时发生的情况的非常简化的版本，并且不同的浏览器将以不同的方式处理该过程。鉴于 CSS 一直在开发中，因此领先于浏览器可以识别的内容，您可能会想知道如果浏览器遇到它无法识别的 CSS 选择器或声明会发生什么。如果浏览器正在解析您的规则，并遇到它无法理解的属性或值，它会忽略它并继续下一个声明。我们已经学习了CSS的基础知识，它的用途以及如何编写简单的样式表。
css黑色二级下拉导航菜单
u011626414的专栏
07-23 264
上时，二级菜单会显示出来。你可以根据需要调整样式和布局。当鼠标悬停在包含二级菜单的。黑色二级下拉导航菜单。
Programming in the Large CSSE2002
最新发布
w976j_的博客
07-25 761
❼❼❼SheePComponents❼❼Savingnotnot).TheandSeeSee。
js+css侧边导航菜单 可收缩
u011626414的专栏
07-23 407
js+css侧边导航菜单 可收缩创建一个可收缩的侧边导航菜单需要使用JavaScript来处理交互，而CSS则用来设置样式和动画效果。以下是一个简单的示例，展示了如何创建一个可收缩的侧边导航菜单。
SIMOTION运动控制器基础学习指南
手册讲解了程序结构，主要使用的是Motion Control Language (MCC)编程，MCC是一种专门用于运动控制的编程语言。通过MCCUnit和MCCChart，用户可以创建和管理控制逻辑。手册还列举了MCC的多种命令类型，包括基本命令、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值