CSS3动画——也在3 d

让我们先从最简单的使用声明性技术:CSS3。 不需要JavaScript在这里,只是普通的旧的CSS,一些现代的技巧。 

CSS可以用来声明使用两种基本属性动画:过渡和动画。 转换属性告诉浏览器计算中间帧在两个州,每个定义为自己的CSS。 动画时触发CSS元素的变化。 例如,因为你通过编程改变类或者因为一个 :悬停 CSS已经启动了。 

图像会平稳的从一个地方到另一个阶级的缩略图变化 开始 到 结束 ,通常是由于一个JavaScript DOM操作。

• 查看源代码
• 复制代码

1. IMG  {  webkit过渡  :  1 s  ;  }
2. 开始  {  左  :  0 px  ;  }
3. 结束  {  左  :  500 px  ;  }

动画属性最适合用于需要持续运行动画。 它还允许您定义中间步骤的动画。 

创建一个旋转的图像:

• 查看源代码
• 复制代码

1. IMG  {  webkit动画  :  myAnim 3 s无限  ;  }
2. @ webkit关键帧myAnim
3. {
4. 从  {  webkit变换  :  旋转  (  0度  )  }
5.    50%  {  / *可能的中间位置在任何%
6. * /  }
7. 到  {  webkit变换  :  旋转  (  360度  )  }
8. }

你可以用动画有数量惊人的CSS属性。 让创意与动画 边框宽度 是可能的,如果你有意。 然而,大多数有用的属性是几何变换和不透明度动画。 CSS3提供全系列的二维几何变换通过方便的转换属性: 翻译 , 旋转 , 规模 和 斜 。 

创建2 d转换和旋转,缩放和歪斜 :

• 查看源代码
• 复制代码

1. webkit变换  :  旋转  (  30度  )
2. webkit变换  :  规模  (  0.5  )
3. webkit变换  :  斜  (  -20度  ,  20度  )

这正是事情变得有趣。 如果你觉得添加3 d到CSS技术专为粗体和斜体,完成精神失常,继续阅读。 这是一种很自然的方式完成通过扩展几何转换到三维。 相同的变换属性现在还可以做translateX , translateY , translateZ ,以及 rotateX , rotateY , rotateZ 。 

旋转一个图像在三维:

• 查看源代码
• 复制代码

1. webkit变换  :  rotateY  (  45度  )

用多一点点的努力,和一个动画扔在,看,一个旋转的三维立方体。

它不会被任何有趣的如果它确实是这容易。 规范设计者确定让人过瘾了,留下几个陷阱在路上。 如果你试图旋转一个图像,图像是由浏览器呈现的默认情况下没有透视:

• 查看源代码
• 复制代码

1. webkit变换  :  rotateY  (  45度  )

它可以添加使用透视房地产,不幸的是默认为无限价值影响的角度来看都没有。 物体接近相机以及远是相同的大小。 

使事情看起来更真实,你必须指定一个有限值之间的距离相机和屏幕。 添加 -webkitperspective:1000像素 通常能够奏效。

一点数学:什么是透视吗?

代表一个3 d对象在一个平坦的荧屏,你画一条线从眼睛或相机的点在三维空间你想代表。 它的交叉与界面中相应的像素应该。 为了找到坐标的像素在屏幕上,使用泰勒斯定理,你需要的3维坐标的点在空间和相机之间的距离和屏幕(f也被称为焦距在光学)。 这是距离角度提供的财产。 如果这个距离是无限的,你可以看到,所有的 射线 (眼睛的3 d点线)水平并关闭和遥远的对象具有相同的大小在屏幕上。 

现在我们认为我们拥有一切,我们需要设置一个3 d多维数据集,使用六个图片和CSS 3 d变换,下一步是让它旋转。

旋转它

那应该很容易:附上它 Div 我们应用一个三维旋转。 如果我们这样做,这是发生了什么。

浏览器确实你告诉它:它呈现一个3 d多维数据集 Div ,再应用三维旋转它,就好像它是一个平面图像。 这不是你想要的。 不幸的是,这是默认的行为。 告诉浏览器,你想组合3 d变换应用到嵌套div ,你必须使用 webkit变换风格:preserve-3d 财产。 这样,我们得到我们想要的旋转立方体。

让它正确

很容易迷失在太空。 我的建议是首先 Div 我们将调用 场景 。 这就是透视房地产走。 内,把一Div 称为 对象 。 它应该有t ransform-style:preserve-3d 财产和这 Div 是你应用这些转换,将整个对象。 最后,在那 Div ,使用3 d变换将面临如你希望创建所需的对象——在我们的例子中,这个立方体的六个面:

• 查看源代码
• 复制代码

