trackbacks-0
在AJAX如火如荼的今天，相信大家对Prototype这个Javascript类库应该都有所耳闻，它也的确使编写Javascript变得更简单。关于Prototype的文章，《Prototype简介》、《Prototype源码》诸如此类数不胜数；所以本文不会再做这几方面的介绍，并假设读者对Prototype有一定了解。
网页动画与原理
提到网页动画，大家首先想起应该Flash。不知道大家没有开发过Flash动画，故我想对此作一个简单的介绍（在我读大学的时候，对Flash也曾有过痴迷，所以也略懂一二）。Flash的动画主要分两类：渐变动画和逐帧动画。
渐类动画——用户在时间轴上创建开始的关键帧和结束的关键帧，开发环境（Macromedia Profassional Flash 8等）会根据以上所创建的关键帧的颜色、位置和形状等，在计算出中间的过渡帧并添加到相应的时间轴上。这适用于创建简单的动画。
逐帧动画——用户在时间轴的每帧上创建关键帧，并在其中绘制相应的图按。这适用于创建复杂的动画。
在Javascript中由于没有绘图API（应用程序接口），故只可以使用DOM+CSS改变元素的外观。而通过每隔一段时间调用一次改变元素外观的函数，实现类似Flash的渐类动画。
因为不同的Javascript动画实现的基本原理都相同，所以可以创建一个基类将其抽象出来。代码如下：
var Animation
= Class.create();
Animation.prototype =
& &/**//*------------------------------------------------------------------------
& & | 用途：
& & | & &构造函数
& & | 参数：
& & | & &element 将要实现动画效果的元素
& & | & &fps & & 每秒播放帧数
& & ------------------------------------------------------------------------*/ & &
& &initialize: function(element, fps)
& & & &this.element
= $(element);
& & & &this.interval
= Math.round(<span
style="color: #00
& & & &this.isPlaying
& & & &this.currentFrame
<span style="color: #; &&
& & & &//创建一个用于存储中间状态的临时对象
& & & &this.temp
& &/**//*------------------------------------------------------------------------
& & | 用途：
& & | & &子类覆盖该方法，实现自定义的动画补间
& & ------------------------------------------------------------------------*/ & &
& &_createTweens:
function(original,
transformed, frames)
& &/**//*------------------------------------------------------------------------
& & | 用途：
& & | & &创建动画补间
& & | 参数：
& & | & &original & &开始状态
& & | & &transformed 结束状态
& & | & &frames & & &动画帧数
& & ------------------------------------------------------------------------*/ & &
& &createTweens: function(original, transformed, frames)
& & & &if(this.isPlaying)
& & & & & &this.stop();
& & & &this._createTweens(original,
transformed, frames);
& & & & & &
& & & &this.original
& & & &this.transformed
& & & &this.frames
& & & &//将开始状态拷贝到临时对象
& & & &Object.extend(this.temp, original); & & & &
& &/**//*------------------------------------------------------------------------
& & | 用途：
& & | & &判断临时对象状态是否超出结束状态
& & | 参数：
& & | & &prop 状态属性名称
& & ------------------------------------------------------------------------*/ &&
& &_isOverstep:
function(prop)
& & & &if(this.original[prop]
& this.transformed[prop])
& & & & & &return this.temp[prop]
this.transformed[prop];
& & & &return this.temp[prop]
this.transformed[prop];
& &_prepare: function()
& &_draw: function(frame)
& &_drawFrame: function()
& & & &if(this.isPlaying)
& & & & & &if(this.currentFrame
this.frames)
{ & & & & & & & &
& & & & & & & &this._prepare();
& & & & & & & &this._draw(this.temp);
& & & & & & & &
& & & & & & & &this.currentFrame ++;
& & & & & &}
& & & & & & & &//最后一帧绘制结束状态 & & & & & &
& & & & & & & &this._draw(this.transformed);
& & & & & & & &this.stop();
& & & & & &}
function()
& &play: function()
& & & &if(!this.isPlaying)
& & & & & &this._play();
& & & & & &
& & & & & &this.isPlaying = true;
& & & & & &this.timer =
setInterval(this._drawFrame.bind(this),
this.interval); &
& &_stop: function()
function()
& & & &if(this.isPlaying)
& & & & & &this._stop();
& & & & & &
& & & & & &//回到开始状态
& & & & & &this.isPlaying = false;
& & & & & &this.currentFrame = <span style="color: #;
& & & & & &
& & & & & &Object.extend(this.temp,
this.original);
& & & & & &clearInterval(this.timer);
& &_pause: function()
& &pause: function()
& & & &if(this.isPlaying)
& & & & & &this._pause();
& & & & & & & & &
& & & & & &this.isPlaying = false;
& & & & & &clearInterval(this.timer);
清单1 Animation.js
Animation类实现了一些公用的管理内部状态的操作，如播放动画、停止动画和暂停动画等。接下来，创建特定的动画变得相当容易了，下面让我们来看一个形状和位置渐变的动画实现，代码如下：
var ShapeAnimation
= Class.create();
ShapeAnimation.prototype
= Object.extend(new Animation(),
& /**//*------------------------------------------------------------------------
& & | 用途：
& & | & &覆盖父类的空白实现，计算每帧的变化量
& & ------------------------------------------------------------------------*/ & &
& &_createTweens: function(original, transformed, frames)
& & & &this.xSpan
= Math.round((transformed.x
- original.x)
/ frames);
& & & &this.ySpan
= Math.round((transformed.y
- original.y)
/ frames);
& & & &this.wSpan
= Math.round((transformed.w
- original.w)
/ frames);
& & & &this.hSpan
= Math.round((transformed.h
- original.h)
/ frames);
& &/**//*------------------------------------------------------------------------
& & | 用途：
& & | & &覆盖父类的空白实现，计算当前的状态。如果超出结束状态，保持结束状态不变
& & ------------------------------------------------------------------------*/
& &_prepare: function()
& & & &this.temp.x
this._isOverstep('x')
this.transformed.x
: this.temp.x
& & & &this.temp.y
this._isOverstep('r')
this.transformed.y
: this.temp.y
& & & &this.temp.w
this._isOverstep('w')
this.transformed.w
: this.temp.w
& & & &this.temp.h
this._isOverstep('h')
this.transformed.h
: this.temp.h
& &/**//*------------------------------------------------------------------------
& & | 用途：
& & | & &覆盖父类的空白实现，刷新元素外观
& & ------------------------------------------------------------------------*/
function(frame)
& & & &var
x = frame.x
& & & &var
y = frame.y
& & & &var
w = frame.w
& & & &var
h = frame.h
& & & &Element.setStyle(this.element,
{ left: x, top: y, width: w, height: h });
清单2 ShapeAnimation.js
ShapeAnimation类继承Animation类，并覆盖了其中的某些方法。最后，让我们创建HTML文件，测试一下这个ShapeAnimation是否可以正确工作。代码如下：
&!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
xmlns="http://www.w3.org/1999/xhtml"&
& & &title&ShapeAnimation Test&/title&
& & &script
type="text/javascript" src="prototype-1.4.0.js"&&/script&
& & &script
type="text/javascript" src="Animation.js"&&/script&
type="text/javascript" src="ShapeAnimation.js"&&/script&
& & &script
type="text/javascript"&
& & & & Event.observe(window, 'load', init,
function init() {
& & & & & &
= $('clip');
& & & & & &
= Position.cumulativeOffset(clip); & & &
& & & & & &&
& & & & & & animation =
new ShapeAnimation(clip, 12);
& & & & & & animation.createTweens( { x: pos[0], y: pos[1], w:
& & & & & & & & & & & &
& & & & & & { x: 100,
y: 100, w:
& & & & & & & & & & & &
& & & & & &
function play() { &
& & & & & & animation.play(); & & &
function stop() {
& & & & & & animation.stop(); & &&
function pause() {
& & & & & & animation.pause(); & &
& & &/script&
type="button" onclick="play()" value="Play" /&
& & &input
type="button" onclick="stop()" value="Stop" /&
& & &input
type="button" onclick="pause()" value="Pause" /&&br
src="thumb.jpg" alt="Thumb" id="clip" style="left: 13 position:
清单3 ShapeAnimationTest.htm
分别在IE或Firefox中打开ShapeAnimationTest.htm，播击&#8220;Play&#8221;、&#8220;Stop&#8221;和&#8220;Pause&#8221;按钮工作正常。
上述例子，我创建了形状动画类。有了Animation类作为基类，当然我可以容易地创建更多的动画类。下面我再举一个裁剪动画示例。代码如下：
var ClipAnimation
= Class.create();
ClipAnimation.prototype
= Object.extend(new Animation(),
& &_createTweens: function(original, transformed, frames)
& & & &this.tSpan
= Math.round((transformed.t
- original.t)
/ frames);
& & & &this.rSpan
= Math.round((transformed.r
- original.r)
/ frames);
& & & &this.bSpan
= Math.round((transformed.b
- original.b)
/ frames);
& & & &this.lSpan
= Math.round((transformed.l
- original.l)
/ frames);
& &_prepare: function()
& & & &this.temp.t
this._isOverstep('t')
this.transformed.t
: this.temp.t
& & & &this.temp.r
this._isOverstep('r')
this.transformed.r
: this.temp.r
& & & &this.temp.b
this._isOverstep('b')
this.transformed.b
: this.temp.b
& & & &this.temp.l
this._isOverstep('l')
this.transformed.l
: this.temp.l
& &_draw: function(frame)
& & & &var
clipStyle =
'rect(' + frame.t
& & & &clipStyle = clipStyle + frame.r + 'px ';
& & & &clipStyle = clipStyle + frame.b + 'px ';
& & & &clipStyle
= clipStyle
+ 'px)'; & &
& & & &Element.setStyle(this.element,
{ clip: clipStyle });
清单4 ClipAnimation.js
测试文件代码如下：
&!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
xmlns="http://www.w3.org/1999/xhtml"&
& & &title&Untitled Page&/title&
& & &script
type="text/javascript" src="prototype-1.4.0.js"&&/script&
& & &script
type="text/javascript" src="Animation.js"&&/script&
type="text/javascript" src="ClipAnimation.js"&&/script&
& & &script
type="text/javascript"&
& & & & Event.observe(window, 'load', init,
function init() {
& & & & & &
= $('clip');
& & & & & &
= Position.cumulativeOffset(clip);
& & & & & &
var dimensions
= Element.getDimensions(clip);
& & & & & &&
& & & & & & animation =
new ClipAnimation(clip, 12);
& & & & & & animation.createTweens( { t:
0, r: dimensions.width, b: Element.getHeight(clip), l:
& & & & & & & & & & & &
& & & & & & { t: 0,
r: dimensions.width, b:
& & & & & & & & & & & &
& & & & & &
function play() { &
& & & & & & animation.play();
function stop() {
& & & & & & animation.stop(); & &&
function pause() {
& & & & & & animation.pause(); & &
& & &/script&
& & &input
type="button" onclick="play()" value="Play"
& & &input
type="button" onclick="stop()" value="Stop" /&
& & &input
type="button" onclick="pause()" value="Pause" /&&br /&
src="thumb.jpg" alt="Thumb" id="clip" style="left: 13 position:
清单5 ClipAnimationTest.htm
Prototype实现了部分的面向对象，对常用的操作提供了方便的封装。这样我们可以编写具有更高可重性的Javascript代码，将实现重HTML文件中分离出来，使程序结构更清晰可读。
阅读(...) 评论()keil4出现“play2（）requires ANSI-style prototype”_百度知道
keil4出现“play2（）requires ANSI-style prototype”
我再把play2（）从头文件的定义中剪切到main.c中就好了，这是什么意思？那位大虾帮帮
将声明语句添加到头文件中。譬如 void play2(void)。根据实际情况添加参数声明好像是说你声明play2（）的时候没有对参数声明吧
其他类似问题
按默认排序
其他1条回答
是不可以的。 比如说声明时void delay( int i);写成void delay()应该是你的声明格式错了，就是在头文件里面的play2（）括号里面的格式或者之前格式弄错了
ansi的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁vivoxplay手机软件装在哪里不卡？！系统空间还是手机优盘？！_百度知道
vivoxplay手机软件装在哪里不卡？！系统空间还是手机优盘？！
好！建议您将应用程序安装手机U盘内哦，可以有效解决系统空间过多而导致手机卡顿的问题哦。非常感谢您对我们vivo的支持。如果有任何问题可以随时来咨询我们的，祝您生活愉快
已回答225008
响应时间&9小时
其他类似问题
优盘的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁现在shadowplay是不是还不支持移动卡？_nvidia吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：18,356贴子：
现在shadowplay是不是还不支持移动卡？收藏
是移动卡 也显示了就绪 但是alt+f9始终没用 是还不支持么？但为什么会显示就绪？
右上角的开关打开了吗？发布800M系列时候说了会让移动版支持shadow play，所以现在的驱动可能是支持了
土豪买AW了？
壕，我表示我的本子下面两个都是not ready
我也是显示可用但没试过
土豪，alienware？　　　来自SONY s39h 四核神机
看这次测试版驱动的提示说是2.0版GE支持移动卡了，可以去试试
支持了吧，以前需要快捷方式加“ -shadowplay”就行了，而且2.0版貌似右上角可以看到那个开关啊。
设置好了用不了，不知道为什么
支持了但是还是有 BUG
是支持移动卡的
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或