通过JS设置对象缓动。Tween类的使用。

1,155 views

演示效果:
http://www.taoshaw.com/h5/testTween.htm

代码如下:

<script>
// 演示如何使用
/*
* Tween.js
* t: current time(当前时间);
* b: beginning value(初始值);
* c: change in value(变化量);
* d: duration(持续时间)。
*/

// requestAnimationFrame的兼容处理
if (!window.requestAnimationFrame) {
requestAnimationFrame = function(fn) {
setTimeout(fn, 17);
};
}

// 容器元素
var eleContainer = document.getElementById(‘container’);
// 标题元素(同时作为方法关键字)
var eleTitles = eleContainer.getElementsByTagName(‘h4’);
// 循环标题
for (var indexTitle = 0; indexTitle < eleTitles.length; indexTitle += 1) {
(function(index) {
// 标题元素
var eleTitle = eleTitles[index];
// 标题对应的动画关键字
var arrKeyTween = eleTitle.innerHTML.split(‘.’);
// 找到球元素
var eleBall = eleTitle.parentNode.getElementsByTagName(‘i’)[0];

// 是否正在运动
var isMoving = false;

// 点击球触发运动
if (eleBall) {
eleBall.onclick = function () {
if (isMoving == true) {
return;
}

// 一些数据
// 当前时间
var start = 0;
// 初始值,因为一开始球在最左边,因此是0
var begin = 0;
// 容器宽度减去球的宽度
var end = (800 – 42);
// 持续时间
var during = 100;

// 当前圆球对应的动画算法
var fnGetCurrentPosition;

if (arrKeyTween.length == 1) {
fnGetCurrentPosition = Math.tween[arrKeyTween[0]];
} else if (arrKeyTween.length == 2) {
fnGetCurrentPosition = Math.tween[arrKeyTween[0]][arrKeyTween[1]];
}

// 运动
var step = function() {
// 当前的运动位置
var left = fnGetCurrentPosition(start, begin, end, during);
// 高级浏览器使用transform位置,会更细腻
if (history.pushState) {
eleBall.style.transform = ‘translateX(‘ + left + ‘px)’;
} else {
eleBall.style.left = left + ‘px’;
}

// 时间递增
start++;

// 如果还没有运动到位,继续
if (start <= during) {
requestAnimationFrame(step);
} else {
// 动画结束,这里可以插入回调…
// callback()…

// 标记动画已结束,可以再次点击小球执行动画
isMoving = false;
}
};
// 开始执行动画
if (typeof fnGetCurrentPosition == ‘function’) {
isMoving = true;
step();
}
};
}
})(indexTitle);
}
</script>

如果您觉得这篇文章对您有帮助,欢迎继续关注本站!!!我要赞助本站>>>

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注