日期:2012-10-23 浏览次数:452
尽管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在该网站中主要用于在背景中生成群山的形状。
2.CSS3和SASS
在网站中,主要使用CSS Animation和Transforms属性来实现闪烁和移动效果,这些属性被应用到内联SVG的路径和元素上。SASS是构建于CSS之上的元语言,扩展了CSS3,增加了规则、变量、混入、选择器、继承等特性。该网站主要使用Sass来生成良好格式化的CSS代码。
3.2D Canvas
在网站中,使用Processing.js来实现一个粒子系统,通过切换点阵的组合形式,来呈现一个说话的人脸效果。
4.着色器
该网站使用了一个自定义的GLSL着色器,来实现WebGL场景中发光的背景效果。通过CSS Filter Lab这个工具,编写自定义着色器的难度大大降低。
此外,该网站还使用3D Transforms来实现场景旋转、缩放效果,使用HTML5 Audio来播放音频。
该网站的源码托管在Github,感兴趣的Web开发者可以下载学习。
演示网站:thegraphicalweb.com
项目源码:https://github.com/adobe/graphicalweb-keynote