javascript之常见的运动

javascript之常见的运动

运动匀速运动加速运动减速运动圆周运动缓冲动画简单的缓存动画完善动画1 动画赋值给点击事件动画的完善版本

运动

匀速运动

<div class="box"></div> <script> //鼠标滑过 box向左移动1000px let box = document.querySelector(".box") var left = 0; box.onmouseover = function () { let timer = setInterval(() => { left += 10 if (left >= 1000) { left = 1000; clearInterval(timer) } box.style.left = left + "px" }, 100) } </script>

加速运动

<div class="box"></div> <script> //鼠标滑过 box向左移动1000px 加速运动 //速度加快 也就是定时器没执行一次 速度加快 let box = document.querySelector(".box") var left = 0; var speed = 0 box.onmouseover = function () { let timer = setInterval(() => { speed += 5; left = speed + left if (left >= 1000) { left = 1000; clearInterval(timer) } box.style.left = left + "px" }, 60) } </script>

减速运动

<div class="box"></div> <script> //鼠标滑过 box向左移动1000px 加速运动 //速度减慢 也就是定时器没执行一次 速度减慢 let box = document.querySelector(".box") var left = 0; var speed = 100; box.onmouseover = function () { let timer = setInterval(() => { speed -= 5; left = speed + left if (speed <= 0) { clearInterval(timer) } box.style.left = left + "px" }, 100) } </script>

圆周运动

* { box-sizing: border-box; margin: 0; padding: 0; } .box { position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; width: 300px; height: 300px; border: 1px solid red; border-radius: 50%; } .ball { position: absolute; width: 30px; height: 30px; background: pink; border-radius: 50%; } <div class="box"> <div class="ball"></div> </div> <script> let box = document.querySelector(".box") //外圆 let ball = document.querySelector(".ball") //运动的球体 let boxR = box.offsetWidth / 2 //外圆的宽 / 2 = 半径 let ballR = ball.offsetWidth / 2 //运动的球体的宽 /2 = 半径 let deg = 0; move(deg, boxR) setInterval(() => { deg += 10 move(deg, boxR) }, 100) function move(deg, boxR) { let hudu = (deg * Math.PI) / 180 //弧度 也就是角度 // Adjacent and opposite sides 邻边和对边 let aSides = Math.cos(hudu) * boxR //邻边 let oSide = Math.sin(hudu) * boxR //对边 //小求的位置 ball.style.left = boxR + aSides - ballR + "px"; ball.style.top = boxR - oSide - ballR + "px"; } </script>

缓冲动画

简单的缓存动画

<div class="box"></div> <script> //鼠标滑过 box向左移动600px 在600px这个范围内做缓冲动画 //速度减慢 speed = （也就是在目标值 - left值）/系数 --需要向上取整 let box = document.querySelector(".box") var left = 0; var speed = 0; //速度 var target = 600 //目标值 box.onmouseover = function () { let timer = setInterval(() => { speed = Math.ceil((target - left) / 2) left = speed + left // console.log(speed, left); if (left === target) { //当left等于目标值的之后，就清除定时器！ clearInterval(timer) } box.style.left = left + "px" }, 100) } </script>

完善动画1

参数为：元素，对象,回调函数

//缓动动画，就是在 (目标值 - 所获取到的当前样式）/ 2 为速度 // 目标值就是你在obj传入的属性值 当前样式，则需要使用获得非行内样式的函数 //缓动动画修改的样式 为style = style + 速度（speed) // 动画的运动：需要定位和定时器 因此运动的样式都是在定时器设置 //动画结束的时候：需要修改ele的样式，也就是需要知道动画什么时候结束 // 这就需要借助一个定时器的计数器了 每比那里一次，计数一次，当到底动画执行的时候，就计数器-- //需求：封装一个动画函数，传递的参数为ele元素，obj对象的形式 let box = document.querySelector(".box") animation(box, { left: 1000, top: 100 }, function () { console.log(1); }) function animation(ele, obj, callback) { let timerLen = 0; //定时器的计数器 //第一步：遍历对象obj 拿到目标值 obj[key] 拿到需要修改的属性样式 key for (let key in obj) { // console.log(key); // top left // console.log(obj[key]); // 100 100 timerLen++ let speed; //速度 let timer = setInterval(() => { let style = parseInt(getStyle(ele, key)) //拿到的是0px 直接取整为0 speed = Math.ceil((obj[key] - style) / 2) //速度 需要向上取整 style = style + speed //设置动画元素的样式 // console.log(obj[key], style); if (obj[key] === style) { //当样式到底目标值的时候，清除定时器 clearInterval(timer) timerLen-- if (timerLen === 0) { // console.log("动画执行完毕"); callback() } } ele.style[key] = obj[key] + "px" }, 1000) } }

动画赋值给点击事件

需求：点击的时候，不能使得动画加速！ 参数为：元素，对象,回调函数

