动画库tween.js

var Tween = {

Linear:function (start,alter,curTime,dur) {return start+curTime/dur*alter;},//最简单的线性变化,即匀速运动

Quad:{//二次方缓动

easeIn:function (start,alter,curTime,dur) {

return start+Math.pow(curTime/dur,2)*alter;

},

easeOut:function (start,alter,curTime,dur) {

var progress =curTime/dur;

return start-(Math.pow(progress,2)-2*progress)*alter;

},

easeInOut:function (start,alter,curTime,dur) {

var progress =curTime/dur*2;

return (progress<1?Math.pow(progress,2):-((--progress)*(progress-2) - 1))*alter/2+start;

}

},

Cubic:{//三次方缓动

easeIn:function (start,alter,curTime,dur) {

return start+Math.pow(curTime/dur,3)*alter;

},

easeOut:function (start,alter,curTime,dur) {

var progress =curTime/dur;

return start-(Math.pow(progress,3)-Math.pow(progress,2)+1)*alter;

},

easeInOut:function (start,alter,curTime,dur) {

var progress =curTime/dur*2;

return (progress<1?Math.pow(progress,3):((progress-=2)*Math.pow(progress,2) + 2))*alter/2+start;

}

},

Quart:{//四次方缓动

easeIn:function (start,alter,curTime,dur) {

return start+Math.pow(curTime/dur,4)*alter;

},

easeOut:function (start,alter,curTime,dur) {

var progress =curTime/dur;

return start-(Math.pow(progress,4)-Math.pow(progress,3)-1)*alter;

},

easeInOut:function (start,alter,curTime,dur) {

var progress =curTime/dur*2;

return (progress<1?Math.pow(progress,4):-((progress-=2)*Math.pow(progress,3) - 2))*alter/2+start;

}

},

Quint:{//五次方缓动

easeIn:function (start,alter,curTime,dur) {

return start+Math.pow(curTime/dur,5)*alter;

},

easeOut:function (start,alter,curTime,dur) {

var progress =curTime/dur;

return start-(Math.pow(progress,5)-Math.pow(progress,4)+1)*alter;

},

easeInOut:function (start,alter,curTime,dur) {

var progress =curTime/dur*2;

return (progress<1?Math.pow(progress,5):((progress-=2)*Math.pow(progress,4) +2))*alter/2+start;

}

},

Sine :{//正弦曲线缓动

easeIn:function (start,alter,curTime,dur) {

return start-(Math.cos(curTime/dur*Math.PI/2)-1)*alter;

},

easeOut:function (start,alter,curTime,dur) {

return start+Math.sin(curTime/dur*Math.PI/2)*alter;

},

easeInOut:function (start,alter,curTime,dur) {

return start-(Math.cos(curTime/dur*Math.PI/2)-1)*alter/2;

}

},

Expo: {//指数曲线缓动

easeIn:function (start,alter,curTime,dur) {

return curTime?(start+alter*Math.pow(2,10*(curTime/dur-1))):start;

},

easeOut:function (start,alter,curTime,dur) {

return (curTime==dur)?(start+alter):(start-(Math.pow(2,-10*curTime/dur)+1)*alter);

},

easeInOut:function (start,alter,curTime,dur) {

if (!curTime) {return start;}

if (curTime==dur) {return start+alter;}

var progress =curTime/dur*2;

if (progress < 1) {

return alter/2*Math.pow(2,10* (progress-1))+start;

} else {

return alter/2* (-Math.pow(2, -10*--progress) + 2) +start;

}

}

},

Circ :{//圆形曲线缓动

easeIn:function (start,alter,curTime,dur) {

return start-alter*Math.sqrt(-Math.pow(curTime/dur,2));

},

easeOut:function (start,alter,curTime,dur) {

return start+alter*Math.sqrt(1-Math.pow(curTime/dur-1));

},

easeInOut:function (start,alter,curTime,dur) {

var progress =curTime/dur*2;

return (progress<1?1-Math.sqrt(1-Math.pow(progress,2)):(Math.sqrt(1 - Math.pow(progress-2,2)) + 1))*alter/2+start;

}

},

Elastic: {//指数衰减的正弦曲线缓动

easeIn:function (start,alter,curTime,dur,extent,cycle) {

if (!curTime) {return start;}

if ((curTime==dur)==1) {return start+alter;}

if (!cycle) {cycle=dur*0.3;}

var s;

if (!extent || extent< Math.abs(alter)) {

extent=alter;

s = cycle/4;

} else {s=cycle/(Math.PI*2)*Math.asin(alter/extent);}

return start-extent*Math.pow(2,10*(curTime/dur-1)) * Math.sin((curTime-dur-s)*(2*Math.PI)/cycle);

},

easeOut:function (start,alter,curTime,dur,extent,cycle) {

if (!curTime) {return start;}

if (curTime==dur) {return start+alter;}

if (!cycle) {cycle=dur*0.3;}

var s;

if (!extent || extent< Math.abs(alter)) {

extent=alter;

s =cycle/4;

} else {s=cycle/(Math.PI*2)*Math.asin(alter/extent);}

return start+alter+extent*Math.pow(2,-curTime/dur*10)*Math.sin((curTime-s)*(2*Math.PI)/cycle);

},

easeInOut:function (start,alter,curTime,dur,extent,cycle) {

if (!curTime) {return start;}

if (curTime==dur) {return start+alter;}

if (!cycle) {cycle=dur*0.45;}

var s;

if (!extent || extent< Math.abs(alter)) {

extent=alter;

s =cycle/4;

} else {s=cycle/(Math.PI*2)*Math.asin(alter/extent);}

var progress = curTime/dur*2;

if (progress<1) {

return start-0.5*extent*Math.pow(2,10*(progress-=1))*Math.sin( (progress*dur-s)*(2*Math.PI)/cycle);

} else {

return start+alter+0.5*extent*Math.pow(2,-10*(progress-=1)) * Math.sin( (progress*dur-s)*(2*Math.PI)/cycle);

}

}

},

Back:{

easeIn: function (start,alter,curTime,dur,s){

if (typeof s == "undefined") {s = 1.70158;}

return start+alter*(curTime/=dur)*curTime*((s+1)*curTime - s);

},

easeOut: function (start,alter,curTime,dur,s) {

if (typeof s == "undefined") {s = 1.70158;}

return start+alter*((curTime=curTime/dur-1)*curTime*((s+1)*curTime + s) + 1);

},

easeInOut: function (start,alter,curTime,dur,s){

if (typeof s == "undefined") {s = 1.70158;}

if ((curTime/=dur/2) < 1) {

return start+alter/2*(Math.pow(curTime,2)*(((s*=(1.525))+1)*curTime- s));

}

return start+alter/2*((curTime-=2)*curTime*(((s*=(1.525))+1)*curTime+ s)+2);

}

},

Bounce:{

easeIn: function(start,alter,curTime,dur){

return start+alter-Tween.Bounce.easeOut(0,alter,dur-curTime,dur);

},

easeOut: function(start,alter,curTime,dur){

if ((curTime/=dur) < (1/2.75)) {

return alter*(7.5625*Math.pow(curTime,2))+start;

} else if (curTime < (2/2.75)) {

return alter*(7.5625*(curTime-=(1.5/2.75))*curTime + .75)+start;

} else if (curTime< (2.5/2.75)) {

return alter*(7.5625*(curTime-=(2.25/2.75))*curTime + .9375)+start;

} else {

return alter*(7.5625*(curTime-=(2.625/2.75))*curTime + .984375)+start;

}

},

easeInOut: function (start,alter,curTime,dur){

if (curTime< dur/2) {

return Tween.Bounce.easeIn(0,alter,curTime*2,dur) *0.5+start;

} else {

return Tween.Bounce.easeOut(0,alter,curTime*2-dur,dur) *0.5 + alter*0.5 +start;

}

}

}

};

