请选择 进入手机版 | 继续访问电脑版
收藏本站腾讯微博新浪微博
点点网模板设计大赛 phpchina

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 用悬赏 三天解决问题 解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动 地图任务 邮件更新任务:保护帐号安全

积分换实物,来参加蓝色理想积分兑换吧! 联系招聘客服 蓝色理想帮你找工作! 万元奖励等你拿——点点网模板设计大赛

查看: 8713|回复: 32

45种缓动效果 [复制链接]

RestlessDream 楼主

司徒正美

初级会员

帖子
70
体力
105
威望
4
居住地
广东省 广州市
发表于 2009-9-17 10:25:37 |显示全部楼层
var transition = function(el){
                el.style.position = "absolute";
                var options = arguments[1] || {},
                begin =  options.begin,//开始位置
                change = options.change,//变化量
                duration = options.duration || 500,//缓动效果持续时间
                field = options.field,//必须指定,基本上对top,left,width,height这个属性进行设置
                ftp = options.ftp || 50,
                onEnd = options.onEnd || function(){},
                ease = options.ease,//要使用的缓动公式
                end = begin + change,//结束位置
                startTime = new Date().getTime();//开始执行的时间
                (function(){
                    setTimeout(function(){
                        var newTime = new Date().getTime(),//当前帧开始的时间
                        timestamp = newTime - startTime,//逝去时间
                        delta = ease(timestamp / duration);
                        el.style[field] = Math.ceil(begin + delta * change) + "px"
                        if(duration <= timestamp){
                            el.style[field] = end + "px";
                            onEnd();
                        }else{
                            setTimeout(arguments.callee,1000/ftp);
                        }
                    },1000/ftp)
                })()
            }

