百搜论坛欢迎您的加入!
adimg adimg
 
昨日:篇  今日:篇   总帖:篇   会员:
博主最大Lv63   
js缓动动画封装源码     

主要用到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

JS画的实现,就是通过一个公式来实现的:begin = begin + (end - begin) * 0.2;这个公式里面,begin就是画开始的位置,end就是画结束的位置,0.2就是个系数,不是固定值,不超过1就行,系数越大,画运就越快,这个看着貌似挺高大上,其实没啥,就是控制了begin等于end的速度,它的终止条件就是beng===end,放一个实例:&......

Amy的博客

 3655

js--画、匀速运、无缝滚

匀速运: function $(id) { return document.getElementById(id) } var num = 0; var timer = null; //给button设置点击事件 $("btn").onclick = function () { //设置画 每30s调用下面的

js 匀速/画 简单封装_心郎的博客-CSDN博客

5-1

// 1.有非常逼真的效果,实现的画效果更细腻。 // 2.如果不清除定时器...js封装源码主要用到offsetLeft、Math.ceil、Math.floor、Math.abs。注意...

Javascript原生代码——封装:匀速、速及升级_cin..._CSDN博客

1-6

js 匀速/画 简单封装 阅读数 5802 .box1 { width: 300px; height:...问了为什么网上大量使用ThreadLocal的源码都会加上private static?他被难住了,...

stevenxyy的博客

 153

js封装-animate

// var timerId = null;// 封装画的函数function animate(element, target) {// 通过判断,保证页面上只有一个定时器在执行画if (element.timerId) {clearInterval(element.timerId);element.timerId = null;}element.timerId = setIn...

zl13015214442的博客

 303

js实现

我们都知道实现画的原理就是:盒子未来的位置 = 盒子当前的位置+步长。那么画实现就是步长越来越小。盒子慢慢停下的效果。根据这个原理实现一个的效果:&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;...

原生Js封装过程及注释_原生js,封装,详..._CSDN博客

1-7

利用自己所学的内容,将画和均速画结合,封装了一个JS原生的画函数。但是这个函数有很大的问题,即画只能执行减速,不能执行加速。 ... 博文 来自: ...

js 框架封装_ITzhongzi的博客-CSDN博客

1-10

js 匀速/画 简单封装 阅读数 5805 .box1 { width: 300px; height:...问了为什么网上大量使用ThreadLocal的源码都会加上private static?他被难住了,...

 5896

js 匀速/画 简单封装

.box1 { width: 300px; height: 300px; padding: 100px; margin: 100px; position: relative; border: 100px solid #000;

ramosTears123的博客

 105

原生Js封装过程及注释

效果图:源代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; ...

JavaScript封装画函数 - kuke_kuke的博客 - CSDN博客

12-1

本文将从封装画的以下几个部分进行封装(1、单个属性,2、多个属性,3、框架之回调函数,4、框架之层级与透明度)首先:获取元素样式的兼容方式getStyker ...

原生JS——画函数封装(任意个属性、层级、透明度..._CSDN博客

12-31

js原生实现多个属性的画函数 阅读数 395 ...这一章我将讲述一些如何将透明度的变化也封装到调用...问了为什么网上大量使用ThreadLocal的源码都会加上...

Html5+CSS3+js画小游戏全部源码,HTML5游戏开发

08-29

JS文字画特效源码

10-23

一个简单的函数封装--画_前端_qq_42181069的博客-CSDN博客

5-6

简单封装分页功能JQuery插件(含源码) 1篇 如何理解浏览器中的js加载? 1篇 ...工具开始封装起来,偶然看到一个画,就想起来了,封装一下,玩一玩这个画....

js原生,封装_仗剑天涯,从摘要开始-CSDN博客

6-10

原生Js封装过程及注释 效果图:源代码:<!DOCTYPE html> Title *{ margin: 0; ... 前端精髓 825 原生JS封装画 用过jQuery的都知道,jQuery...

不忘初心

 486

JS封装

简单的运函数var demo1=document.getElementById("demo1"); demo1.onmouseover=function(){ startMove(0); } demo1.onmouseout=function(){ startMove(-320); }var timer//全局变量function

u013067420的博客

 3620

原生js使用函数库easing画效果

一直对jQuery中的animate感兴趣,虽然经常使用,但是一直没有研究过原理,后来发现jQuery也可以使用easing.js库,就决心研究一下原生js怎么调用Easing库,比如说BounceOut效果。像平时所用的echarts和chart.js都用到了函数库easing,还有其他的控件等等,其实原理都一样,连函数都一样。Easing原理我也不过多描述了,简单理解就是想象一个直角坐标...

封装_mengxianglong123的博客-CSDN博客

1-30

这个函数最好写在一个js文件里面,这样就可以方便去调用,这里面需要传递三个参数,一个是对象,就是要做画的元素,还有一个就是一个json,由于通过json传递过来...

kuke_kuke的博客

 366

JavaScript封装画函数

本文将从封装画的以下几个部分进行封装(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实现

*JavaScript原生定时器实现画的效果*原理很简单通过定时器修改边距达到移画效果

大桶爆米花eee

 352

JS画相关

封装一个JS文件animate.js//画function animate(obj , target) { //关闭定时器 clearInterval(obj.timer); console.log(&quot;2222&quot;); obj.timer = setInterval(function(){ //速度是距离的1/10 var...

JavaScript Tween算法及效果

01-08

weixin_44551909的博客

 615

JS碰撞事件与CSS3画结合的小游戏

JS碰撞事件与CSS3画结合的小游戏开发工具与关键技术:VisualStudio;JS,CSS3作者:刘家龙撰写时间:2019/1/20下面跟大家分享一个简单的JS碰撞事件与css3画结合的小游戏,这个游戏通过鼠标拖小球来判断div与div之间是否发生碰撞来弹出提示框的小游戏,下面是游戏效果:小球是靠鼠标拖的,也可以通过控制上下左右4个键来实现移,图中的轮子和两个大的div......

函数与关键帧

07-11

Sclifftop - 保安大队长

 1658

Tween画及函数

tween结构很简单,它是基于初始值,结束值,作用域公式来实现的。函数包括quad、cubic、sine、quint、circt、bounce、back、expo、elastic、quart等等转载自:https://www.jianshu.com/p/c157c5898153 Zszen图示下图所示,所有公式的作用域都是从0~1简介首先说一下一般引擎下的twe......

qq_43227618的博客

 205

js画代码基础效果

 0  已被阅读了1138次  楼主 2020-06-12 15:13:58
回复列表

回复:js缓动动画封装源码

联系站长 友链申请桂ICP备19000949号-1     桂ICP备19000949号-1
您的IP:52.90.40.84,2024-03-29 10:19:37,Processed in 0.01867 second(s).
免责声明: 本网不承担任何由内容提供商提供的信息所引起的争议和法律责任。
Powered by HadSky 7.12.9
已有0次打赏
(0) 分享
分享
取消
免责声明
1、本站资源,均来自网络,版权归原作者,所有资源和文章仅限用于学习和研究目的 。
2、不得用于商业或非法用途,否则,一切责任由该用户承担 !
如果觉得本文还不错请点个赞或者打赏点轻币哦~
拒绝伸手党,拿走请回复,尊重楼主,尊重你我他~

侵权删除请致信 E-Mail:207882320@qq.com