什么是动画？

Css3 transition 、 2D transform 、 3D transform 、 animation

FLASH 中的动画原理：许多静止的连续性帧对应的画面，根据 时间顺序播放而产生的视觉动画，即看起来画面在动。

Flash 动画的类型：

•逐帧动画，通过一帧帧连续的画面按时间顺序播放而产生的动画类型；

•动作补间动画，一种基于关键帧与关键帧而产生的动画类型 , 即设 定起始关键帧和结束关键帧后 ,FLASH 将自动完成中间动画的过渡部分 , 让画面能够流畅运动。

简单的动作动画——对物体位置、大小、颜色、不透明度的改变 .

形状补间动画，先对关键帧中的形状指定属性，然后在后续关键帧中修改形状或者绘制另一个形状而产生的动画类型。（红旗飘动）

•路径引导动画，一种用于控制运动补间动画中的对象位置移动情况的动画类型。

•遮罩动画，此类动画类型必须创建一个遮罩层，其特点是只有被遮罩的舞 台区域中的画面才能够看到，而没有被遮罩的区域画面则不可视。

二维即左右、上下两个方向，不存在前后。一张纸上的内容就可以看做成是二维。 即只有面积，没有立体。

三维既是坐标轴的三个轴，即 x 轴、 y 轴、 z 轴，其中 x 表示左右空间，y 表示上下空间， z 表示前后空间，这样就形成了人的视觉立体感 .

Ps\3dmax 中怎样实现二维和三维？

关于此模板

Css3 动画相关的几个知识点：

Css3 transition: 平滑的改变 CSS 属性的值。

( 简单的实例：对物体位置、大小、颜色、不透明度的改变。 )

Css3 2D transform: 对物体进行二维的变换，对物体移动、旋转、缩放、 倾斜

Css3 3D transform: 对物体进行三维的变换。

Css3 animation: 具有较为全面动画步骤。

自定义徽标

ie6\7\8 ie9 Firefox3.6 Chorme/safari

Css3 transition _ 支持 支持 支持Css3 2d transform _ 支持 支持 支持Css3 3d transform _ - - 支持css3 animation _ - - 支持

浏览器的支持情况

示例幻灯片

Css3 transition:transition-property :none | all | background ，…… 指定参与过渡的可变换 css属性transition-duration:* 指定这个过渡的持续时间transition-timing-function:* 指定过渡速度方程 ，有 linear| ease| ease-in | ease-out | ease-in-out | cubic-beziertransition-delay:* 延迟过渡时间

Cubic-

bezier

linear

Ease-in

Ease-out

Ease-in-out

ease

Linear |ease | ease-in | ease-out | ease-in-out 都是从 cubic-bezier ( <number>, <number>, <number>, <number>)三次贝塞尔曲线根据特殊参数变换形成的方程。……Ease-in 表示过渡速度先慢后快Ease-in-out 表示过渡速度慢快交替Ease-out 表示过渡舒服先快后慢

http://xiebiji.com/works/mt1.2cn/Docs/index.html#Fx/Fx.Transitionshttp://zengrong.net/post/1151.htm motools 动画函数http://blog.lipte.com/archives/54 贝塞尔曲线

示例幻灯片

Css3 2d transform:transform-origin: x,y ( 变形原点，也就是该元素围绕着那个点变形或旋转 , left 、 right 、 top 、 center 、 bottom)transform-property :transform-function……比如 :translate(80px, 80px) 偏移scale(1.5, 1.5) 缩放rotate(45deg) 旋转skew(35deg,35deg) 斜切Matrix(x……) 矩阵变换，就是基于 X 和 Y 坐标重新定位元素，它使用 6 个参数http://www.cnblogs.com/winter-cn/archive/2010/12/29/1919266.html数学原理http://zh.wikipedia.org/zh-cn/%E5%8F%98%E6%8D%A2%E7%9F%A9%E9%98%B5 变换矩阵

Translate(100px,100px) Scale(0.8,0.8)

rotate(25deg) Skew(25deg)

示例幻灯片

Css3 3d transform:transform-style: flat | preserve-3d 变换的类型Perspective ： none | <number> 变换视觉角度Perspective-orgin: 变换视觉角度原点backface-visibility:visible | hidden 背割面是否可见transform-property :transform-function……比如 :translate3d(x, y, z) 偏移scale( x, y , z) 缩放rotate3d(x,y,z,45deg) 旋转 --rotateX(45deg), rotateY(45deg), rotateZ(45deg)skew(35deg,35deg) 斜切

例子：

示例幻灯片

Css3 animation: 只在 webkit核心的浏览器上起作用@keyframes “ 关键帧” { （关键帧的时间函数） n%{ property:value; animation-timing-function:ease;} from{property:value; } to{property:value; }}animation-name:* 关键帧 （可以有多个关键帧）animation-duration:* 指动画的持续时间animation-timing-function:* 指定动画速度方程animation-iteration-count:* 动画循环播放的次数animation-direction:* 动画播放的方向，是否倒着播放 .normal | alternateanimation-play-state:* 播放状态 running | paused animation-delay:* 延迟过渡时间

http://www.zhangxinxu.com/study/201011/css3-transition-animate-demo-6.html

Js 动画的影响

js原理所谓动画，就是在一段时间内，通过 click ， focus ， mousemove,mouseover,mouseout事件连续改变 DOM 元素的属性。JavaScript 实现动画，最传统的方法就是采用定时器，在一段时间内（ duration 时长），遵循特定规律（ easing 平滑函数），改变 DOM 元素的属性（ props, 最常见的是 style ），在动画结束时，触发回调（ callback ）。一个典型的接口如下：Var anim = new Anim(elem, props, duration, easing, callback); anim.run(); 有了 CSS3 Transitions 之后，传统方法中的定时器变得多余，我们只需：elem.style.transition = 'props duration time-function'; elem.style.cssText += ';' + targetStyle; 这样就能调用浏览器原生的 transitions 将元素从当前样式逐步过渡到最终样式，这就是动画！

css3 动画的应用

数学公式、空间想象力、美工功底、实践能力、纠结的精神

http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/ http://www.dmxzone.com/demo/dmxAnimator/effects/slide_out_menu.htmlhttp://webkit.org/blog-files/3d-transforms/poster-circle.html