转载于:https://www.cnblogs.com/iceyhu/p/4522153.html

动画库tween.js相关推荐

  1. JavaScript 3D动画库three.js示例篇

    JavaScript 3D动画库three.js示例篇 本文主要介绍JavaScript 3D动画库three.js示例,关于three.js库基础知识可参见:JavaScript 3D动画库thre ...

  2. tween.js一个平滑动效果的js动画库

    tween.js一个平滑动效果的js动画库 tween.js是什么? tween.js是一款可生成平滑动效果的js动画库,允许以平滑的方式修改元素的属性值. tween.js达到什么效果? 它可以通过 ...

  3. 使用css3和tween.js二种方式实现照片翻转

    照片翻转的二种方式 最近在学习使用动画效果,经常去鑫空间翻看大神写得博客,最近看到最新3月份出炉的博客–小tips: 在canvas上实现元素图片镜像翻转动画效果,我就想到自己也有需要展示照片的时候, ...

  4. Threejs进阶之十二：Threejs与Tween.js结合创建动画

    tween.js介绍 Tween.js是一个可以产生平滑动画效果的js库,其官方地址为:https://github.com/tweenjs/tween.js/,可以将源码下载后,可以在tween.j ...

  5. tween.js 用户指南 - 与 Three.js 配合使用的补间动画库

    tween.js 用户指南 - 与 Three.js 配合使用的补间动画库 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途- ...

  6. js svg语音波动动画_11 个非常受欢迎的 JavaScript 动画库，值得学习！

    1.Three.js 超过46K的星星,这个流行的库提供了非常多的3D显示功能,以一种直观的方式使用 WebGL.这个库提供了. .CSS3D 和 WebGL渲染器,让我们在设备和浏览器之间创建丰富的 ...

  7. animate inater插件_基于animate.css动画库的全屏滚动小插件，适用于vue.js(移动端、pc)项目...

    功能简介 基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...

  8. animejs走马灯_web前端攻城狮超爱的JS动画库插件—anime.js

    作为一名web前端攻城狮,除了完成日常业务逻辑处理之外,也会去注重一些用户体验交互的问题.特别是如今web前端的发展很快,很多优秀js插件层出不穷.对于web前端开发者,也要会利用这些现有的js插件, ...

  9. 小程序集成Three.js，使用npm安装gsap动画库

    0.视频演示 three.js集成gsap创建物体动画 gsap作为简单易用的补间动画库,获得开发者一致好评. 在小程序中,我们集成了Three.js第三方库,可以创建和加载模型及场景,但是做动画还是 ...

  10. JavaScript动画库：Anime.js

    前言 今天简单学习一下JavaScript动画库:Anime.js.官网的介绍是: Anime.js (/ˈæn.ə.meɪ/) 是一个轻量的JavaScript 动画库, 拥有简单而强大的API. ...

