关于tween
关于tween
使用
下载 ，引入 或 网络链接
缓动函数
普通的缓动函数
- Linear： 线性 (匀速)
非普通的缓动函数
- Quad: 二次方缓动效果
- Cubic: 三次方缓动效果
- Quart: 四次方缓动效果
- Quint: 五次方缓动效果
- Sine: 正弦缓动效果
- Expo: 指数缓动效果
- Circ: 圆形缓动效果
- Elastic: 指数衰减正弦曲线缓动函数
- Back: 超过范围的三次方的缓动函数
- Bounce:指数衰减的反弹曲线缓动函数
- easeIn : 加速
- easeOut: 减速
- easeInOut: 先加速后减速
四个参数
- t : 动画已经执行的时间
- b : 初始的位置
- c : 变化的值
- d : 总时间 (总步数)
例
var box = document.getElementsByClassName("box")[0]; //准备四个参数 var t = 0; var b = 0; var c = 500; var d = 100; var time = setInterval(function () {
t++; if(t >= d){
clearInterval(time); } box.style.left = Tween.Linear(t,b,c,d) + "px"; box.style.top = Tween.Linear(t,b,c,d) + "px"; },30); - tween轮播图
window.onload = function(){
var scren = document.getElementsByClassName("screen")[0]; var pics = document.getElementsByClassName("pics")[0]; var pic = document.getElementsByClassName("pic"); var l = 0; for (var i = 0;i < pic.length;i++) {
pic[i].style.left = l + "px"; l += 600; } var index = 0; var csroll;//正常单张滚动 var zt;//单张结束后暂停 zt = setInterval(function fun(){
clearInterval(csroll); var t = 0;//起始时间 var b = -(index)*pic[0].clientWidth;//起始位置 var c = -pic[0].clientWidth;//移动距离 var d = 100;//移动时间 function move(){
t++; if(t >= d ){
clearInterval(csroll); index++; } pics.style.left = Tween.Linear(t,b,c,d) + "px"; if(index == 4){
index = 0; pics.style.left = "0px"; } } csroll = setInterval(move,10);//单张图片滚动效果 },3000) } 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/217193.html原文链接：https://javaforall.net
