matlab 定时器 动态绘制曲线,JS实现动画效果（利用定时器）

JavaScript 动画主要利用定时器(setTimeout 和 setInterval)来实现。设计思路：通过循环改变元素的某个 CSS 样式属性，从而达到动态效果，如移动位置、缩放大小、渐隐渐现等。

移动动画

移动动画主要通过动态修改元素的坐标来实现。技术要点如下：

考虑元素的初始坐标、终点坐标，以及移动坐标等定位要素。

移动速度、频率等问题可以借助定时器来实现。但效果的模拟涉及算法问题，不同的算法，可能会设计出不同的移动效果，如匀速运动、加速和减速运动。

示例

下面示例演示了如何设计一个简单的元素移动效果。通过指向元素、移动的位置，以及移动的步数，可以设计按一定的速度把元素从当前位置移动到指定的位置。本示例引用前面介绍的 getB() 方法，该方法能够获取当前元素的绝对定位坐标值。

//简单的移动参数

//参数：e表示元素，x和y表示要移动的终点坐标，t表示元素移动的步数

function slide (e, x, y, t) {

var t = t || 100; //初始化步数，步数越大，速度越慢，移动越逼真

var o = getB(e); //当前元素的绝对定位坐标值

var x0 = o.x;

var y0 = o.y;

var stepx = Math.round((x - x0) / t);

//计算x轴每次移动的步长，由于像素点不可用小数，所以会存在一定的误差

var stepy = Math.round((y - y0) / t); //计算y轴每次移动的步长

var out = setInterval (function () { //设计定时器

var o = getB(e); //获取每次移动后的绝对定位坐标值

var x0 = o.x;

var y0 = o.y;

e.style["left"] = (x0 + stepx) + 'px';

e.style["top"] = (y0 + stepy) + 'px';

//如果距离终点距离小于步长，则停止循环并校正最终坐标位置

if (Math.abs(x - x0) <= Math.abs(stepx) || Math.abs(y - y0) <= Math.abs(stepy)) {

e.style["left"] = x + 'px'; //定位每次移动的位置

e.style["top"] = y + 'px'; //定位每次移动的位置

clearTimeout(out);

};

}, 2)

};

使用时应该定义元素绝对定位或相对定位的显示状态，否则移动无效。在网页动画设计中，一般都使用这种定位移动的方式来实现。

.block { width:20px; height:20px; position:absolute; left:200px; top:200px; background-color:red; }

temp1 = document.getElementById('block1');

slide (temp1, 400, 400, 60);

渐隐渐显

渐隐渐显效果主要通过动态修改元素的透明度来实现。

示例

下面示例实现一个简单的渐隐渐显动画效果。

//渐隐渐显动画显示函数

//参数：e表示元素，t表示速度，值越大速度越慢

//io表示显示方式，true表示渐显，false表示渐隐

function fade (e, t, io) {

var t = t || 100; //初始化渐隐渐显速度

if (io) { var i = 0; } //初始化渐隐渐显方式

else { var i = 100; }

var out = setInterval (function () { //设计定时器

setOpacity (e, i); //调用setOpacity()函数

if (io) { //根据渐隐或渐显方式决定执行效果

i ++;

if (i >= 100) clearTimeout(out);

} else {

i --;

if (i <= 0) clearTimeout(out);

}

}, t);

}

下面调用该函数：

.block { width:200px; height:200px; background-color:red; }

e = document.getElementById('block1');

fade(e, 50, true); //应用渐隐渐显动画效果