45条缓动公式任君选择,我们还可以轻松制定自己的缓动公式
            var tween = {
                easeInQuad: function(pos){
                    return Math.pow(pos, 2);
                },

                easeOutQuad: function(pos){
                    return -(Math.pow((pos-1), 2) -1);
                },

                easeInOutQuad: function(pos){
                    if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,2);
                    return -0.5 * ((pos-=2)*pos - 2);
                },

                easeInCubic: function(pos){
                    return Math.pow(pos, 3);
                },

                easeOutCubic: function(pos){
                    return (Math.pow((pos-1), 3) +1);
                },

                easeInOutCubic: function(pos){
                    if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,3);
                    return 0.5 * (Math.pow((pos-2),3) + 2);
                },

                easeInQuart: function(pos){
                    return Math.pow(pos, 4);
                },

                easeOutQuart: function(pos){
                    return -(Math.pow((pos-1), 4) -1)
                },

                easeInOutQuart: function(pos){
                    if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,4);
                    return -0.5 * ((pos-=2)*Math.pow(pos,3) - 2);
                },

                easeInQuint: function(pos){
                    return Math.pow(pos, 5);
                },

                easeOutQuint: function(pos){
                    return (Math.pow((pos-1), 5) +1);
                },

                easeInOutQuint: function(pos){
                    if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,5);
                    return 0.5 * (Math.pow((pos-2),5) + 2);
                },

                easeInSine: function(pos){
                    return -Math.cos(pos * (Math.PI/2)) + 1;
                },

                easeOutSine: function(pos){
                    return Math.sin(pos * (Math.PI/2));
                },

                easeInOutSine: function(pos){
                    return (-.5 * (Math.cos(Math.PI*pos) -1));
                },

                easeInExpo: function(pos){
                    return (pos==0) ? 0 : Math.pow(2, 10 * (pos - 1));
                },

                easeOutExpo: function(pos){
                    return (pos==1) ? 1 : -Math.pow(2, -10 * pos) + 1;
                },

                easeInOutExpo: function(pos){
                    if(pos==0) return 0;
                    if(pos==1) return 1;
                    if((pos/=0.5) < 1) return 0.5 * Math.pow(2,10 * (pos-1));
                    return 0.5 * (-Math.pow(2, -10 * --pos) + 2);
                },

                easeInCirc: function(pos){
                    return -(Math.sqrt(1 - (pos*pos)) - 1);
                },

                easeOutCirc: function(pos){
                    return Math.sqrt(1 - Math.pow((pos-1), 2))
                },

                easeInOutCirc: function(pos){
                    if((pos/=0.5) < 1) return -0.5 * (Math.sqrt(1 - pos*pos) - 1);
                    return 0.5 * (Math.sqrt(1 - (pos-=2)*pos) + 1);
                },

                easeOutBounce: function(pos){
                    if ((pos) < (1/2.75)) {
                        return (7.5625*pos*pos);
                    } else if (pos < (2/2.75)) {
                        return (7.5625*(pos-=(1.5/2.75))*pos + .75);
                    } else if (pos < (2.5/2.75)) {
                        return (7.5625*(pos-=(2.25/2.75))*pos + .9375);
                    } else {
                        return (7.5625*(pos-=(2.625/2.75))*pos + .984375);
                    }
                },

                easeInBack: function(pos){
                    var s = 1.70158;
                    return (pos)*pos*((s+1)*pos - s);
                },

                easeOutBack: function(pos){
                    var s = 1.70158;
                    return (pos=pos-1)*pos*((s+1)*pos + s) + 1;
                },

                easeInOutBack: function(pos){
                    var s = 1.70158;
                    if((pos/=0.5) < 1) {
                        return 0.5*(pos*pos*(((s*=(1.525))+1)*pos -s));
                    }
                    return (0.5*((pos-=2)*pos*(((s*=(1.525))+1)*pos +s) +2));
                },

                elastic: function(pos) {
                    return -1 * Math.pow(4,-8*pos) * Math.sin((pos*6-1)*(2*Math.PI)/2) + 1;
                },

                swingFromTo: function(pos) {
                    var s = 1.70158;
                    return ((pos/=0.5) < 1) ? 0.5*(pos*pos*(((s*=(1.525))+1)*pos - s)) : 0.5*((pos-=2)*pos*(((s*=(1.525))+1)*pos + s) + 2);
                },

                swingFrom: function(pos) {
                    var s = 1.70158;
                    return pos*pos*((s+1)*pos - s);
                },

                swingTo: function(pos) {
                    var s = 1.70158;
                    return (pos-=1)*pos*((s+1)*pos + s) + 1;
                },

                bounce: function(pos) {
                    if (pos < (1/2.75)) {
                        return (7.5625*pos*pos);
                    } else if (pos < (2/2.75)) {
                        return (7.5625*(pos-=(1.5/2.75))*pos + .75);
                    } else if (pos < (2.5/2.75)) {
                        return (7.5625*(pos-=(2.25/2.75))*pos + .9375);
                    } else {
                        return (7.5625*(pos-=(2.625/2.75))*pos + .984375);
                    }
                },

                bouncePast: function(pos) {
                    if (pos < (1/2.75)) {
                        return (7.5625*pos*pos);
                    } else if (pos < (2/2.75)) {
                        return 2 - (7.5625*(pos-=(1.5/2.75))*pos + .75);
                    } else if (pos < (2.5/2.75)) {
                        return 2 - (7.5625*(pos-=(2.25/2.75))*pos + .9375);
                    } else {
                        return 2 - (7.5625*(pos-=(2.625/2.75))*pos + .984375);
                    }
                },

                easeFromTo: function(pos) {
                    if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,4);
                    return -0.5 * ((pos-=2)*Math.pow(pos,3) - 2);
                },

                easeFrom: function(pos) {
                    return Math.pow(pos,4);
                },

                easeTo: function(pos) {
                    return Math.pow(pos,0.25);
                },

                linear:  function(pos) {
                    return pos
                },

                sinusoidal: function(pos) {
                    return (-Math.cos(pos*Math.PI)/2) + 0.5;
                },

                reverse: function(pos) {
                    return 1 - pos;
                },

                mirror: function(pos, transition) {
                    transition = transition || tween.sinusoidal;
                    if(pos<0.5)
                        return transition(pos*2);
                    else
                        return transition(1-(pos-0.5)*2);
                },

                flicker: function(pos) {
                    var pos = pos + (Math.random()-0.5)/5;
                    return tween.sinusoidal(pos < 0 ? 0 : pos > 1 ? 1 : pos);
                },

                wobble: function(pos) {
                    return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5;
                },

                pulse: function(pos, pulses) {
                    return (-Math.cos((pos*((pulses||5)-.5)*2)*Math.PI)/2) + .5;
                },

                blink: function(pos, blinks) {
                    return Math.round(pos*(blinks||5)) % 2;
                },

                spring: function(pos) {
                    return 1 - (Math.cos(pos * 4.5 * Math.PI) * Math.exp(-pos * 6));
                },

                none: function(pos){
                    return 0
                },

                full: function(pos){
                    return 1
                }
            }