1. 场景  {  webkit角度  :  1000 px  ;  }
2. 对象
3. {
4. webkit变换风格  :  preserve-3d  ;
5. webkit变换  :  rotateX  (  20度rotateY  (  120度  )  rotateZ  (  50度  )  ;  / *取代这一动画属性如果你想运动* /
6. }
7. .FACE1  {  webkit变换  :  translateX  (  150 px  )
8. rotateY  (  90度  )  ;  }
9. …

伟大的事情与3 d CSS转换是他们完美的运作与CSS动画和过渡。 一个锻炼左动画一个旋转的立方体,它打开当鼠标光标悬停在它。 很简单:转换将面临立方体的将其放置在一个特定的距离立方体的中心。 第二组用CSS属性 :悬停 选择器将其放置在一个更大的距离。 通过应用 过渡:1年代财产的面孔,你会看到立方体开放在盘旋,即使它使纺丝( 看到一个演示 )。

可缩放矢量图形(SVG)

HTML和CSS是相当强大的动画技术但缺乏图纸原语。 这就是SVG是和它有它自己的一组动画标签。 动画部分的SVG规范被称为同步多媒体集成Langugage(SMIL)。 

首先,下面是SVG发明:矢量原语如矩形、圆和贝塞尔曲线(见图11):

• 查看源代码
• 复制代码

1. < svg >
2.    <矩形x = “5” Y = “5” 宽度 = “140” 高度 = “140” 中风 = “000000 #” strokewidth = “4” 填补 =“# AAAAFF” 透明度 = “1” / >
3. < / svg >

也可用:

• 查看源代码
• 复制代码

1. <线x1 y1 x2 y2 >
2. <圆残雪cy r >
3. <路径d >
4. <图像x y 宽度 高度 xlink:href >

其中一个原语, <路径> 标记,是瑞士军刀的SVG。 它允许您定义一个任意的路径使用线、弧和贝塞尔曲线。 路径定义看起来像一个字母汤,最好是留给被生成的矢量图形软件如 Inkscape 。 对于SVG动画,你还必须理解这一点虽然,所以这里有一种底漆。 

一个例子的二次和三次贝塞尔曲线:

• 查看源代码
• 复制代码

1. < svg >
2.    <路径d = “米30240问170,40 260230”
3. 中风 = “# F00” / >
4.    <路径d = “米30240 C 70 210150 260230”
5. 中风 = “# F00” / >
6. < / svg >

语法:

M x,y新笔位置(标记) 
L x,y线 
问残雪,cy,x,y二次贝塞尔曲线(x,y)和一个控制点 
C残雪,dx,dy,cy,x,y立方贝塞尔曲线(x,y)和两个控制点 
一个椭圆弧形 
z在字符串末尾,关闭路径

让我们把一些生活在这些向量。 你可以看到一个演示一个小SVG家伙穿云在冲浪板 如果你遵循这个链接 ,请点击图片。

冲浪板是上下摆动和嘴的字符之间交替进行一个大的和一个巨大的笑容而眼睛是滚动着扩张的学生,就像任何好的冲浪的。 这些是这4种可能的SVG动画。 

最简单的SVG动画使用 <动画> 标记一个参数的动画一个几何形状,在这个例子中,眼睛的半径。

使瞳孔扩张, 值 属性列表半径值我们想推动之间。

• 查看源代码
• 复制代码

1. <圆残雪 = “200” CY = “205” R = “80” >
2.    <激活大调的 = “3 s” attributeName = “R” 值 = “80;150;80” repeatCount = “无限期” / >
3. < / 圆>

好处是,属性也可以是你想办法 d 的 <路径> 标签。 这允许您创建一个动画路径。 惟一的限制是两个曲线之间进行动画必须是同一类型的和具有相同数量的控制点;他们的定义必须由同一字母在同一位置,只有数值参数的改变。 当移动的嘴的性格,只有“大微笑”和“巨大的微笑”位置定义。 SVG动画做的插值。

• 查看源代码
• 复制代码

1. <路径填 = “# fff“ >
2.    <动画attributeName = “d” 大调的 = “2 s” repeatCount = “无限期” 值 = “m 0,0 c 1、15 -13,-45,-32,45 45 0 -44,-28 -44,-44 z;m 0,0 c 4、15 -66106 -98106 -32,0 3 -89 9,-105 z” />
3. < / 路径>

当然,SVG也有几何变换,可以动画。 动画制作的标签,这一次,称为 < animateTransform > 。 你必须告诉它,改变你想激活和提供一个分号分隔的值列表的所有关键岗位。 创作动画转换是可能的,太。 你告诉浏览器使用的 添加剂=“金额” 属性。

动画几何转换:

• 查看源代码
• 复制代码

1. < g >  …  < ! ————> SVG元素组
2.    < animateTransform大调的 = “3 s” repeatCount = “无限期” 添加剂 = “和” attributeName =“转换” 类型 = “翻译” 值 = “0,0,200,-130,-100200,0,0” / >
3.    < animateTransform大调的 = “3 s” repeatCount = “无限期” 添加剂 = “和” attributeName =“转换” 类型 = “旋转” 值 = “0;20;-20;0” / >
4. < / g >

第三个和最后一个SVG动画标签也是最宝贵的。 < animateMotion > 用于指示一个对象遵循一个路径。 它有一个隐藏的小宝石称为 旋转=“自动” 属性。 这使得对象不仅遵循指定的路径也是东方本身总是脸朝前,一辆车路后。 

革命的眼睛是实现通过发送一个椭圆路径上的学生使用 < animateMotion > 标签。

• 查看源代码
• 复制代码

1. < g >  …  < ! ————> SVG元素组
2.    < animateMotion大调的 = ”1年代 “repeatCount = " 不定 “路径= " 米 0 , 0 一个 15 , 11 0 1 1—— 30 , 0 15 , 11 0 1 1 30 , 0 Z " / >
3. < / g >

最后,有很多功能的SMIL动画控制。 它暴露了 pauseAnimations() , unpauseAnimations() 和setCurrentTime(t) 函数在它的JavaScript API来启动/停止/恢复全球动画。 它还指定了 开始 和结束 在所有三个动画属性标签( <动画>,< animateTransform >,< animateMotion > )。 这些可以使用,通过一个相当过时但功能语法,一个强大的组合,用户事件的时间戳和动画事件。 例如,您可以指定一个动画应该开始一秒后点击或结束的另一个动画,无论哪个首先发生。 

例如,这个SVG动画按钮跳转一个移动的阴影效应当点击:

• 查看源代码
• 复制代码

1. < g id = “buttonID” >
2.    < ! ————> SVG按钮艺术品在这里
3.    <动画开始 = “buttonID.click” 大调的 = “1 s” \
4. … / >
5. < / g >

HTML5画布

切换到程序的声明性动画技术, <帆布> 标签是你的第一选择。 所有本文中描述的技术,它有最好的跨浏览器支持和浏览器厂商去很多努力使它能够60 fps动画。 这里是你如何设置一个画布:

• 查看源代码
• 复制代码

1. <帆布 宽度 = “400” 高度 = “400” 风格 = “宽度:400 px;高度:400 px;” > < / 帆布>

第一个尺寸(标签属性)设置画布的决议。 这是坐标空间的大小,您将使用。 第二个尺寸(CSS属性)是画布的大小的矩形,因为它出现在屏幕上。 不是很好设置的物理尺寸的画布至100%,保持内部坐标空间不变,让浏览器渲染图正确任何窗口的尺寸吗? 不幸的是,浏览器规模画布的内容作为一个位图。 任何升级导致模糊混乱的像素。 因此,设置这两个大小相同的值是唯一可行的选项。 

你发起一个帆布通过查询你的 <帆布> 元素在JavaScript和调用 getContext(“2 d ') 函数在它。 绘图上下文对象获得用于所有调用到画布API。 上下文是有状态和商店三种类型的状态信息:绘画风格,当前的几何变换和累积图路径。 绘制一些东西的方式在画布上绘制命令发出,不产生任何可见但创建一个路径在内存中,然后发出一个墨水命令( ctx中风() , ctx填补() 或两者)使路径出现。

逐帧动画

动画这个画布,您需要一个动画循环,这你应该基地 requestAnimationFrame() 函数(正确供应商前缀!)。 这个函数使浏览器能够管理帧率甚至停止动画如果浏览器选项卡是隐藏的。

• 查看源代码
• 复制代码

1. 函数  runAnimation  (  )
2. {
3. yourWorld。  画  (  )  / /这是你的绘图代码
4. webkitRequestAnimationFrame  (  runAnimation  )  ;
5. }

通常,帆布用于动画,天体的位置必须决定一个逐帧的基础上,例如,因为他们的结果从一个物理仿真。 看到一个box2dweb。 js演示 。 不断变化的模拟对象的位置在模拟世界和动画循环周期性地显示当前状态的世界在屏幕上。

SVG精灵在画布

一个有用的技巧是使用SVG精灵在一个帆布动画。 一个静态的矢量图片非常啰嗦的复杂性在画布上。 这样做实际上是可能的虽然不是简单如发送 svg 到 ctx.drawImage() 。 对于模糊的安全原因,只有内联SVG支持,你必须得到它使用Blob API( 获取代码 )。 

SVG雪碧将显示在任何规模的向量美丽,但遗憾的是,只有在Chrome。

使用WebGL

WebGL暴露了OpenGL API应用程序在浏览器中运行的JavaScript代码,没有任何插件。 从理论上讲,所有你需要做的是调用 getContext(“webgl”) 在一个 <帆布> 元素(而不是 2 d 以前)和你很好去。 然而,WebGL是一个非常大、非常低级的API。 最重要的是,web版本没有的默认渲染路径”,这意味着你不能给它一个形状和告诉它显示它使用任何它认为合适的默认值。 你必须写着色器,使用GLSL语言都显示在屏幕上。 

幸运的是,三个。 js来救援。 三是图书馆最初写的杜布先生几铬演示( www.ro.me /www.chaostoperfection.com )但它住在它自己的。 它有所有的基本以及异国情调的着色器已经建在这样你就可以专注于有用的东西:相机、灯光和行动! 

首先你需要使用三胶水代码(不是很有趣,但是很简单):

• 查看源代码
• 复制代码

1. var  渲染器  =  新  三。
2. WebGLRenderer  (  {  平滑  :  真正的  }  )  ;
3. 渲染器。  setSize  (  宽度  ,  高度  )  ;
4. 渲染器。  setClearColorHex  (  0 x000000  ,  0  )  ;  / /颜色,
5. 透明度
6. / /渲染器创建一个画布elementfor你
7. 文档。  whereeveryouwant
8. 。  方法的  (  渲染器。  domElement  )  ;

所以,在灯光和行动,你创建一个照相机和位置,它在你的场景:

• 查看源代码
• 复制代码

1. / /参数:FOV,
2. viewAspectRatio  ,  zNear  ,  ZFar
3. var  相机  =  新  三。  PerspectiveCamera  (  35  ,
4. 宽度  /  高度  ,  1  ,  10000年  )  ;
5. 相机。  位置  。  Z  =  300年  ;

其次,要有光:

• 查看源代码
• 复制代码

1. var  光  =  新  三。  方向性光源  (  0 xffffff  ,  1  )  ;
2. / /颜色,强度
3. 光。  位置  。  集  (  1  ,  1  ,  0.3  )  ;  / /方向

然后我们需要显示。 为什么不是一个立方吗? 3 d物体在三个被称为网格。 这些都是由一个几何和材料。 

在这里,我们使用一个简单的结构:

• 查看源代码
• 复制代码

1. var  纹理  =  三。  ImageUtils  。  loadTexture  (  &  开口  ;  Ferna
2. Togni ndo。  jpg  &  捣鬼  ;  )  ;
3. var  立方体  =  新  三。  网  (  新  三。
4. CubeGeometry  (  100年  ,  100年  ,  100年  )  ,  新  三。
5. MeshLambertMaterial  (  {  地图  :  纹理  }  )  )  ;

然后,最后,我们将所有这些事情在一个场景和调用 渲染 函数。

• 查看源代码
• 复制代码

1. var  场景  =  新  三。  场景  (  )  ;
2. 场景。  添加  (  立方体  )  ;
3. 场景。  添加  (  光  )  ;
4. 渲染器。  渲染  (  场景  ,  相机  )  ;

这将生成一个静态图像纹理的点燃,多维数据集。 让它动起来,我们将呈现在一个动画循环调用之前和位置的改变在每一帧的多维数据集。

• 查看源代码
• 复制代码

1. 函数  runAnimation  (  t  )
2. {
3.    / /激活你的对象取决于时间
4. 多维数据集。  旋转  。  Y  =  t  /  1000年  ;
5. 多维数据集。  位置  。  x  =  …
6.    渲染器  。  渲染  (  场景  ,  相机  )  ;  / /显示
7. requestAnimationFrame  (  runAnimation  )  ;  / /和
8. 循环
9. }

使用三维建模软件如草图大师推荐。 3了解一些3 d模型格式,包括可拉大风(香港)具有广泛的行业支持。 这里是你如何加载模型在三:

• 查看源代码
• 复制代码

1. var  装载机  =  新  三。  ColladaLoader  (  )  ;
2. 装载机。  负载  (  “android香港“  ,  函数  (  可拉大风  )
3. {
4.    var  模型  =  可拉大风。  场景  ;
5. 模型。  位置  =  …  ;  / / x,y,z
6. 模型。  旋转  =  …  ;  / / x,y,z
7. 场景。  添加  (  模型  )  ;
8. }  )  ;

用多一点努力,你就可以重置所有的幻想droid着色器三提供,包括兰伯特和冯氏照明,法线贴图,凹凸贴图,环境映射和更多。

保持实验动画,按照教程 这里 。 

原文地址：http://www.netmagazine.com/tutorials/create-slick-html5-animations