DDR爱好者之家 Design By 杰米
具体代码如下:
~function(){ var myEffect = { Linear:function(t,b,c,d){ return c*t/d+b }, Quad: {//二次方的缓动(t^2); 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: {//三次方的缓动(t^3) 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: {//四次方的缓动(t^4); 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: {//5次方的缓动(t^5); 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: {//正弦曲线的缓动(sin(t)) 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: {//指数曲线的缓动(2^t); easeIn: function(t,b,c,d){ return (t==0) "number"){ switch(effect){ case 0: tempEffect = myEffect.Linear; break; case 1: tempEffect = myEffect.Circ.easeInOut; break; case 2: tempEffect = myEffect.Elastic.easeOut; break; case 3: tempEffect = myEffect.Back.easeOut; break; case 4: tempEffect = myEffect.Bounce.easeOut; break; case 5: tempEffect = myEffect.Expo.easeIn; } }else if(effect instanceof Array){ tempEffect = effect.length>=2 "function"){ //我们的实际意义应该是:effect是不传递值的,传递进来的函数应该是回调函数的值 callback = effect; } //在每一次执行方法之前,首先把当前元素之前正在运行的动画结束掉 window.clearInterval(curEle.timer); //根据target获取每一个方向的起始值begin和总距离change var begin = {},change = {}; for(var key in target){ if(target.hasOwnProperty(key)){ begin[key] = utils.css(curEle,key) change[key] = target[key] - begin[key]; } } //实现多方向的运动动画 var time = 0; curEle.timer = window.setInterval(function(){ time+=10; //到达目标:结束动画,让当前元素的样式值等于目标样式值 if(time>=duration){ utils.css(curEle,target); window.clearInterval(curEle.timer); //在动画结束的时候,如果用户把回调函数传递给我了,我就把用户传递的回调函数执行,不仅执行还把this的指向改为当前操作的元素 typeof callback === "function" ? callback.call(curEle) : null; //或者callback && callback() return; } //没到达目标:分别获取每一个方向的当前位置,给当前位置设置样式即可。 for(var key in target){ if(target.hasOwnProperty(key)){ var curPos = tempEffect(time,begin[key],change[key],duration); utils.css(curEle,key,curPos); } } },10) } window.myAnimate = move; }()
以上这篇js学习心得_一个简单的动画库封装tween.js就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年11月27日
2024年11月27日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]