具体示例与讲解与文档可见我的Blog(里面有许多对初学者有用的东西哦)
http://www.cnblogs.com/rubylouvre/archive/2009/09/17/1567607.html

[ 本帖最后由 RestlessDream 于 2009-9-17 10:38 编辑 ]
已有 1 人评分威望 收起 理由
cloudgamer + 1 谢谢分享

总评分: 威望 + 1   查看全部评分

西部数码顶级域名注册商39元抢注!
RestlessDream 楼主

司徒正美

初级会员

帖子
70
体力
105
威望
4
居住地
广东省 广州市
发表于 2009-9-17 10:26:30 |显示全部楼层
太长,示例大长,被逼分开写:

 提示:您可以先修改部分代码再运行



使用文档:

自定义缓动公式的模板
           var myTween = function(pos){ //缓动公式
                var value = tween[ease](pos);
                //***********这上面是固定的**************
                indicator.style.display = "block";
                marker.style.display = "block";
                marker.style.left = Math.round((pos*200))+'px';
                label.innerHTML = Math.round((pos*200))+'px';
                //************这下面是固定的*************
                return value;
            }

使用:
        <div class="taxiway">
            <div class="move" onclick="transition(this,{field:'left',beginarseFloat(getCoords(this).left),change:700,ease:tween.bouncePast})"></div>
        </div>
        <div class="taxiway">
            <div class="move" onclick="transition(this,{field:'width',beginarseFloat(getStyle(this,'width')),change:300,ease:tween.spring})"></div>
        </div>

[ 本帖最后由 RestlessDream 于 2009-9-17 10:36 编辑 ]
租服务器,上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具 举报

hutia 

诘屈聱牙

荣誉管理

帖子
5621
体力
23227
威望
367
居住地
江苏省 苏州市
发表于 2009-9-17 10:30:35 |显示全部楼层
做的不错,赞一个

使用道具 举报

帖子
251
体力
1115
威望
0
居住地
辽宁省 盘锦市
发表于 2009-9-17 10:30:47 |显示全部楼层
效果真的很多很好。。学习。。
暂无

使用道具 举报

togoog 

天使共舞

金牌会员 手机认证 

帖子
783
体力
3152
威望
0
居住地
上海市 闵行区
发表于 2009-9-20 13:23:17 |显示全部楼层
楼主做的不错,加油。。。

使用道具 举报

帖子
762
体力
285
威望
1
发表于 2009-9-20 15:41:24 |显示全部楼层
牛人越来越多 哎.

使用道具 举报

king90 
帖子
182
体力
583
威望
0
居住地
广东省 深圳市
发表于 2009-9-20 17:19:16 |显示全部楼层
十分强大,很实用.不知道加载图片的时候是不是也有这么快的浏览速度?

使用道具 举报

zhenpu 

山东夜生活

高级会员 手机认证 

帖子
337
体力
688
威望
0
居住地
山东省 济南市
发表于 2009-9-21 14:22:00 |显示全部楼层
没明白干什么用的

使用道具 举报

帖子
11
体力
61
威望
0
发表于 2009-9-21 15:06:46 |显示全部楼层
只想说一句:为什么你这么牛???和我比起来真是一个是天上一个是在上1

使用道具 举报

自由天堂

银牌会员 手机认证 

帖子
520
体力
1850
威望
1
发表于 2009-9-22 09:39:55 |显示全部楼层
强人,值得学习。。。

使用道具 举报

帖子
409
体力
1116
威望
2
居住地
广东省 广州市
发表于 2009-9-22 15:13:06 |显示全部楼层
有趣 哈哈

使用道具 举报

聚强

初级会员

