让div运动起来 js实现缓动效果

2024-09-27 16:42:32

本文实例为大家分享了js实现缓动效果的具体代码，供大家参考，具体内容如下

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 div = document.getElementById('div');
var animate = new Animate(div);
animate.start('left',500,1000,'strongEaseOut');

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

javascript中的缓动效果实现程序

常见的动画有四种类型,介绍一下: linear:线性动画,即匀速 easeIn:速度从小到大,即淡入 easeOut :速度从大到小,即淡出 easeInOut:开始时速度从小到大,结束时速度从大到小,即淡入淡出其实说到缓动,就不得不提Robert Penner,他发明了N多缓动公式,举个例子我还是解释一下吧: 设当前变化量为X,则 t / d = X / c,所以X = c * t / d,然后X + b就可以获得当前属性值再看一个稍复杂的: 这个有淡入效果,也就是说动画开始时,值的变化
js实现带缓动动画的导航栏效果

话不多说,请看实例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> ul,li { padding: 0; margin: 0; } li { list-style: none; } #box{ height: 48px; width: 900px; bac
javascript 45种缓动效果非常酷

参数类型说明 el element 必需,为页面元素 begin number 必需,开始的位置 change number 必需,要移动的距离 duration number 可选,缓动效果持续时间,默认是500ms.建议取300~1000ms. field string 必需,要发生变化的样式属性.请在top,left,bottom,right,width与height中选择. ftp number 可选,每秒进行多少帧动画,默认50帧,保证流畅播放.一些参考资料,日本动画1秒36帧,中
JS+HTML5手机开发之滚动和惯性缓动实现方法分析

本文实例讲述了JS+HTML5手机开发之滚动和惯性缓动实现方法.分享给大家供大家参考,具体如下: 1. 滚动以下是三种实现方式: 1) 利用原生的css属性 overflow: scroll div id= parent style = overflow:scroll; divid='content'内容区域/div /div Notice: 在android 有bug, 滚动完后会回退到最顶端的内容区域,解决办法是使用后两种方式实现 2)js 编程实现思路:对比手指在屏幕上移动前后位置变化
JS轮播图中缓动函数的封装

轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~ 我们从需求的角度开始,首先给出一个简单需求: 1.我想让页面中的一个盒子从开始的位置匀速向右运动到200px的地方,该怎么实现? 分析: 1)我们需要知道盒子在哪个地方,这个可以通过offsetLeft属性去获取: 2)要让盒子匀速运动,对于js肯定需要setInterval了: 3)要让盒子向右边跑起来?那就是需要不停改变盒子与左边起始点的距离,
javascript简易缓动插件(源码打包)

要求如下: 可以开始.暂停(线性.非线性tween都支持).继续.结束支持多个样式并行最好不依赖于某个框架下运行文件尺寸越小越好他找了一下现有的一些插件或者库,鲜有能满足或者比较均衡的,我在这个要求下,写了一个比较简陋的动画组件,基本满足了这个需求.先上代码在线演示:http://demo.jb51.net/js/2012/animate/打包下载:animate_jquery.rarhtml部分: 复制代码代码如下: <!DOCTYPE html> <html> &l
JavaScript Tween算法及缓动效果第1/2页

我这里要教大家的是怎么利用flash的Tween类的算法,来做js的Tween算法,并利用它做一些简单的缓动效果. Tween Tween类型: Linear Quadratic Cubic Quartic Quintic Sinusoidal Exponential Circular Elastic Back Bounce ease类型: easeIn easeOut easeInOut /* 算法来源:http://www.robertpenner.com/easing/ */ var Tw
让div运动起来 js实现缓动效果

本文实例为大家分享了js实现缓动效果的具体代码,供大家参考,具体内容如下 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:
js实现缓动动画

本文实例为大家分享了js实现缓动动画的具体代码,供大家参考,具体内容如下利用定时器来控制元素的offsetLeft的值,offsetLeft = 开始位置 + (最终位置 - 开始位置)* 缓动系数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>
javascript实现悬浮跟随框缓动效果

悬浮跟随框是我们在网页中经常见到的效果,我们还是使用上一实例中的运动框架去实现. 1.定义一个运动函数,当触发时调用,并且传递一个目标位置作为参数2.运动函数内部,调用定时函数,在定时函数内部,先求出元素位置与目标位置的距离差,然后除以一个数值作为速度(由于距离差一直在缩小,所以速度值也一直在变小,从而达到缓动效果)3.由于网页上位置设置最小单位是1px,所以在步骤二中的运算可能会出现小数的情况,我们需要对小数进行处理,否则元素到达的位置总是和目标位置有1px的差距. <!DOCTYPE HTM
js实现拖动缓动效果

话不多说,先上效果,一个体验非常好的拖拽缓动的效果,让页面提升一个档次. 这个效果看似很简单,到也困惑了很长时间,为什么别人写出来的拖拽体验为什么这么好? 直到我自己实现了以后,才发现,原来我想的实现方式不对.接下来,我通过简短的几句话,来提供这个功能的实现思路. 首先,我们要明白,我们鼠标拖拽是在一个2d平面上拖拽 2d平面只有x轴和y轴,而且获取的拖拽值也是基于平面的像素获取的.所以,我们第一步,先通过鼠标事件来获取到当前的拖拽的长度像素. 首先,绑定鼠标按下事件,来获取到鼠标基于浏览器窗口
CSS3使用过度动画和缓动效果案例讲解

transition过渡: 四个小属性属性意义 transition-property 哪些属性要过渡 transition-duration 动画时间 transition-timing-function 动画变化曲线(缓动效果) transition-delay 延迟时间 transition过度属性是CSS3浓墨重彩的特性,过度可以为一个元素在不同样式之间变化自动添加"补间动画" 兼容性IE10开始兼容,移动端兼容良好曾几何时,网页上的动画特效基本都是由JavaScript
tween.js缓动补间动画算法示例

一.理解tween.js 如果看到上面的已经理解了,可以跳过下面的部分.下面为对Tween.js的解释下面就介绍如何使用这个Tween了,首先b.c.d三个参数(即初始值,变化量,持续时间)在缓动开始前,是需要先确定好的. 首先引入一个概念就补间动画 Flash做动画时会用到Tween类,利用它可以做很多动画效果,例如缓动.弹簧等等. tween.js在Flash中可以解释为补间动画. 那么问题来了,什么是补间动画呢? 相信学过Flash的都知道补间动画是flash主要的非常重要的表现手段之一
JavaScript 详解缓动动画的封装与使用

实现过程分析 (1)如何重复调用? 答:封装一个函数,用一次调用一次代码分析: function animate(obj, target, callback) { //详细实现步骤 }; animate :(动画函数) obj(动画对象):给谁添加动画效果 target(目标值):移动到什么距离 callback(回调函数):同时要执行什么功能 (2)如何实现缓动效果?(缓动动画核心算法) 答:移动距离 =(目标值 - 现在盒子位置)/ 10,移动距离会慢慢变小,直至停下,就实现了缓动原理代

让div运动起来 js实现缓动效果

相关推荐

随机推荐