Adobe 的 HTML5 实验

jopen 8年前

        尽管 HTML5 技术差不多已经将 Adobe 的 Flash 逼上了绝路,但这并不意味着 Adobe 要始终与 HTML5 为敌。相反,Adobe 现在也是 HTML5 技术的主要支持者之一。

        Adobe 的 Web 平台团队正在实施一些新的图形特性,并在一个网页中通过讲故事的形式展示出来,你可以直接在 thegraphicalweb.com 中观看,也可以通过这个视频来观看。

        该项目使用到的技术主要包括:

        1.   SVG(Scalable Vector Graphics,可缩放矢量图形)

        由于 SVG 的扩展性以及易于与 CSS/ JavaScript 操作特性,该技术被贯穿使用在 thegraphicalweb.com 网站中。其中动态 SVG 创建和动画效果,基于一个流行的 SVG 数据可视化库 D3.js。D3在该网站中主要用于在背景中生成群山的形状。

Adobe 的 HTML5 实验

        2.   CSS3 和 SASS

        在网站中,主要使用 CSS Animation和 Transforms 属性来实现闪烁和移动效果,这些属性被应用到内联 SVG 的路径和元素上。SASS 是构建于 CSS 之上的元语言,扩展了 CSS3,增加了规则、变量、混入、选择器、继承等特性。该网站主要使用 Sass 来生成良好格式化的 CSS 代码。

        3.   2D Canvas

        在网站中,使用 Processing.js 来实现一个粒子系统,通过切换点阵的组合形式,来呈现一个说话的人脸效果。

Adobe 的 HTML5 实验

        4.   着色器

        该网站使用了一个自定义的 GLSL 着色器,来实现 WebGL 场景中发光的背景效果。通过 CSS Filter Lab 这个工具,编写自定义着色器的难度大大降低。

Adobe 的 HTML5 实验

        此外,该网站还使用 3D Transforms 来实现场景旋转、缩放效果,使用 HTML5 Audio 来播放音频。

        该网站的源码托管在 Github,感兴趣的 Web 开发者可以下载学习。

        演示网站:thegraphicalweb.com

        项目源码:https://github.com/adobe/graphicalweb-keynote

来自: www.iteye.com