<div class="box"></div> <button class="btn">按钮</button> //缓动动画，就是在 (目标值 - 所获取到的当前样式）/ 2 为速度 // 目标值就是你在obj传入的属性值 当前样式，则需要使用获得非行内样式的函数 //缓动动画修改的样式 为style = style + 速度（speed) // 动画的运动：需要定位和定时器 因此运动的样式都是在定时器设置 //动画结束的时候：需要修改ele的样式，也就是需要知道动画什么时候结束 // 这就需要借助一个定时器的计数器了 每比那里一次，计数一次，当到底动画执行的时候，就计数器-- //点击按钮，在事件驱动的时候，触发动画，那么定时器的变量不能定义为变量哦，因为每一次点击触发的一个函数， // 函数开辟了一个新的空间，因此下一次定时器需要清除上一个定时器时候，无法清除 //所以：需要把这个定时器的名字 挂载在ele这个元素对象身上 ele[key] 对象的属性 这样既可！ 不能ele[key].timer //需求：封装一个动画函数，传递的参数为ele元素，obj对象的形式 let box = document.querySelector(".box") let btn = document.querySelector(".btn") btn.onclick = function () { animation(box, { left: 1000, top: 100 }, function () { console.log(1); }) } function animation(ele, obj, callback) { let timerLen = 0; //定时器的计数器 //第一步：遍历对象obj 拿到目标值 obj[key] 拿到需要修改的属性样式 key for (let key in obj) { // console.log(key); // top left // console.log(obj[key]); // 100 100 timerLen++ let speed; //速度 clearInterval(ele[key]) ele[key] = setInterval(() => { let style = parseInt(getStyle(ele, key)) //拿到的是0px 直接取整为0 speed = Math.ceil((obj[key] - style) / 2) //速度 需要向上取整 style = style + speed //设置动画元素的样式 // console.log(obj[key], style); if (obj[key] === style) { //当样式到底目标值的时候，清除定时器 clearInterval(ele[key]) timerLen-- if (timerLen === 0) { // console.log("动画执行完毕"); callback() } } ele.style[key] = obj[key] + "px" }, 100) } }

动画的完善版本

//缓动动画，就是在 (目标值 - 所获取到的当前样式）/ 2 为速度 // 目标值就是你在obj传入的属性值 当前样式，则需要使用获得非行内样式的函数 //缓动动画修改的样式 为style = style + 速度（speed) // 动画的运动：需要定位和定时器 因此运动的样式都是在定时器设置 //动画结束的时候：需要修改ele的样式，也就是需要知道动画什么时候结束 // 这就需要借助一个定时器的计数器了 每比那里一次，计数一次，当到底动画执行的时候，就计数器-- //点击按钮，在事件驱动的时候，触发动画，那么定时器的变量不能定义为变量哦，因为每一次点击触发的一个函数， // 函数开辟了一个新的空间，因此下一次定时器需要清除上一个定时器时候，无法清除 //所以：需要把这个定时器的名字 挂载在ele这个元素对象身上 ele[key] 对象的属性 这样既可！ 不能ele[key].timer //还有可以添加透明度！ 这旧需要判断了，因为透明度是小数点，因此需要使用的时候*100 //鼠标滑过 box向左移动600px 在600px这个范围内做缓冲动画 //速度减慢 speed = （也就是在目标值 - left值）/系数 --需要向上取整 let box = document.querySelector(".box") let btn = document.querySelector(".btn") //需求：点击事件，调用动画 //因此清除定时器不能使用变量的方式定义，因为function为赋值数据，每一次调用都会开辟一个空间，下一个空间无法清除上一个空间的变量 //所以：只能把定时器这个变量名挂载在元素这个对象身上（万物皆对象）， // ele[key] --- 元素的属性 ele[key].timer ---为对象属性的属性？ 语法错误，因此为第一个 btn.onclick = function () { animation(box, { opacity: 80 }, function () { console.log(1); }) } //需求：你需要知道动画是什么时候结束的 结束后，需要干什么事情！ //因此需要定义一个计数器，用于记录定时器执行了多少次！ function animation(ele, obj, callback) { let timerLen = 0; //定时器的执行次数 //遍历对象obj 进行动画样式的设置! for (let key in obj) { timerLen++ // console.log(key); //字符串的格式 key --属性 top等等 // console.log(obj[key]); //也就是目标值 属性值 obj[key] 100 //style就是所运动的样式 clearInterval(ele[key]) //清除上一次的定时器 let speed = 0; //速度 ele[key] = setInterval(() => { //假如为透明属性的时候，就获取到初始的透明值，否则就是获取当前样式的属性！ if (key === "opacity") { //属性值的初始设置为小于1的，为透明度的时候 值需要*100，为了方便计算！ style = getStyle(ele, key) * 100 //拿到初始的属性值 } else { var style = parseInt(getStyle(ele, key)); //获取到非行内样式 } //速度的计算！ (目标值 - 当前样式值)/5 speed = (obj[key] - style) / 5; //假如速度小于0的时候，就是代表负数，向下取整（负数） speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); style = style + speed //所修改的样式 = 当前样式 + 速度 // console.log(style, obj[key]); //50 100 if (key === "opacity") { //由于透明属性没有那个单位，因此需要判断！ ele.style[key] = style / 100 //修改ele元素的样式 } else { ele.style[key] = style + "px" //修改ele元素的样式 } if (style === obj[key]) { //当left等于目标值的之后，就清除定时器！ clearInterval(ele[key]) timerLen-- //执行完定时器后，就定时器计数渐渐 当定时器计数器为0的时候，代表动画执行结束 if (timerLen === 0) { // console.log("动画执行完毕了"); callback() } } }, 100) } } </script>