帖子
139
体力
265
威望
0
居住地
山西省 太原市
发表于 2009-9-22 18:19:33 |显示全部楼层
效果不错啊
教程www.juqng.com

使用道具 举报

帖子
174
体力
618
威望
0
居住地
广东省 广州市
发表于 2009-9-25 02:30:26 |显示全部楼层
很好

一直想收集的
努力学习,天天向上

使用道具 举报

帖子
89
体力
198
威望
0
发表于 2009-10-13 16:13:54 |显示全部楼层
强人,你在干嘛啊。。  做什么的啊

使用道具 举报

帖子
3
体力
16
威望
0
发表于 2009-10-14 12:05:09 |显示全部楼层
神啊!

使用道具 举报

简约不简单

初级会员

帖子
60
体力
96
威望
0
居住地
江苏省 南京市
发表于 2009-10-15 14:17:04 |显示全部楼层
赞一个!收藏!
简约不简单

使用道具 举报

liuzg 
帖子
15
体力
144
威望
0
居住地
湖南省 郴州市
发表于 2009-10-22 11:27:41 |显示全部楼层
小弟这桶水什么时候才浪的出来啊。。。学习了。

使用道具 举报

帖子
47
体力
329
威望
0
发表于 2009-10-22 13:53:09 |显示全部楼层
实战用在哪里呢?不明白,效果是不错的

使用道具 举报

帖子
290
体力
1535
威望
0
居住地
河南省 郑州市
发表于 2009-10-22 17:51:25 |显示全部楼层
这不是tween么?
.

使用道具 举报

帖子
23
体力
1063
威望
0
居住地
宁夏回族自治区 银川市
发表于 2009-10-22 17:57:47 |显示全部楼层
很好很强大,主要是数学一般般!
专注

使用道具 举报

pasico 
帖子
1
体力
19
威望
0
居住地
广东省 广州市
发表于 2009-11-6 01:34:26 |显示全部楼层
多谢你的无偿奉献,
希望能回答我一个小问题,
请问怎样才可以向两边用缓动效果呢?

使用道具 举报

zsuzjs 

分特

钻石会员

帖子
1438
体力
8928
威望
1
居住地
广东省 深圳市
发表于 2009-11-6 08:33:17 |显示全部楼层
原帖由 dengbin206 于 2009-9-21 15:06 发表
只想说一句:为什么你这么牛???和我比起来真是一个是天上一个是在上1

太牛了,在水底的飘过
手中无剑,心中有剑;
家里没水,还能灌水!

使用道具 举报

帖子
1
体力
12
威望
0
居住地
天津市 河北区
发表于 2009-11-6 13:40:14 |显示全部楼层
收下了,谢谢楼主~
赞一个~

使用道具 举报

aksoft 
帖子
203
体力
4321
威望
0
发表于 2009-11-17 09:04:55 |显示全部楼层
厉害,收藏了

使用道具 举报

帖子
64
体力
118
威望
0
居住地
湖南省 岳阳市
发表于 2009-11-17 09:12:32 |显示全部楼层
厉害,学习量~

使用道具 举报

小P孩

高级会员

帖子
700
体力
957
威望
0
居住地
河北省 石家庄市
发表于 2009-11-17 09:55:42 |显示全部楼层
很帅,不过用在哪里呢?

使用道具 举报

xilao 
帖子
49
体力
167
威望
0
居住地
广东省 广州市
发表于 2009-11-17 11:19:03 |显示全部楼层
这东西实在太牛了. 感谢分享
www.2kcn.com

使用道具 举报

帖子
10
体力
30
威望
0
发表于 2009-11-17 11:41:01 |显示全部楼层
看不大懂

使用道具 举报

帖子
69
体力
195
威望
0
居住地
新疆维吾尔自治区 乌鲁木齐市
发表于 2010-6-4 10:11:16 |显示全部楼层
提醒:最后回贴距现在 199 天,请不要无意义回复

使用道具 举报

帖子
107
体力
396
威望
0
发表于 2010-8-17 14:14:42 |显示全部楼层
跟flash的缓动效果还真不一样,只有一个参数啊,一定要搞明白它...

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )  

GMT+8, 2012-2-9 15:10 , Processed in 0.138132 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部