在英特尔架构 Android* 设备上 HTML5 应用中创建劲酷动画与切换

平板电脑和智能手机等移动设备日益普及，Adobe Flash* 插件需要被替代。 最近 Adobe 宣称 Flash 不再支持移动设备。 因此 HTML5 是未来趋势。

画布标记

之前版本的 HTML 存在一个问题是缺少多媒体技术。 您无法在屏幕上显示视频或绘画。 借助 HTML5，<视频>和<画布>等新元素已经发布。 这些新元素可支持开发人员利用“原生”HTML 中的多媒体技术 — 只需结合 HTML 编写一些 JavaScript* 。 多媒体技术应当能够提供动画功能，而现在 HTML5 已经可以做到这一点。

HTML5 最出色的的特性之一是<画布>元素，它可用来绘制矢量图形，并产生出色效果、交互式游戏和动画。 HTML5 画布的画面完美，可创建出色的视觉材料，增强 UI、示意图、相册、图表、图片、动画和嵌入式绘画应用。 HTML5 画布结合使用 JavaScript 库和 CSS3 可帮助您创建基于 web 的交互式游戏和动画。

使用和设置画布的基础代码如下：

<canvas id= ”animation” width=”150” height=”150”> 
Sorry, your browser doesn‘t support the HTML5 element canvas. 
</canvas>

这与<img>元素十分形似；差别在于它不具有 src 和 alt 属性。 <画布>元素有两个特征： 宽和高。 如果出现渲染错误，请尝试在 <画布>属性中指明宽高属性，而不要使用 CSS。 宽和高属性分别默认为 300 和 150。 使用 id 初始化使用 JavaScript 的画布，当移动浏览器不支持时内部文本将显示为回调。

坐标系

前提条件是在坐标系中绘制画布。 画布需要围绕 x 和 y 坐标。 如果您之前使用过其它 2D 图形编程语言，您就会熟悉标准笛卡尔坐标系，其中 (0,0) 代表左上角。 如果您想将方形向右移动，您必须增加 x 轴的值；如果您想将方形向上移动，您必须增加 y 轴的值。 下图显示了 x 和 y 坐标系的实施方法。

该图显示画布区域的分辨率是 200 X 200 pix：

• 左上角是 x=0, y=0
• x 值水平增加，y 值垂直增加
• 右下角是 x=200, y=200
• 中心点是 x=100, y=100

我们定义 init 方法用来初始化。 画布是空白的。 要想绘画内容，首先 JavaScript 需要包含渲染上下文。 为了，<画布> 元素提供了 getContext()method 来采集渲染上下文和绘画功能。

function init ()
{
var cans document.getElementById(“animation);
var canctx = canvas.getContect(‘2d’);
}

这一 cans 变量可采集画布并绘画图形对象，canctx 包含渲染上下文。 本案例中是二维图形对象。

上下文包含在画布上进行绘画的基本方法，例如，arc()，lineto()，和 fill()。

绘画工具

绘制画布的绘画工具是：

• 线条
• 矩形
• 弧线
• 贝塞尔曲线和二次曲线
• 圆圈和半圆

绘制线条

我们使用 beginpath()method 重置屏幕上已有的图形。 然后使用 moveto()、lineto() 和 stroke() 技术在画布上绘制线条。

• canctx.beginPath();
• canctx.moveTo(x,y);
• canctx.lineTo(x,y);
• canctx.stroke(x,y);

beginpath() 方法确保我们开始一个新路径。 开始的新路径擦除现有路径(如有)。 您从路径的开始到结尾如果动画中发现界面线条时，可能是因为您一开始就没有使用 beginpath() 功能。 为了使用 HTML5 画布生成路径，我们可以关联不同的子路径。 每条新的子路径的最终目标是变为新的设置焦点。

moveTo()method 为新的子路径设置开始坐标。 lineTo()method 生成子路径。 我们可使用 lineWidth 和 strokeStyle 改变线条外观。 lineWidth 元素修改线条的厚度，strokeStyle 元素修改线条的颜色。

为了创建以上所示线条，我们修改代码如下：

• context.moveTo(50, 50) ? 路径初始点设置在 (x=20, y=20)
• context.lineTo(50,200) ? 明确线条的终点
• context.lineWidth = 10 ? 线条宽度
• context.strokeStyle = "#0000FF" ? 线条颜色
• context.lineCap = "round" ? 终点为圆形
• context.stroke() ? 画布中的线条漏光

三个可能的线条功能是：

• Context.round
• Context.square
• Context.butt

绘制矩形

在画布中绘制矩形的三个方法是：

• fillRect(x,y,width,height) ? 绘制填充矩形
• strokeRect(x,y,width,height) ? 绘制矩形外框
• clearRect(x,y,width,height) ? 清除指定区域并做不透明处理

以下是上述三种矩形。

绘制圆圈并作动画处理

本节我们生成一个圆圈并在画布上移动。 为了生成圆圈，我们创建 drawcircle 函数。

function drawcircle(x,y)
{
canctx.beginPath();
canctx.arc(x,y,r,0,360,true);
canctx.fill();
}

