ch_kexin
- 浏览: 897876 次
- 性别:
- 来自: 青岛
-
文章分类
最新评论
-
chienchia：
请问下，第4步，vpn做了什么使数据包发送到真实网卡，而不会再 ...
如何使用Android系统自带的VPN服务框架 -
fangyafenqidai：
我只要选第二个就可以呢，怒需要选第一个。之后不会有啥问题。正常 ...
Android Studio 超级简单的打包生成apk -
michaelye1988：
不错，很棒！
getcachedir和getexternalcachedir的区别 -
whlei01：
文章棒棒哒
常用的AS3代码 -
whlei01：
很不错 之前打开及时600M的内存 ，现在打开只有300兆了 ...
flash builder内存不够的解决办法
在再谈js拖拽（二）仿iGoogle自定义首页模块拖拽的最后，我说了接下来要写Js动画，转瞬拖到了今天，呵呵。这篇主要讲动画的基础，就是几个最基本的特效，即：移动，渐变和尺寸变化。接下来写个梦幻西游版逍遥生角色行走的动画，然后再适时的写些动画有关的例子，争取把这个系列写好。
我们玩魔兽世界的时候可以通过ctrl+r来查看当前的帧数，当帧数很小时，会觉得很卡，帧数很高则很流畅。所谓帧数就是1秒内显示图片的数量。当这么多帧图片连起来显示，就形成了动画。
Js中实现动画都是靠setInterval或者setTimeout来实现。setInterval自身就能不断循环来执行计算从而显示新的帧，setTimeout是间隔一段时间后仅执行一次，他需要配合函数循环实现，很多人偏爱setTimeout来实现。本文采用setInterval实现。
据说，普通人眼能看到1/24秒，就是说1秒至少24帧，每次移位间隔需要小于1000/24=41.7毫秒，也就说setInterval要每隔至少40毫秒执行一次，一般地，我们采用10毫秒，当然间隔时间越短，客户端执行计算次数就越多，如果你code计算量大则可以适当调长些。
首先贴上封装好的动画类Animation.
+Animation:
其中fade方法是实现渐变效果的，resize方法是改变对象尺寸大小的，move方法是实现移动效果的。首先看下move方法，其他2个方法实现其实是类似的。
move方法的调用：Animation.move('divObj',{x:500,y:500},100,Tween.Quart.easeInOut); 第一个参数是移动的对象，第二个参数是移动的目标坐标，第三个参数是一共执行多少次移位，即移动时间内一共的帧数，即执行多少次，第4个参数是可选参数，指定Tween具体算法，若不加，则默认采用Tween.Linear。
移动问题的关键就是每次移位后，应该将移动对象定位到什么位置，即其left和top是多少。来看一个简单的数学题，当我们知道了一个点的起始位置initPos和终点位置targetPos，要求在count次移动后达到终点，该点为匀速运动，求第currentCount次移动后该点位置在哪里？显然的位置在：（targetPos - initPos）*（currentCount/count）+initPos。这个就是Tween.Linear算法。当这个点不是匀速运动时，就是Tween的其他算法。Tween来自Flash的AS，你可以参考http://www.robertpenner.com/easing/easing_demo.html去查看Tween各种算法的运动效果，也可以参考cloudgamer的一篇文章JavaScript Tween算法及缓动效果。相比下，我将Tween各种算法的传入参数稍改了下，将移动的总距离的运算放到了Tween算法内部，然后最后个参数是作为总共计算次数理解的，而不是持续时间。我本来是想用持续时间运算的，但是发现还是要将持续时间除以10毫秒得到总次数，然后参与运算，总次数还可能非整数，有误差，所以我干脆直接传总次数过来，当然你也可以改成持续时间。那在应用时，究竟移动次数应该写多少，在每次间隔10毫秒进行移动下，次数越多，耗时越长。譬如采用Tween.Linear计算移动位置时，大概是耗时count*10ms的1.5倍，譬如写100，就是100*10*1.5=1.5s左右，这个多出来的0.5倍是Tween.Linear计算花费的时间。贴上改写后的Tween。
+Tween:
相比move方法，fade方法是用Tween算法去计算透明度，而resize方法是用Tween算法去计算width和height，没有大的区别。利用这3个特效，一些简单的动画都能实现了。如果某对象要在移动过程中同时改变大小和设置透明度，只要三个方法连续写下来即可。如：
<input type="button" value="Move&Resize&SetOpacity" onclick="Animation.fade('divObj',50,100);Animation.resize('divObj',{x:300,y:200},100);Animation.move('divObj',{x:100,y:100},100);" />
我们玩魔兽世界的时候可以通过ctrl+r来查看当前的帧数，当帧数很小时，会觉得很卡，帧数很高则很流畅。所谓帧数就是1秒内显示图片的数量。当这么多帧图片连起来显示，就形成了动画。
Js中实现动画都是靠setInterval或者setTimeout来实现。setInterval自身就能不断循环来执行计算从而显示新的帧，setTimeout是间隔一段时间后仅执行一次，他需要配合函数循环实现，很多人偏爱setTimeout来实现。本文采用setInterval实现。
据说，普通人眼能看到1/24秒，就是说1秒至少24帧，每次移位间隔需要小于1000/24=41.7毫秒，也就说setInterval要每隔至少40毫秒执行一次，一般地，我们采用10毫秒，当然间隔时间越短，客户端执行计算次数就越多，如果你code计算量大则可以适当调长些。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
/*
t:currentCount 当前执行第t次
b:initPos 初始值
c:targetPos - initPos 发生偏移的距离值
d:count 一共执行d次
效果：http://www.robertpenner.com/easing/easing_demo.html
JavaScript Tween算法及缓动效果 http://www.cnblogs.com/cloudgamer/archive/2009/01/06/tween.html
*/
var Tween = {
Linear: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return c * t / d + b;
},
Quad: {
easeIn: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return c * (t /= d) * t + b;
},
easeOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return -c * (t /= d) * (t - 2) + b;
},
easeInOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if ((t /= d / 2) < 1) return c / 2 * t * t + b;
return -c / 2 * ((--t) * (t - 2) - 1) + b;
}
},
Cubic: {
easeIn: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return c * (t /= d) * t * t + b;
},
easeOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return c * ((t = t / d - 1) * t * t + 1) + b;
},
easeInOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
return c / 2 * ((t -= 2) * t * t + 2) + b;
}
},
Quart: {
easeIn: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return c * (t /= d) * t * t * t + b;
},
easeOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
},
easeInOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
}
},
Quint: {
easeIn: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return c * (t /= d) * t * t * t * t + b;
},
easeOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
},
easeInOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
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: {
easeIn: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
},
easeOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return c * Math.sin(t / d * (Math.PI / 2)) + b;
},
easeInOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
}
},
Expo: {
easeIn: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
},
easeOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
},
easeInOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if (t == 0) return b;
if (t == d) return b + c;
if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
}
},
Circ: {
easeIn: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
},
easeOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
},
easeInOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
}
},
Elastic: {
easeIn: function(initPos, targetPos, currentCount, count, a, p) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .3;
if (!a || a < Math.abs(c)) { a = c; var s = p / 4; }
else var s = p / (2 * Math.PI) * Math.asin(c / a);
return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
},
easeOut: function(initPos, targetPos, currentCount, count, a, p) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .3;
if (!a || a < Math.abs(c)) { a = c; var s = p / 4; }
else var s = p / (2 * Math.PI) * Math.asin(c / a);
return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
},
easeInOut: function(initPos, targetPos, currentCount, count, a, p) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if (t == 0) return b; if ((t /= d / 2) == 2) return b + c; if (!p) p = d * (.3 * 1.5);
if (!a || a < Math.abs(c)) { a = c; var s = p / 4; }
else var s = p / (2 * Math.PI) * Math.asin(c / a);
if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
}
},
Back: {
easeIn: function(initPos, targetPos, currentCount, count, s) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if (s == undefined) s = 1.70158;
return c * (t /= d) * t * ((s + 1) * t - s) + b;
},
easeOut: function(initPos, targetPos, currentCount, count, s) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if (s == undefined) s = 1.70158;
return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
},
easeInOut: function(initPos, targetPos, currentCount, count, s) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if (s == undefined) s = 1.70158;
if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
}
},
Bounce: {
easeIn: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return c - Tween.Bounce.easeOut(d - t, 0, c, d) + b;
},
easeOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if ((t /= d) < (1 / 2.75)) {
return c * (7.5625 * t * t) + b;
} else if (t < (2 / 2.75)) {
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
} else if (t < (2.5 / 2.75)) {
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
} else {
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
}
},
easeInOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if (t < d / 2) return Tween.Bounce.easeIn(t * 2, 0, c, d) * .5 + b;
else return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
}
}
}
///------------------------------------------------------------------------------------------------------
Animation = {
timer: 10,
SetOpacity: function(obj, n) {
if (document.all) {
obj.filters.alpha.opacity = n;
}
else {
obj.style.opacity = n / 100;
}
},
fade: function(obj, target, count, Func) {
obj = this.getItself(obj);
var currentCount = 0;
count = Math.abs(count) || 1;
target = target < 0 ? 0 : (target > 100) ? 100 : target;
var init = document.all ? obj.filters.alpha.opacity : window.getComputedStyle(obj, null).opacity * 100;
Func = Func || Tween.Linear;
var opr = this;
var flag = setInterval(function() {
if (currentCount > count) {
clearInterval(flag);
}
else {
currentCount++;
var tmp = Func(init, target, currentCount, count);
opr.SetOpacity(obj, tmp);
//清除小数点的误差
if (Math.abs(tmp - target) < 1) {
opr.SetOpacity(obj, target);
}
}
}
, this.timer);
},
resize: function(obj, targetPos, count, Func) {
obj = this.getItself(obj);
var currentCount = 0;
count = Math.abs(count) || 1;
var initPos = { x: obj.offsetWidth, y: obj.offsetHeight }
Func = Func || Tween.Linear;
targetPos = { x: targetPos.x < 0 ? 0 : targetPos.x, y: targetPos.y < 0 ? 0 : targetPos.y }
var flag = setInterval(function() {
if (currentCount > count) {
clearInterval(flag);
}
else {
currentCount++;
var tmpX = Func(initPos.x, targetPos.x, currentCount, count);
var tmpY = Func(initPos.y, targetPos.y, currentCount, count);
//width值不能小于0，但是算法返回值有可能出现负值
try {
obj.style.width = tmpX + "px";
obj.style.height = tmpY + "px";
}
catch (e) {
}
//清除小数点的误差
if (Math.abs(tmpX - targetPos.x) < 1) {
obj.style.width = targetPos.x + "px";
}
if (Math.abs(tmpY - targetPos.y) < 1) {
obj.style.height = targetPos.y + "px";
}
}
}
, this.timer);
},
move: function(obj, targetPos, count, Func) {
obj = this.getItself(obj);
var currentCount = 0;
count = Math.abs(count) || 1;
var elPos = this.getElementPos(obj);
var initPos = { x: elPos.x, y: elPos.y }
Func = Func || Tween.Linear;
var flag = setInterval(function() {
if (currentCount > count) {
clearInterval(flag);
}
else {
currentCount++;
var tmpX = Func(initPos.x, targetPos.x, currentCount, count);
var tmpY = Func(initPos.y, targetPos.y, currentCount, count);
obj.style.left = tmpX + "px";
obj.style.top = tmpY + "px";
//清除小数点的误差
if (Math.abs(tmpX - targetPos.x) < 1) {
obj.style.left = targetPos.x + "px";
}
if (Math.abs(tmpY - targetPos.y) < 1) {
obj.style.top = targetPos.y + "px";
}
}
}
, this.timer);
},
getElementPos: function(el) {
el = this.getItself(el);
var _x = 0, _y = 0;
do {
_x += el.offsetLeft;
_y += el.offsetTop;
} while (el = el.offsetParent);
return { x: _x, y: _y };
},
getItself: function(id) {
return "string" == typeof id ? document.getElementById(id) : id;
}
}
</script>
<style type="text/css">
.div
{
position: absolute;
border: solid 1px #849BCA;
left: 50px;
top: 100px;
width: 160px;
height: 130px;
background-color: #DBE4ED;
white-space: nowrap;
overflow: hidden;
opacity: 1;
filter: alpha(opacity=100);
}
</style>
</head>
<body>
<input type="button" value="Move" onclick="Animation.move('divObj',{x:500,y:500},100,Tween.Quart.easeInOut);" />
<input type="button" value="Resize" onclick="Animation.resize('divObj',{x:50,y:50},100,Tween.Cubic.easeIn);" />
<input type="button" value="SetOpacity" onclick="Animation.fade('divObj',50,100);" />
<input type="button" value="Move&Resize" onclick="Animation.resize('divObj',{x:300,y:200},100);Animation.move('divObj',{x:300,y:300},100);" />
<input type="button" value="Move&Resize&SetOpacity" onclick="Animation.fade('divObj',50,100);Animation.resize('divObj',{x:300,y:200},100);Animation.move('divObj',{x:100,y:100},100);" />
<input type="button" value="Reset" onclick="javascript:window.location.reload();" />
<div id="divObj" class="div" style="">
<div style="border: solid 1px green; width: 70px;">
~_~ ----></div>
<input type="text" value="input" style="width: 50px;" /><br />
<input type="button" value="button" /><br />
<img src="http://images.cnblogs.com/logo_small.gif" alt="" />
</div>
</body>
</html>
首先贴上封装好的动画类Animation.
+Animation:
其中fade方法是实现渐变效果的，resize方法是改变对象尺寸大小的，move方法是实现移动效果的。首先看下move方法，其他2个方法实现其实是类似的。
move方法的调用：Animation.move('divObj',{x:500,y:500},100,Tween.Quart.easeInOut); 第一个参数是移动的对象，第二个参数是移动的目标坐标，第三个参数是一共执行多少次移位，即移动时间内一共的帧数，即执行多少次，第4个参数是可选参数，指定Tween具体算法，若不加，则默认采用Tween.Linear。
移动问题的关键就是每次移位后，应该将移动对象定位到什么位置，即其left和top是多少。来看一个简单的数学题，当我们知道了一个点的起始位置initPos和终点位置targetPos，要求在count次移动后达到终点，该点为匀速运动，求第currentCount次移动后该点位置在哪里？显然的位置在：（targetPos - initPos）*（currentCount/count）+initPos。这个就是Tween.Linear算法。当这个点不是匀速运动时，就是Tween的其他算法。Tween来自Flash的AS，你可以参考http://www.robertpenner.com/easing/easing_demo.html去查看Tween各种算法的运动效果，也可以参考cloudgamer的一篇文章JavaScript Tween算法及缓动效果。相比下，我将Tween各种算法的传入参数稍改了下，将移动的总距离的运算放到了Tween算法内部，然后最后个参数是作为总共计算次数理解的，而不是持续时间。我本来是想用持续时间运算的，但是发现还是要将持续时间除以10毫秒得到总次数，然后参与运算，总次数还可能非整数，有误差，所以我干脆直接传总次数过来，当然你也可以改成持续时间。那在应用时，究竟移动次数应该写多少，在每次间隔10毫秒进行移动下，次数越多，耗时越长。譬如采用Tween.Linear计算移动位置时，大概是耗时count*10ms的1.5倍，譬如写100，就是100*10*1.5=1.5s左右，这个多出来的0.5倍是Tween.Linear计算花费的时间。贴上改写后的Tween。
+Tween:
相比move方法，fade方法是用Tween算法去计算透明度，而resize方法是用Tween算法去计算width和height，没有大的区别。利用这3个特效，一些简单的动画都能实现了。如果某对象要在移动过程中同时改变大小和设置透明度，只要三个方法连续写下来即可。如：
<input type="button" value="Move&Resize&SetOpacity" onclick="Animation.fade('divObj',50,100);Animation.resize('divObj',{x:300,y:200},100);Animation.move('divObj',{x:100,y:100},100);" />
- animation.rar (2.7 KB)
- 下载次数: 2
分享到：
发表评论
-
页面自动执行（加载）js的几种方法
2018-04-12 17:29 2520一、JS方法1.最简单的 ... -
判断横屏竖屏（三种）
2018-04-10 19:29 1设置页面竖屏或者横屏：portrait：竖屏 ... -
JS 操作Select元素
2017-09-13 18:35 423Code highlighting produced by ... -
getURL或navigateToURL弹出窗口被IE拦截的解决方法
2012-08-16 20:48 1881方法一：通过设置wmode可以解决问题：当wmode=’win ... -
window.location详细介绍
2012-08-13 14:56 1054window.location方法获取URL ... -
JS中的反斜杠转义字符作用
2012-04-13 09:57 2381转义字符是C语言中表示 ... -
怎么移除a 标签的onclick事件
2012-04-11 10:55 3052<html> <head> < ... -
js屏蔽按键
2012-04-01 16:47 1279<script type="text/java ... -
js屏蔽（禁止）键盘和鼠标功能键，如屏蔽鼠标右键，F5刷新等
2012-04-01 16:44 2472<!DOCTYPE HTML PUBLIC " ... -
Javascript 小巧门【一】
2012-03-29 15:18 1098javascript:window.history.forwa ... -
JS判断浏览器类型与版本
2012-02-07 10:38 1723在JS中判断浏览器的类型，估计是每个编辑过页面的开发人员都遇到 ... -
JS 简单的缓动效果
2012-01-31 14:07 1232<!DOCTYPE HTML> <html ... -
JS的小技巧和心得
2012-01-31 09:47 0【1】！！ 只要变量没赋值,!!双感叹号都为false，只要里 ... -
JavaScript Tween算法及缓动效果
2012-01-30 15:48 5135Flash做动画时会用到Tween ... -
JS- IE/FireFox/Opera/Chrome读取本地XML分析
2012-01-19 14:54 3109最近在工作之余, 想用Js+css+html写一个客户端小工具 ... -
HTML5 JS API教程 本地数据库
2011-11-25 15:27 1567有了本地数据库，我们可以进行更复杂的本地数据处理。本地数据库使 ... -
js刷新页面 方法大全
2011-08-26 17:13 726一、先来看一个简单的例子： 下面以三个页面分别 ... -
AS3和JS互相调用的小技巧 【一】
2011-08-26 14:04 3767我对chm帮助手册小解： 选择“文件”>“新建”> ... -
AS3和JS互相调用的小技巧【二】
2011-08-26 13:56 17325引用AS3和JS的互相调用 ... -
页面自动跳转的几种实现方法
2010-01-10 17:54 3279引用 几秒后自动转到下一页网页代码 方法一：使用meta标签 ...
相关推荐
在“HTML5+JavaScript动画基础”这个主题中，我们深入探讨如何利用这两者构建引人入胜的动画效果。 首先，HTML5新增了许多元素和API，如canvas标签，它提供了一个画布，允许开发者通过JavaScript绘制图形并实现动态...
在《HTML5+JavaScript动画基础》一书中，作者深入浅出地讲解了如何利用这两者来构建吸引人的动画和游戏。下面，我们将探讨这个主题中涉及的一些关键知识点。 1. **HTML5新特性**: HTML5是HTML的最新版本，引入了...
总的来说，"HTML5 JavaScript动画基础"是一本非常适合初学者和有一定经验的开发者阅读的书籍，它将帮助读者掌握HTML5和JavaScript在动画领域的应用，提升网页设计和开发的技能。通过阅读和实践书中的内容，开发者...
HTML5+JavaScript动画基础(中文完整版)
在“HTML5+JavaScript动画基础 源码”这个主题中，我们将深入探讨如何利用这两种技术来实现丰富的网页动画效果。 HTML5是超文本标记语言的最新版本，它引入了许多新的元素和API，旨在提升网页的语义化和功能。在...
由于提供的文件信息中并没有包含具体的HTML5和JavaScript动画基础的知识点，我只能根据标题和描述中提及的内容，结合HTML5和JavaScript的相关技术，为您详细解释在创建HTML5和JavaScript动画时所需掌握的基础知识点...
3. **CSS3 Transitions 和 Animations**：虽然这里是讨论JavaScript动画，但有时可以结合CSS来实现更高效的动画效果。CSS3的`transition`和`animation`属性能轻松创建简单的动画，如果浏览器支持，可以考虑使用它们...
- JavaScript动画：利用JavaScript的`requestAnimationFrame`或定时器（如`setInterval`、`setTimeout`）来逐帧改变元素属性，创建自定义动画。 - 事件驱动：结合用户交互，如点击、滚动等，触发动画效果。 2. **...
《HTML5+JavaScript动画基础》包括了基础知识、基础动画、高级动画、3D动画和其他技术5大部分，分别介绍了动画的基本概念、动画的JavaScript基础、动画中的三角学、渲染技术、速度向量和加速度、边界与摩擦力、用户...
【JavaScript 动画基础】 JavaScript 是一种广泛应用于网页和应用程序的编程语言，它在网页交互性和动态效果方面扮演着重要角色。"很有意思js动画"的标题暗示了我们将探讨使用JavaScript来创建动态视觉效果，尤其是...
首先，JavaScript动画的核心在于改变元素的样式属性，如位置、大小或透明度，然后利用浏览器的重绘和回流机制，呈现出连续变化的效果。常见的方法包括使用`requestAnimationFrame`函数、定时器（如`setTimeout`或`...
本项目通过JS实现了一款超级好看的树木生长动画，不仅美观，而且可定制性强，允许开发者根据需求进行个性化优化。接下来，我们将深入探讨这个话题，了解如何使用JavaScript、HTML、CSS以及HTML5的Canvas API来创建...
JavaScript是一种广泛应用于网页和应用程序开发的编程语言，尤其在创建交互式用户界面方面表现出色。...无论你是初学者还是有经验的开发者，这个项目都提供了学习和实践JavaScript动画技术的宝贵机会。
一、基础动画原理 动画的本质是快速连续地改变元素的状态。JavaScript通过控制时间间隔来实现这一过程，例如，每隔一定毫秒更新一次元素的位置或透明度。这种方式称为帧动画，每一帧都是动画的一部分，连续播放帧就...
5. **JS播放器**：在“龙骨动画JS播放示例代码”中，这部分内容可能涉及如何使用JavaScript来加载、播放和控制龙骨动画。开发者需要理解如何调用API来初始化动画，设置播放速度、循环次数，以及响应用户交互事件，如...
一、基础动画原理 在JavaScript中，动画的实现通常依赖于改变元素的CSS属性，如位置、大小、颜色等，然后通过浏览器的重绘或回流来呈现出动画效果。关键在于控制这些变化的时间间隔和顺序，这可以通过定时器（如`...
首先，JavaScript动画的基础是改变元素的样式属性，如位置、大小、颜色等。通过设置定时器（如`setInterval`或`requestAnimationFrame`）来间隔性地更新这些属性，我们可以创造出平滑的动画效果。例如，一个简单的...
在本项目中，“Three.js创造一个三维太阳系动画”是一个使用Three.js库构建的互动式三维可视化应用。Three.js是一个基于WebGL的JavaScript库，它允许开发者在浏览器中创建复杂的3D图形，无需深入理解底层的图形编程...
一、JavaScript动画基础 1. 时间戳与定时器：在JS中，通过`Date.now()`或`performance.now()`获取当前时间戳，结合`setTimeout()`或`setInterval()`实现动画的定时执行。这两个函数用于在指定延迟后执行函数，`...
1. GreenSock (GSAP)：这是一个强大的JavaScript动画库，提供了高级的性能和易用性，支持复杂的动画序列和时间线。 2. Anime.js：这是一个轻量级且功能丰富的动画库，支持CSS属性、SVG、DOM、JavaScript对象和数值...