最新文章

  1. 听说今天你要答辩了？哈哈哈哈哈哈哈哈哈
  2. 详略。。设计模式1——单例。。。。studying
  3. OC-NSString从文件中读取字符串
  4. Zookeeper的功能以及工作原理 (转自：http://www.cnblogs.com/felixzh/p/5869212.html)
  5. ChemDraw教程：如何查看和删除俗名
  6. Source Insight下载及注册码
  7. linux mysql5.5.50_linux下安装mysql5.5
  8. FreeMarker整合Spring 3（转）
  9. python做词典_python实现电子词典
  10. 基于Java的旅游信息管理系统的设计与实现
  11. （转）python基础之迭代器协议和生成器（一）
  12. Linux下的任务管理器-top命令
  13. 提示Could not calculate build plan Plugin org.apache.maven.pluginsmaven-resources
  14. 华为云物联网设备接入及OBS使用
  15. 关于UWB汽车钥匙介绍
  16. JavaScript中的浅拷贝与深拷贝（手写浅拷贝和深拷贝）
  17. 浙大版C语言PTA练习答案
  18. 计算机编程的艺术：The Art of Computer Programming
  19. 运维人生攻城狮的第二次搬家
  20. 案例 | 沃尔玛 x 腾讯云 Serverless 应用实践，全力保障消费者购物体验

热门文章

  1. paip.验证码识别的意义
  2. Julia: fill, repeat, repmat
  3. Julia: 引用、copy与数组
  4. Julia: Beginning deep learning with 500 lines of Julia
  5. 阿里云产品经理吴华剑：SLS 的产品功能与发展历程
  6. 一文看懂：边缘计算究竟是什么？为何潜力无限？（下）
  7. pyqt 子窗口控制主窗口绘图_PyQtGraph如何关闭绘图窗口/关闭所有绘图窗口？
  8. 【优化算法】哈里斯鹰算法（HHO）【含Matlab源码 1309期】
  9. 【数字信号处理】基于matlab GUI数字信号处理系统【含Matlab源码 1088期】
  10. 【图像去噪】基于matlab GUI中值+均值+维纳+小波滤波图像去噪【含Matlab源码 753期】