<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tweenDemo-01</title>
<style type="text/css">
* { margin: 0; padding: 0;}
div { height: 100px; width: 100px; position: absolute; left:0; background-color: #ccc;}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script type="text/javascript" src="tween.js"></script> <!-- 引入tween -->
<script type="text/javascript">

var box = document.getElementById('box');
var timer = null;

var t=0,
b=50,
c=100,
d=100;

function Run(){
box.style.left = Tween.Quad.easeOut(t, b, c, d) + "px";
if( t < d ){
t++;
setTimeout(Run, 10);
}
}
Run();

//box要向右缓动，left初始值是50，那么b就是50，要向右移动100，那c就是100，如果知道的是目标值，例如要向右移动到150，那就把目标值150减初始值b就是变化量c了。

//d的设置比较灵活，只要符合t是从0向d递增（或递减）就可以了。d跟步长配合使用来设置持续时间，例如d设置为100，如果设置步长是1，那么从0到100就有100步，即分100次来完成这个过程，步数越多持续时间就越长。

//t的变化相当于时间的变化，一般是均匀变化的，每次变化都增加一个步长，当t从0递增（或递减）到d时，缓动就结束了。

//要注意的是t是从0开始的，设置步长时必须确定t确实能到达d，如果上面的步长是3，那么t就永远都到不了d。更好的处理是当t等于或超过d之后，就停止定时器并设置当前值为目标值。

</script>
</html>

关于tween.js测试介绍的更多相关文章

  1. Web测试介绍2一 安全测试

            安全测试是在IT软件产品的生命周期中,特别是产品开发基本完成到发布阶段,对产品进行检验以验证产品符合安全需求定义和产品质量标准的过程. 主要安全需求包括: (i) 认证 Authent ...

  2. Web3D编程入门总结——WebGL与Three.js基础介绍

    /*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识 ...

  3. tween.js的使用

    前面的话 TweenJS提供了一个简单但强大的渐变界面.它支持渐变的数字对象属性&CSS样式属性,并允许链接补间动画和行动结合起来,创造出复杂的序列.本文将详细介绍tween.js的使用 概述 ...

  4. tween.js缓动（补间动画）

    一.理解tween.js 如果看到上面的已经理解了,可以跳过下面的部分.下面为对Tween.js的解释 下面就介绍如何使用这个Tween了,首先b.c.d三个参数(即初始值,变化量,持续时间)在缓动开 ...

  5. 【入门篇】前端框架Vue.js知识介绍

    一.Vue.js介绍 1.什么是MVVM? MVVM(Model-View-ViewModel)是一种软件架构设计模式,它源于MVC(Model-View-Controller)模式,它是一种思想,一 ...

  6. WebGL three.js学习笔记 加载外部模型以及Tween.js动画

    WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...

  7. doT.js详细介绍

    doT.js详细介绍   doT.js特点是快,小,无依赖其他插件. 官网:http://olado.github.iodoT.js详细使用介绍 使用方法:{{= }} for interpolati ...

  8. 利用tween.js算法生成缓动效果

    在讲tween类之前,不得不提的是贝塞尔曲线了.首先,贝塞尔曲线是指依据四个位置任意的点坐标绘制出的一条光滑曲线.它在作图工具或动画中中运用得比较多,例如PS中的钢笔工具,firework中的画笔等等 ...

  9. Tween.js的使用示例

    可参考:http://www.htmleaf.com/jQuery/Layout-Interface/201501271284.html 官方文档:https://github.com/tweenjs ...

随机推荐

  1. BZOJ CF388D. Fox and Perfect Sets [线性基 数位DP]

    CF388D. Fox and Perfect Sets 题意:求最大元素\(le n\)的线性空间的个数 给神题跪了 orz 容易想到 每个线性基对应唯一的线性空间,我们可以统计满足条件的对应空间不 ...

  2. BZOJ 3698: XWW的难题 [有源汇上下界最大流]

    3698: XWW的难题 题意:(1)A[N][N]=0:(2)矩阵中每行的最后一个元素等于该行前N-1个数的和:(3)矩阵中每列的最后一个元素等于该列前N-1个数的和.给A中的数进行取整操作(可以是 ...

  3. BZOJ 1492: [NOI2007]货币兑换Cash [CDQ分治 斜率优化DP]

    传送门 题意:不想写... 扔链接就跑 好吧我回来了 首先发现每次兑换一定是全部兑换,因为你兑换说明有利可图,是为了后面的某一天两种卷的汇率差别明显而兑换 那么一定拿全利啊,一定比多天的组合好 $f[ ...

  4. HDU1005 找规律 or 循环点 or 矩阵快速幂

    http://acm.hdu.edu.cn/showproblem.php?pid=1005 1.一开始就注意到了n的数据范围 <=100 000 000,但是还是用普通的循环做的,自然TLE了 ...

  5. 浅析Numpy.genfromtxt及File I/O讲解

    Python 并没有提供数组功能,虽然列表 (list) 可以完成基本的数组功能,但它并不是真正的数组,而且在数据量较大时,使用列表的速度就会慢的让人难受.为此,Numpy 提供了真正的数组功能,以及 ...

  6. VS2008集成PC-lint

    引言 C/C++语言的语法拥有其它语言所没有的灵活性,这种灵活性带来了代码效率的提升,但相应也使得代码编写具有很大的随意性,另外C/C++编译器不进行强制类型检查,也不做任何边界检查,这就增加了代码中 ...

  7. Docker可视化管理工具Shipyard安装与配置

    Shipyard简介 Shipyard是一个集成管理docker容器.镜像.Registries的系统,它具有以下特点: 1.支持多节点的集成管理 2.可动态加载节点 3.可托管node下的容器 镜像 ...

  8. 一位IT男的7年工作经验总结

    一位IT男的7年工作经验总结 1.分享第一条经验:"学历代表过去.能力代表现在.学习力代表未来." 其实这是一个来自国外教育领域的一个研究结果.相信工作过几年.十几年的朋友对这个道 ...

  9. 微信小程序下拉框

    微信小程序里没有和HTML里的下拉框一样的组件,想要相同的效果只能自己写一个,先看效果 下面来看一下代码: 首先WXML <view class='select_box'> <vie ...

  10. Mysql主从复制_模式之日志点复制

    MySQL数据复制的原理 MySQL复制基于主服务器在二进制日志中跟踪所有对数据库的更改(更新.删除等等).因此,要进行复制,必须在主服务器上启用二进制日志. 每个从服务器从主服务器接收主服务器已经记 ...