<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tween动画效果</title>
<style type="text/css">
#vvg { text-align: center; font-size: 16px; font-weight: bold; }
#box { width: 520px; height: 50px; border: 1px solid #333; margin: 10px auto; position: relative; }
#sbox { width: 20px; height: 50px; position: absolute; left: 0; background: red; }
#graph{ border: 1px solid #ccc; background: #272424;}
#vvg .radios{width: 520px; margin: 5px auto; font-weight: normal; text-align: left; overflow: hidden;}
#vvg .radios label{ width:103px; float: left;}
#vvg .row1{ background: #cccccc;}
#vvg .row2{ background: #b6b6b6; margin-top: 10px;}
#vvg .btn{padding: 5px 40px;}
</style>
</head>
<body>
<div id="vvg">
<div id="box">
<div id="sbox"> </div>
</div>
<canvas id="graph" width="522px" height="500">你的浏览器不支持canvas</canvas>
<div class="radios row1" id="radio_1">
<label><input type="radio" value="Linear" name="tname" checked>Linear</label>
<label><input type="radio" value="Quad" name="tname">Quad </label>
<label><input type="radio" value="Cubic" name="tname">Cubic </label>
<label><input type="radio" value="Quart" name="tname">Quart </label>
<label><input type="radio" value="Quint" name="tname">Quint</label>
<label><input type="radio" value="Sine" name="tname">Sine</label>
<label><input type="radio" value="Expo" name="tname">Expo</label>
<label><input type="radio" value="Circ" name="tname">Circ</label>
<label><input type="radio" value="Elastic" name="tname">Elastic</label>
<label><input type="radio" value="Back" name="tname">Back</label>
<label><input type="radio" value="Bounce" name="tname">Bounce</label>
</div>
<div class="radios row2" id="radio_2">
<label><input type="radio" value="easeIn" name="tname2" checked>easeIn</label>
<label><input type="radio" value="easeOut" name="tname2">easeOut</label>
<label><input type="radio" value="easeInOut" name="tname2">easeInOut</label>
</div>
<div><input type="button" value="运 行" class="btn" id="run"></div>
</div>
<script type="text/javascript">
// 快捷选择函数
function $(arg, context) {
var tagAll, n, eles = [], i, sub = arg.substring(1);
context = context || document;
if (typeof arg == 'string') {
switch (arg.charAt(0)) {
case '#':
return document.getElementById(sub);
break;
case '.':
if (context.getElementsByClassName) return context.getElementsByClassName(sub);
tagAll = $('*', context);
n = tagAll.length;
for (i = 0; i < n; i++) {
if (tagAll[i].className.indexOf(sub) > -1) eles.push(tagAll[i]);
}
return eles;
break;
default:
return context.getElementsByTagName(arg);
break;
}
}
}
var Tween = {
Linear:function (t, b, c, d) {
return c * t / d + b;
},
Quad:{
easeIn:function (t, b, c, d) {
return c * (t /= d) * t + b;
},
easeOut:function (t, b, c, d) {
return -c * (t /= d) * (t - 2) + b;
},
easeInOut:function (t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t + b;
return -c / 2 * ((--t) * (t - 2) - 1) + b;
}
},
Cubic:{
easeIn:function (t, b, c, d) {
return c * (t /= d) * t * t + b;
},
easeOut:function (t, b, c, d) {
return c * ((t = t / d - 1) * t * t + 1) + b;
},
easeInOut:function (t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
return c / 2 * ((t -= 2) * t * t + 2) + b;
}
},
Quart:{
easeIn:function (t, b, c, d) {
return c * (t /= d) * t * t * t + b;
},
easeOut:function (t, b, c, d) {
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
},
easeInOut:function (t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
}
},
Quint:{
easeIn:function (t, b, c, d) {
return c * (t /= d) * t * t * t * t + b;
},
easeOut:function (t, b, c, d) {
return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
},
easeInOut:function (t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
}
},
Sine:{
easeIn:function (t, b, c, d) {
return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
},
easeOut:function (t, b, c, d) {
return c * Math.sin(t / d * (Math.PI / 2)) + b;
},
easeInOut:function (t, b, c, d) {
return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
}
},
Expo:{
easeIn:function (t, b, c, d) {
return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
},
easeOut:function (t, b, c, d) {
return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
},
easeInOut:function (t, b, c, d) {
if (t == 0) return b;
if (t == d) return b + c;
if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
}
},
Circ:{
easeIn:function (t, b, c, d) {
return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
},
easeOut:function (t, b, c, d) {
return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
},
easeInOut:function (t, b, c, d) {
if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
}
},
Elastic:{
easeIn:function (t, b, c, d, a, p) {
if (t == 0) return b;
if ((t /= d) == 1) return b + c;
if (!p) p = d * .3;
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
}
else var s = p / (2 * Math.PI) * Math.asin(c / a);
return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
},
easeOut:function (t, b, c, d, a, p) {
if (t == 0) return b;
if ((t /= d) == 1) return b + c;
if (!p) p = d * .3;
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
}
else var s = p / (2 * Math.PI) * Math.asin(c / a);
return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
},
easeInOut:function (t, b, c, d, a, p) {
if (t == 0) return b;
if ((t /= d / 2) == 2) return b + c;
if (!p) p = d * (.3 * 1.5);
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
}
else var s = p / (2 * Math.PI) * Math.asin(c / a);
if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
}
},
Back:{
easeIn:function (t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c * (t /= d) * t * ((s + 1) * t - s) + b;
},
easeOut:function (t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
},
easeInOut:function (t, b, c, d, s) {
if (s == undefined) s = 1.70158;
if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
}
},
Bounce:{
easeIn:function (t, b, c, d) {
return c - Tween.Bounce.easeOut(d - t, 0, c, d) + b;
},
easeOut:function (t, b, c, d) {
if ((t /= d) < (1 / 2.75)) {
return c * (7.5625 * t * t) + b;
} else if (t < (2 / 2.75)) {
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
} else if (t < (2.5 / 2.75)) {
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
} else {
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
}
},
easeInOut:function (t, b, c, d) {
if (t < d / 2) return Tween.Bounce.easeIn(t * 2, 0, c, d) * .5 + b;
else return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
}
}
}
//Tween中的方法接受4个参数t,b,c,d 。t为初始时间 b、c、d三个参数（即初始值，变化量，持续时间）。返回值为当前位置
//t => time(初始记步次数) b => begin(初始位置) c => change(变化量) d => duration(持续次数)
/*
先通过上面的坐标实例说一下算法原理：
x轴是时间，y轴是当前值，b是y轴的初始值，x轴的初始值是0，t是当前时间。当t（x轴）逐渐增加到达d时，当前值（y轴）会到达目标值（b+c）。
想详细理解的话可以找资料看看吧（貌似跟数学关系比较大）。
下面就介绍如何使用这个Tween了，首先b、c、d三个参数（即初始值，变化量，持续时间）在缓动开始前，是需要先确定好的。
举一个简单的例子，一个div要向右缓动，left初始值是50，那么b就是50，要向右移动100，那c就是100，如果知道的是目标值，例如要向右移动到150，那就把目标值150减初始值b就是变化量c了。
至于d的设置就比较灵活，只要符合t是从0向d递增（或递减）就可以了。
d跟步长配合使用来设置持续时间，例如d设置为100，如果设置步长是1，那么从0到100就有100步，即分100次来完成这个过程，步数越多那么持续时间就越长。
至于t的变化相当于时间的变化，一般是均匀变化的，每次变化都增加一个步长，当t从0递增（或递减）到d时，缓动就结束了。
要注意的是t是从0开始的，设置步长时必须确定t确实能到达d，如果上面的步长是3，那么t就永远都到不了d了。更好的处理是当t等于或超过d之后，就停止定时器并设置当前值为目标值。
*/
// 获取radio值
var radio_1 = function(){
var radios = $('input',$('#radio_1'));
for(var i = 0,n=radios.length;i<n;i++){
if(radios[i].checked == true){
return radios[i].value;
}
}
};
var radio_2 = function(){
var radios = $('input',$('#radio_2'));
for(var i = 0,n=radios.length;i<n;i++){
if(radios[i].checked == true){
return radios[i].value;
}
}
};
// 移动动画
function MoveTo(options) { //参数o,t,b,c,d ***** o为移动对象 t => time(初始记步次数) b => begin(初始位置) c => change(变化量) d => duration(持续次数)
var o = options.o, // 移动对象
t = options.t || 0, // 初始步进
lb = options.lb || 0, // 初始left距离
tb = options.tb || 0, // 初始top距离
lc = options.lc || 500, // left变化的距离
tc = options.tc || 0, // top变化的距离
d = options.d || 500, // 变化次数，次数越多速度越慢
tween = options.tween || Tween.Elastic.easeOut; // 移动方式，套用公式
// 绘图处=============================不用绘图可去掉
var canvas = document.getElementById('graph');
var context = canvas.getContext('2d');
context.clearRect(0,0,500,500);
// ================================== end
(function () {
if (o) {
if (lc > 0){
o.style.left = Math.ceil(tween(t, lb, lc, d)) + "px";
// 绘图区域开始，可以去掉 ==============================
drawPoint({
canvas:canvas,
left:Math.ceil(t*5),
top: Math.ceil(tween(t, lb, lc, d))
})
// 绘图区域结束 ======================================
}
if (tc > 0) {
o.style.top = Math.ceil(tween(t, tb, tc, d)) + "px";
}
if (t < d) {
t++;
setTimeout(arguments.callee, 10);
}
}
})()
}
// 绘制曲线图
function drawPoint(options){
var canvas = options.canvas; //画布
var left = options.left; // time
var top = options.top; // 当前值
var context = canvas.getContext('2d');
// 绘制点
context.fillStyle = '#fff';
context.fillRect(left,top,2,2);
}
$("#run").onclick = function(){
var div = document.getElementById('sbox');
var tween1 = radio_1();
var tween2 = radio_2();
if(!!Tween[tween1][tween2]){
var tween = Tween[tween1][tween2];
}else{
tween = Tween[tween1];
}
var options = {
o:div,
lc:500,
d:100,
tween:tween
}
MoveTo(options);
}
</script>
</body>
</html>
var Tween = {
Circ: {
easeIn: function(t, b, c, d) {
return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
},
easeOut: function(t, b, c, d) {
return c * Math.sqrt(1 - (t = t/d - 1) * t) + b;
},
easeInOut: function(t, b, c, d) {
if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
}
}
};var Tween = {
Circ: {
easeIn: function(t, b, c, d) {
return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
},
easeOut: function(t, b, c, d) {
return c * Math.sqrt(1 - (t = t/d - 1) * t) + b;
},
easeInOut: function(t, b, c, d) {
if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
}
}
};
var shadowWithBall = function(top) {
var top = top || topValue;
numElem.css("backgroundPositionY", top);
}, funFall = function() {
var start = 0, during = 100;
var _run = function() {
start++;
var top = Tween.Circ.easeOut(start, 0, topValue, during);
shadowWithBall(top);
if (start < during){
timer = requestAnimationFrame(_run);
}else{
cancelAnimationFrame(timer);
}
};
_run();
};
funFall();
* t: current time（当前时间）；
* b: beginning value（初始值）；
* c: change in value（变化量）；
* d: duration（持续时间）。
http://www.zhangxinxu.com/GitHub/Tween/tween.js
requestAnimationFrame
这个方法原理其实也就跟setTimeout/setInterval差不多，通过递归调用同一方法来不断更新画面以达到动起来的效果，但它优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销
var wait = function(dtd){
var dtd = $.Deferred(); //在函数内部，新建一个Deferred对象
var tasks = function(){
alert("执行完毕！");
dtd.resolve(); // 改变Deferred对象的执行状态
};
setTimeout(tasks,5000);
return dtd.promise(); // 返回promise对象
};
$.when(wait())
.done(function(){ alert("哈哈，成功了！"); })
.fail(function(){ alert("出错啦！"); });
dtd.resolve()的意思是，将dtd对象的执行状态从"未完成"改为"已完成"，从而触发done()方法。
类似的，还存在一个deferred.reject()方法，作用是将dtd对象的执行状态从"未完成"改为"已失败"，从而触发fail()方法。
相关推荐
这里，`EaseInterpolator.EASE_IN_OUT_QUAD`代表的是二次方的缓动效果，即动画在开始和结束时较慢，中间快速。 需要注意的是，由于开源库可能不适用于所有环境，因此在实际应用中，开发者可能需要对代码进行调试和...
"DOTween"是Unity社区中非常流行的一个开源插件，专门用于实现这样的缓动效果。 DOTween插件提供了丰富的API，使得开发者能够轻松地控制游戏对象的位置、旋转、缩放、颜色、Alpha值以及任何可读写的公共属性的缓动...
在本教程中，我们将探讨如何使用AS3制作超酷的缓动效果，这是一个在动画和游戏设计中广泛使用的技术，它可以为用户带来平滑且引人入胜的视觉体验。 缓动效果，也称为缓动动画或缓动函数，是一种让对象在运动时逐渐...
说明：类似于气泡的弹出动画（根据运用场景设置元素向下对齐，能看出气泡自下向上弹出），弹出之后有来回的缓动效果。 类名：ShuttersAnimation 效果：百叶窗动画 说明：类似于百叶窗的展现动画（一般用于图片...
而图片手风琴效果则是将这一概念应用到了图片展示上，它允许用户通过点击或滑动来逐个查看一组相关的图片，同时伴随着平滑的动画过渡，即“缓动效果”。 缓动效果是动画设计中的一个重要概念，它指的是物体在运动...
7. **动画的缓动效果** 缓动（easing）函数可以改变动画的速度曲线，使动画看起来更加自然。jQuery 自带了一些预设的缓动效果，如 'linear' 和 'swing'，同时也有第三方插件提供更多的缓动选项。 8. **动画与事件*...
比flash内置缓动效果更加实战。代码实现可百度，非常简单。
还可以设置缓动函数（EaseInOut）来改变动画速度。 3. **绑定动画**：将动画绑定到窗体的属性上。对于 `Opacity` 动画，可以绑定到 `Window` 的 `Opacity` 属性；对于大小变化，可以绑定到 `Width` 和 `Height`。 4....
然而，对于希望完全自定义动画效果的开发者，理解并编写自己的缓动函数是非常有价值的技能。 总的来说，"easing动画运动效果.zip" 提供了一种方式，让开发者可以为网页添加各种富有表现力的动画，提高用户体验。...
动画缓动”这一主题。WPF（Windows Presentation Foundation）是.NET Framework的一部分，它提供了一个丰富的用户界面平台，用于构建现代、交互式应用程序。而动画和缓动是增强用户体验、使应用更具动态感的关键元素...
在JavaScript中，缓动效果（Tweening）是一种常见的动画技术，它通过平滑地改变对象的属性（如位置、大小、颜色等）来创建出流畅的过渡效果。这种技术广泛应用于网页、游戏以及各种交互式应用程序中。在这个场景中，...
在JavaScript学习过程中，缓动效果是一种常见的动画技术，它能够为网页元素的显示与隐藏添加平滑过渡，提升用户体验。本篇文章将聚焦于如何利用JavaScript实现缓动效果来控制div的显示与隐藏。 首先，我们需要了解...
这个Demo可能包含了一个按钮，当点击按钮时，一个UI元素（如矩形或图像）会沿着预定路径进行移动，同时应用指数缓动效果。实现这一效果通常需要以下步骤： 1. **定义动画目标**：选择要动画化的UI元素，例如设置`...
这个库提供了丰富的缓动（easing）功能，使得开发者能够轻松地创建复杂的动画效果，从而让网页交互更加生动有趣。 **一、什么是缓动** 缓动是动画中一种重要的技术，它指的是物体在运动过程中的速度变化。在真实...
在JavaScript世界中，jsC的Tween插件为开发者提供了简单易用的API来实现这种缓动效果。下面将详细探讨Tween的核心概念、工作原理以及如何使用jsC的Tween插件。 一、Tween的概念与应用 Tween，源自英文“in-between...
Dotween是一个高效、轻量级的插补器，它可以方便地创建各种缓动效果，包括平滑的移动、旋转和缩放等。 Dotween的核心概念之一就是“Ease Type”，也就是缓冲类型。缓冲类型决定了动画在执行过程中的速度变化，使得...
缓动算法在日常开发中常见于滑动,入场,出场等场景
1. **缓动效果的重要性**：在动画制作中，缓动效果是非常重要的，它可以使得动画更加自然流畅，提升用户体验。 2. **性能考虑**：虽然上述实现简单有效，但在实际项目中，如果需要频繁使用缓动效果，则应考虑使用更...
在IT行业中，缓动（Tweening）是一种动画技术，它用于平滑地改变对象属性，如位置、大小、颜色等，让过渡效果看起来更加自然流畅。"Gtween缓动"是一个专门针对此需求开发的类库，它为开发者提供了一种强大的工具，...