主要用到offsetLeft、Math.ceil、Math.floor、Math.abs。
注意offsetLeft获取到的的值为四舍五入的style.left的数值,offsetLeft = Math.round(style.left的数值部分) 比如style.left = 369.4px, 获取到的offsetLeft = 369。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>缓动动画</title>
<style>
#slow_action {
width: 100px;
height: 100px;
background: pink;
position: absolute;
}
</style>
</head>
<body>
<button id="btn1">运动到400</button>
<button id="btn2">运动到0</button>
<div id="slow_action"></div>
</body>
<script>
var btn1 = document.getElementById("btn1")
var btn2 = document.getElementById("btn2")
var div = document.getElementById("slow_action")
/**
* 动画原理 = 盒子位置 + 步长(步长越来越小)
* 盒子位置 = 盒子本身的位置 + (目标位置 - 盒子本身位置)/10
*/
btn1.onclick = function () {
fn(div,400)
}
btn2.onclick = function () {
fn(div,0)
}
function fn(ele, target) {
clearInterval(ele.timer);
ele.timer = setInterval(function () {
// var target = 400;
//最后10像素都是1px向目标位置移动 最后到达指定位置
var step = (target - ele.offsetLeft)/10;
//差值大于10的时候向上取整 小于0的时候向下取整
step = step > 0 ? Math.ceil(step) : Math.floor(step)
ele.style.left = ele.offsetLeft + step + "px";
//检测定时器是否停止
console.log(1)
//跳出条件 目标位置-当前位置的绝对值,小于步长
if(Math.abs(target - ele.offsetLeft) < Math.abs(step)) {
ele.style.left = target + "px";
clearInterval(ele.timer)
}
}, 30);
}
</script>
</html>
JS的缓动动画的实现,就是通过一个公式来实现的:begin = begin + (end - begin) * 0.2;这个公式里面,begin就是动画开始的位置,end就是动画结束的位置,0.2就是个缓动系数,不是固定值,不超过1就行,系数越大,动画运动就越快,这个看着貌似挺高大上,其实没啥,就是控制了begin等于end的速度,它的终止条件就是beng===end,放一个实例:&......
Amy的博客
3655
匀速运动: function $(id) { return document.getElementById(id) } var num = 0; var timer = null; //给button设置点击事件 $("btn").onclick = function () { //设置动画 每30s调用下面的
5-1
// 1.有非常逼真的缓动效果,实现的动画效果更细腻。 // 2.如果不清除定时器...js缓动动画封装源码主要用到offsetLeft、Math.ceil、Math.floor、Math.abs。注意...
1-6
js 匀速/缓动动画 简单封装 阅读数 5802 .box1 { width: 300px; height:...问了为什么网上大量使用ThreadLocal的源码都会加上private static?他被难住了,...
stevenxyy的博客
153
// var timerId = null;// 封装动画的函数function animate(element, target) {// 通过判断,保证页面上只有一个定时器在执行动画if (element.timerId) {clearInterval(element.timerId);element.timerId = null;}element.timerId = setIn...
zl13015214442的博客
303
我们都知道实现动画的原理就是:盒子未来的位置 = 盒子当前的位置+步长。那么缓动动画实现就是步长越来越小。盒子慢慢停下的效果。根据这个原理实现一个缓动的效果:<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title><...
1-7
利用自己所学的内容,将缓动动画和均速动画结合,封装了一个JS原生的动画函数。但是这个函数有很大的问题,即缓动动画只能执行减速,不能执行加速。 ... 博文 来自: ...
1-10
js 匀速/缓动动画 简单封装 阅读数 5805 .box1 { width: 300px; height:...问了为什么网上大量使用ThreadLocal的源码都会加上private static?他被难住了,...
5896
.box1 { width: 300px; height: 300px; padding: 100px; margin: 100px; position: relative; border: 100px solid #000;
ramosTears123的博客
105
效果图:源代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; ...
12-1
本文将从封装缓动动画的以下几个部分进行封装(1、单个属性,2、多个属性,3、缓动框架之回调函数,4、缓动框架之层级与透明度)首先:获取元素样式的兼容方式getStyker ...
12-31
用js原生实现多个属性的缓动动画函数 阅读数 395 ...这一章我将讲述一些如何将透明度的变化也封装到调用...问了为什么网上大量使用ThreadLocal的源码都会加上...
08-2910-235-6
简单封装分页功能JQuery插件(含源码) 1篇 如何理解浏览器中的js加载? 1篇 ...工具开始封装起来,偶然看到一个动画,就想起来了,封装一下,玩一玩这个缓动动画....
6-10
原生Js缓动动画封装过程及注释 效果图:源代码:<!DOCTYPE html> Title *{ margin: 0; ... 前端精髓 825 原生JS封装动画 用过jQuery的都知道,jQuery...
不忘初心
486
简单的运动函数var demo1=document.getElementById("demo1"); demo1.onmouseover=function(){ startMove(0); } demo1.onmouseout=function(){ startMove(-320); }var timer//全局变量function
u013067420的博客
3620
一直对jQuery中的animate感兴趣,虽然经常使用,但是一直没有研究过原理,后来发现jQuery也可以使用easing.js库,就决心研究一下原生js怎么调用Easing库,比如说BounceOut效果。像平时所用的echarts和chart.js都用到了缓动函数库easing,还有其他的控件等等,其实原理都一样,连函数都一样。Easing原理我也不过多描述了,简单理解就是想象一个直角坐标...
1-30
这个函数最好写在一个js文件里面,这样就可以方便去调用,这里面需要传递三个参数,一个是对象,就是要做缓动动画的元素,还有一个就是一个json,由于通过json传递过来...
kuke_kuke的博客
366
本文将从封装缓动动画的以下几个部分进行封装(1、单个属性,2、多个属性,3、缓动框架之回调函数,4、缓动框架之层级与透明度)首先:获取元素样式的兼容方式getStyker //获取任意类型的CSS样式的属性值
a63438840的博客
10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang=...
Time_Ho的学习日记
32
*JavaScript原生定时器实现动画的缓动效果*原理很简单通过定时器修改边距达到移动动画效果
大桶爆米花eee
352
封装一个JS文件animate.js//缓动动画function animate(obj , target) { //关闭定时器 clearInterval(obj.timer); console.log("2222"); obj.timer = setInterval(function(){ //速度是距离的1/10 var...
01-08
weixin_44551909的博客
615
JS碰撞事件与CSS3动画结合的小游戏开发工具与关键技术:VisualStudio;JS,CSS3作者:刘家龙撰写时间:2019/1/20下面跟大家分享一个简单的JS碰撞事件与css3动画结合的小游戏,这个游戏通过鼠标拖动小球来判断div与div之间是否发生碰撞来弹出提示框的小游戏,下面是游戏效果:小球是靠鼠标拖动的,也可以通过控制上下左右4个键来实现移动,图中的轮子和两个大的div......
07-11Sclifftop - 保安大队长
1658
缓动tween结构很简单,它是基于初始值,结束值,作用域公式来实现的。缓动函数包括quad、cubic、sine、quint、circt、bounce、back、expo、elastic、quart等等转载自:https://www.jianshu.com/p/c157c5898153 Zszen图示下图所示,所有公式的作用域都是从0~1简介首先说一下一般引擎下的twe......
qq_43227618的博客
205