JS实现div的抖动:缓动式抖动
代码如下:
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1 {
width: 100px;
height: 100px;
position: absolute;
left: 400px;
top: 200px;
background: red;
}
</style>
</head> <body>
<div id="div1"></div> <script>
var div1 = document.querySelector('#div1'); document.onclick = function() { /*
* 抖动:
* 1. 每次改变一下元素的位置
* 按照一个中心点进行偏移,假设中心点left原始是400,那么每次就以left:400为中心做位置的移动
* 380 -> 420
* */ // div1.style.left = '380px';
// div1.style.left = '420px'; var a = true; setInterval(function() { /*
* 根据a的值,做不同的设置
* */
div1.style.left = (a ? 380 : 420) + 'px';//这样可以实现小幅度的抖动效果,但是大幅度的抖动就会显得很生硬
a = !a; }, 30); }
/*缓动代码*/
var tween = {
linear:function(t,b,c,d){
return c*t/d + b;
},
easeIn:function(t,b,c,d){
return c * ( t /= d ) * t + b;
},
strongEaseIn:function(t,b,c,d){
return c * ( t /= d ) * t * t * t * t + b;
},
strongEaseOut:function(t,b,c,d){
return c * ( ( t = t / d -1 ) * t * t * t * t +1 ) + b;
},
sineaseIn:function(t,b,c,d){
return c * ( t /= d ) * t * t + b;
},
sineaseOut:function(t,b,c,d){
return c * ( ( t = t / d -1 ) * t * t *t +1 ) + b;
}
}; var Animate = function(dom){
this.dom = dom;
this.startTime = 0;
this.startPos = 0;
this.endPos = 0;
this.propertyName = null;
this.easing = null;
this.duration = null;
} Animate.prototype.start = function(propertyName,endPos,duration,easing){
this.startTime = +new Date;
this.startPos = this.dom.getBoundingClientRect()[propertyName];
this.propertyName = propertyName;
this.endPos = endPos;
this.duration = duration;
this.easing = tween[easing]; var self = this;
var timeId = setInterval(function(){
if(self.step() === false){
clearInterval(timeId);
}
},19);
} Animate.prototype.step = function(){
var t = +new Date;
if(t>=this.startTime + this.duration){
this.update(this.endPos);
return false;
}
var pos = this.easing(t-this.startTime, this.startPos, this.endPos - this.startPos, this.duration);
this.update(pos);
} Animate.prototype.update = function(pos){
this.dom.style[this.propertyName] = pos + 'px';
}
var b = true;
var div = document.getElementById('div');
var animate = new Animate(div);
setInterval(function() {
animate.start('left',(a ? 380 : 420),1000,'strongEaseOut');//如果用缓动的效果来实现较大幅度的抖动,那视觉上就可以看到更舒适了
a = !a;
}, 30);
</script> </body> </html>
JS实现div的抖动:缓动式抖动的更多相关文章
- js多物体多方向缓动动画加带有回调机制
一.获取一组div元素 var boxs = document.getElementsByTagName('div'); 二.封装获取属性值的函数 function getStyle(dom, att ...
- JS特效@缓动框架封装及应用
| 版权声明:本文为博主原创文章,未经博主允许不得转载. 一.变量CSS样式属性获取/赋值方法 给属性赋值:(既能获取又能赋值) 1)div.style.width 单个赋值:点语法,这个方法比较固定 ...
- JS —— 轮播图中的缓动函数的封装
轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~ 我们从需求的角度开始,首先给出一个简单需求: 1. ...
- GSAP JS基础教程--使用缓动函数
今天来了解一下缓动easeing函数. 开始,如果你还没有GSAP的类包,可以到GreenSock的官网去下载最新版本的类包,或者直接点击这里来下载 学习之前,先来准备一下: <!DO ...
- tween.js缓动(补间动画)
一.理解tween.js 如果看到上面的已经理解了,可以跳过下面的部分.下面为对Tween.js的解释 下面就介绍如何使用这个Tween了,首先b.c.d三个参数(即初始值,变化量,持续时间)在缓动开 ...
- JS-特效 ~ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle(ele,attr) ;、缓动动画封装
知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top : if (true === a)tr ...
- JS实现可用滑块滑动的缓动图
尝试模仿京东的"发现好货"模块的可用滑块滑动的缓动图 JS代码 function $(id) { return document.getElementById(id); } //缓 ...
- 利用tween.js算法生成缓动效果
在讲tween类之前,不得不提的是贝塞尔曲线了.首先,贝塞尔曲线是指依据四个位置任意的点坐标绘制出的一条光滑曲线.它在作图工具或动画中中运用得比较多,例如PS中的钢笔工具,firework中的画笔等等 ...
- animation js控制 缓动效果
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>缓动 ...
随机推荐
- React组件传值
React的单向数据流与组件间的沟通. 首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则. 先介绍单向数据流吧. React单向数据流: React是单向数据流,数据主要从父 ...
- 【搜索1】P1605 迷宫
题目背景 迷宫 [问题描述] 给定一个N*M方格的迷宫,迷宫里有T处障碍,障碍处不可通过.给定起点坐标和 终点坐标,问: 每个方格最多经过1次,有多少种从起点坐标到终点坐标的方案.在迷宫 中移动有上下 ...
- C++类中的Static关键字
静态成员是可以独立访问的,也就是说,无须创建任何对象实例就可以访问,而静态成员函数可不建立对象就可以被使用. 或者说静态函数与一般函数没有太大的区别,只是访问有限制,静态变量跟一般的全局变量的区别 ...
- 源码包安装mysql5.6
含有的命令:wget,tar,cp,groupadd,useradd,chown,service,chkconfig,exportsource,mysql_secure_installation,my ...
- Appium-Python-Windows环境搭建笔记
Appium版本:1.11.0 操作系统:Windows7-64位 开发语言:Python 3.7.2 测试应用平台:安卓 5.1.1 Appium服务端 一.JDK 也许你会觉得很奇怪,我搭建Pyt ...
- Python Learning - Three
1. Set Set is a collection which is unordered and unindexed. No duplicate members In Python sets ar ...
- yield关键字
1.yield语句有两种形式 (1)yield return <expression>;一次返回一个元素 运行yield return 语句时,会返回一个 值,并记录当前位置及保留该值.下 ...
- NoSQL数据库常见分类
1.列式数据库HBaseBigTable2.K-V数据库RedisCassandraLevelDBMemCacheEhcache3.文档数据库MongoDBCouchDB4.全文搜索引擎Elastic ...
- 4. Scala程序流程控制
4.1 程序流程控制说明 在程序中,程序运行的流程控制决定程序是如何执行的,是我们必须掌握的,主要有三大流程控制语句,顺序控制,粉质控制,循环控制 温馨提示:Scala语言中控制结构和Java语言中的 ...
- odoo定时发送邮件
采购订单延迟或者存在部分到货的情况,定时发送邮件给相关人员 包含,采购订单明细,订单数量,已到货数量,未到货数量 <?xml version="1.0" encoding=& ...