beginpath() 方法确保我们开始一个新路径。 arc(x, y, radius, startAngle, endAngle, anticlockwise) 定义圆圈的大小和形状。

fill()method 填充圆圈的颜色是由上下文对象的 fillstyle 属性的值定义的。

为了移动圆圈，我们需要使用 init 函数的 setInterval () method 以特定时间间隔改变 x 和 y 值。 基本上我们只是重画圆圈。 动画实际上来自 setInterval method。 圆圈的当前位置的增量产生了移动效果。 如果不改变 X 和 Y 的值，圆圈根本不会移动！

setInterval(draw,10);

setInterval()method 需要一个函数，或者以指定时间间隔评估表达(毫秒)。

如果执行代码，您会看到一个球平滑移动并留下轨迹。 其原因是我们未刷新框架，所有新的制图都是添加在原图之上的。 每次调用 draw() 函数进行掩盖时我们必须清除框架；最酷(也是最快)的方法是在整个画布上绘制一个大方形或者调用清除函数：

function draw()
{
    canctx.fillStyle = rgb(255,255,255);
    canctx.fillRect (0, 0,  400, 400);
if (x + dx > WIDTH || x + dx < 0)
    dx = -dx;
  if (y + dy > HEIGHT || y + dy < 0)
    dy = -dy;
  circleX += dx;
  circleY += dy;
  drawcircle(circleX, circleY);
}

注： CircleX 和 CircleY 分别是圆圈的 X 和 Y 位置，而 dx 和 dy 是当前位置的位移。

切换是不同形状或情景之间的改变过程。 为了 HTML5 应用添加切换，我们使用 CSS 文件。 例如，链接上的即时延迟效果。 且住切换功能，您可扩大更改的范围。 这有助于关注应用的特定部分。

一般来说，当 CSS 属性值改变时，提取结果会立即合理化，受到影响的特性的原有属性值会立即改为新的属性值。 本节介绍如何使用新的 CSS 属性定义切换。 使用这些属性，对象可从一个状态平滑切换至另一个状态。

切换-属性:

切换-属性线条概括了我们需要改变哪些 CSS 属性。 默认值是“无”，它表示无切换。 如果我们插入值“全部”，则表示应用所有切换。

切换-时长:

切换-时长属性概括了切换长度。 当元素更改至原始状态，则时长一致。 我们规定时长单位为秒(数字后跟“s”)或毫秒(“ms”)。 默认为零秒(0s)。

切换-定时-函数:

切换-定时-函数属性指明浏览器进行切换的速度以及速度随切换长度的改变状态。 默认值是缓慢(ease)。 其它预定义的值是线性(linear)、缓慢开始(ease-in)、缓慢结束(ease-out)、和缓慢开始结束(ease-in-out)。

切换-延迟:

切换-延迟属性指明在切换开始之前的那个时间段，也就是切换启动以后开始显现切换的那个时间段。

.example { 
    transition-property: background-color; 
    transition-duration: 5s; 
    transition-timing-function: ease-out; 
    transition-delay: 2s; 
}

切换速记

我们可以在单个速记声明中声明所有属性。 因此，我们可以按照以下方法启动上述示例：

	.example { 

	    transition: background-color 5s ease-out 2s; 

	}

时间系列值必须有一个权威规定。 第一个时间值始终代表时长，如果您需要延迟，您必须首先定义时长。

触发切换

上面我们已经介绍了 CSS3 切换的句法，现在我们看一下如何触发切换。 触发切换的最佳方法是： 悬停伪类。 代码是： 悬停触发是这样的：

	.example { 

	    background-color: green; 

	    transition: background-color  5s ease-out 2s; 

	} 

	.example:hover { 

	    background-color: red 

	}

如果我们悬停一个元素，背景颜色会在 5 秒内由绿变红，之前还有 2 秒初始延迟。

其它切换触发事件：除了 悬停触发

触发切换并没有触发本身重要(在上述场景中，触发事件是： 悬停)。 实际导致切换发生的是元素状态的变化。

除了“悬停:触发”，还有很多切换触发方法。

使用： 活动

所谓的 活动伪类是我们点击元素并握住鼠标按钮不放时的状态。 代码是这样的：

	.example { 

	    width: 200px; 

	    height: 200px; 

	    transition: width  5s ease-out; 

	} 

	.example: active { 

	    height: 400px; 

	}

在这一代码示例中，当我们点击并握住元素，高度属性切换就开始发生，从而保留了元素的“活动”状态。

我们可用来触发切换的其它伪类有焦点核对。 我们还可综合使用 HTML5、CSS 和 JavaScript 触发切换，开发精彩移动应用。

其它相关文章与资源

HTML5 新标记
HTML5 图形
为英特尔? 架构 Android* 设备上的 HTML5 游戏添加声音
在英特尔? 架构 Android* 操作系统设备上开发首个 HTML5 太空飞船游戏
HTML5: 使用画布绘图

如需深入了解面向安卓开发人员的英特尔工具，请访问：面向安卓的英特尔? 开发人员专区。

英特尔和 Intel 标识是英特尔公司在美国和/或其他国家的商标。
版权所有 ? 2013 年英特尔公司。 保留所有权利。
*其他的名称和品牌可能是其他所有者的资产。