Permalink
Browse files

���baidu.more.Tween����Ч�����Լ�baidu.more.Easing�����㷨

  • Loading branch information...
1 parent 80c8030 commit b40187e0deef84a238a6ac7941aaa65d1caaecdd shichunhua committed Jun 29, 2011
Showing with 754 additions and 0 deletions.
  1. +172 −0 src/tween/easing.js
  2. +201 −0 src/tween/index.html
  3. +125 −0 src/tween/readme.text
  4. +256 −0 src/tween/tween.js
View
@@ -0,0 +1,172 @@
+/**
+ * @author 史纯华(shichunhua)
+ * @fileoverview 效果缓动算法类
+ * 扩展到baidu.more.Easing
+ * @version 1.0.0.0
+ */
+
+baidu.more = baidu.more || {};
+
+(function(){
+ var Easing = {
+ 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 - Easing.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 Easing.Bounce.easeIn(t * 2, 0, c, d) * .5 + b;
+ else return Easing.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b
+ }
+ }
+ }
+
+ // 扩展至baidu.more.Easing
+ baidu.more.Easing = Easing;
+})();
View
@@ -0,0 +1,201 @@
+<!-- Quriks Mode -->
+<!Doctype html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>测试Tween类</title>
+ <script type="text/javascript" src="http://img.baidu.com/js/tangram-1.3.6.js"></script>
+ <script type="text/javascript" src="easing.js"></script>
+ <script type="text/javascript" src="tween.js"></script>
+ <style>
+ body {
+ font:400 12px/20px 宋体;
+ background-color:#F9F9F9;
+ overflow:hidden;
+ }
+ </style>
+ <script>
+ try {
+ document.execCommand("BackgroundImageCache", false, true);
+ } catch (ex) {
+ }
+ </script>
+
+ </head>
+ <body>
+ <div id='tweenBlcok' style="font-size:1px;line-height:1px;width:100px;height:100px;border:1px solid #FFF;background:#999;position:absolute;left:10px;top:10px;"></div>
+
+ <div id='testIconBlock' style="position:absolute;left:200px;top:200px;">
+ <div style="display:inline-block;width:100px;height:100px;background:red;border:1px solid #FFF;"></div>
+ </div>
+ <div style="position:absolute;left:100px;bottom:10px;">
+ <input type="button" value="随机缓冲移动" onclick='moveTo()'>
+ <input type="button" value="果冻效果(300)" onclick='jellyEffect()'>
+ <input type="button" value="掉落效果" onclick='drop()'>
+ <input type="button" value="透明一下" onclick='opacity()'>
+ <input type="button" value="Bling Icon" onclick='bling()'>
+ <input type="button" value="Fly Icon" onclick='iconFly()'>
+ <input type="button" value="背景颜色随机渐变" onclick='iconColor()'>
+ </div>
+
+ </body>
+ <script>
+ var baidu = baidu || T;
+ var Easing = baidu.more.Easing, Tween = baidu.more.Tween;
+ var mainBlcok = document.getElementById('tweenBlcok'), adBlock = document.getElementById('testIconBlock'),
+ mainMoveTween, mainMoveTween2, alphaTween, flyTween, flyTween2;
+ function moveTo(){
+ if(mainMoveTween){
+ mainMoveTween.stop();
+ }
+ if(mainMoveTween2){
+ mainMoveTween2.stop();
+ }
+ var pos = baidu.dom.getPosition(mainBlcok);
+ var w = mainBlcok.clientWidth, h = mainBlcok.clientHeight, toX = Math.ceil(getRandom(0, baidu.page.getWidth() - w)),
+ toY = Math.ceil(getRandom(0, baidu.page.getHeight() - h));
+ mainMoveTween = new Tween(mainBlcok, 'left', pos.left, toX, Easing.Elastic.easeInOut, .8);
+ mainMoveTween2 = new Tween(mainBlcok, 'top', pos.top, toY, Easing.Elastic.easeInOut, .8);
+ }
+
+ function jellyEffect(){
+ if(mainMoveTween){
+ mainMoveTween.stop();
+ }
+ if(mainMoveTween2){
+ mainMoveTween2.stop();
+ }
+ var runTime = .4, margin = 80, effect = Easing.Bounce.easeOut;
+ var elm = document.getElementById('tweenBlcok'), pos = baidu.dom.getPosition(elm), w = elm.clientWidth, h = elm.clientHeight;
+
+ new Tween(elm, 'width', w, w - margin, effect, runTime, function(){
+ new Tween(elm, 'width', w - margin, w, effect, runTime);
+ });
+ new Tween(elm, 'height', h, h - margin, effect, runTime, function(){
+ new Tween(elm, 'height', h - margin, h, effect, runTime);
+ });
+
+ mainMoveTween = new Tween(elm, 'left', pos.left, pos.left + margin/2, effect, runTime, function(){
+ mainMoveTween = new Tween(elm, 'left', pos.left + margin/2, pos.left, effect, runTime);
+ });
+ mainMoveTween2 = new Tween(elm, 'top', pos.top, pos.top + margin/2, effect, runTime, function(){
+ mainMoveTween2 = new Tween(elm, 'top', pos.top + margin/2, pos.top, effect, runTime);
+ });
+ }
+
+ function drop(){
+ var runTime = .4, margin = 80, effect = Easing.Bounce.easeOut;
+ var elm = document.getElementById('tweenBlcok'), pos = baidu.dom.getPosition(elm), h = elm.clientHeight;
+ if(mainMoveTween){
+ mainMoveTween.stop();
+ }
+ if(mainMoveTween2){
+ mainMoveTween2.stop();
+ }
+ mainMoveTween = new Tween(elm, 'top', pos.top, baidu.page.getHeight() - h - 50, effect, runTime, function(){
+ //new Tween(elm, 'top', baidu.page.getHeight() - h - 50, pos.top, effect, runTime);
+ });
+ }
+
+ function opacity(){
+ var runTime = .5, margin = 80, effect = Easing.Linear;
+ if(alphaTween){
+ alphaTween.stop();
+ }
+ alphaTween = new Tween(mainBlcok, 'opacity', 100, 0, effect, runTime, function(){
+ alphaTween = new Tween(mainBlcok, 'opacity', 0, 100, effect, runTime);
+ });
+ }
+
+ var blingCount = 0, blingEnd = true;
+ function bling(){
+ if(!blingEnd){
+ return;
+ }
+ var box = document.getElementById('testIconBlock'), icon = box.getElementsByTagName('div')[0];
+ var w = icon.clientWidth, h = icon.clientHeight;
+ var effect = Easing.Linear, margin = 50, runTime = .3;
+ new Tween(icon, 'width', w, w - margin, effect, runTime, function(){
+ new Tween(icon, 'width', w - margin, w, effect, runTime);
+ });
+ new Tween(icon, 'margin-left', 0, margin / 2, effect, runTime, function(){
+ new Tween(icon, 'margin-left', margin / 2, 0, effect, runTime);
+ });
+
+
+ new Tween(icon, 'height', h, h - margin, effect, runTime, function(){
+ new Tween(icon, 'height', h - margin, h, effect, runTime);
+ });
+ new Tween(icon, 'margin-top', 0, margin / 2, effect, runTime, function(){
+ new Tween(icon, 'margin-top', margin / 2, 0, effect, runTime);
+ });
+
+ if (blingCount >= 0) {
+ setTimeout(function(){
+ blingEnd = true;
+ blingCount ++;
+ bling();
+ }, 1200);
+ blingEnd = false;
+ }else{
+ blingCount = 0;
+ blingEnd = true;
+ }
+ }
+
+ function iconFly(){
+ if(flyTween){
+ flyTween.stop();
+ }
+ if(flyTween2){
+ flyTween2.stop();
+ }
+ var box = document.getElementById('testIconBlock'), pos = baidu.dom.getPosition(box), w = box.clientWidth, h = box.clientHeight;
+ var runTime = .8, effect = Easing.Expo.easeInOut;
+ var toX = Math.ceil(getRandom(0, baidu.page.getWidth() - w)),
+ toY = Math.ceil(getRandom(0, baidu.page.getHeight() - h));
+ flyTween = new Tween(box, 'left', pos.left, toX, effect, runTime, function(){
+ checkFlyOk({x:'ok'});
+ });
+ flyTween2 = new Tween(box, 'top', pos.top, toY, effect, runTime, function(){
+ checkFlyOk({y:'ok'});
+ });
+ }
+
+ var allOkObj = {x: 'no', y: 'no'};
+ function checkFlyOk(o){
+ o.x && (allOkObj.x = o.x);
+ o.y && (allOkObj.y = o.y);
+
+ if(allOkObj.x == 'ok' && allOkObj.y == 'ok'){
+ setTimeout(function(){
+ allOkObj = {x: 'no', y: 'no'};
+ iconFly();
+ }, 200)
+ }
+ }
+
+ function getRandom(a, b){
+ return a + Math.random() * b;
+ }
+
+
+
+ var bgColor = '#F9F9F9', colorTween;
+ function iconColor(){
+ var block = document.body;//document.getElementById('tweenBlcok');
+ if(colorTween){
+ colorTween.stop();
+ }
+ var newColor = 'rgb(' + Math.ceil(getRandom (0, 255)) + ',' + Math.ceil(getRandom (0, 255)) + ',' + Math.ceil(getRandom (0, 255)) + ')';
+ colorTween = new Tween(block, 'background-color', bgColor, newColor, Easing.Linear, 1, function(){
+ bgColor = newColor;
+
+ setTimeout(function(){
+ iconColor();
+ }, 1000);
+ });
+ }
+
+ </script>
+</html>
Oops, something went wrong.

1 comment on commit b40187e

Owner

newdumdum commented on b40187e Jun 29, 2011

添加baidu.more.Tween动画效果类以及baidu.more.Easing动画算法

Please sign in to comment.