什么是动画?<br />
Css3  transition 、 2D transform、 3D transform、animation<br />FLASH中的动画原理:许多静止的连续性帧对应的画面,根据 时间顺序播放而产生的视觉动画,即看起来画面在动。<br />F...
动作补间动画,一种基于关键帧与关键帧而产生的动画类型, 即设 定起始关键帧和结束关键帧后,FLASH将自动完成中间动画的过渡部分, 让画面能够流畅运动。</li></ul>简单的动作动画——对物体位置、大小、颜色、不透明度的改变.<br />形...
遮罩动画,此类动画类型必须创建一个遮罩层,其特点是只有被遮罩的舞 台区域中的画面才能够看到,而没有被遮罩的区域画面则不可视。</li></li></ul><li>二维即左右、上下两个方向,不存在前后。一张纸上的内容就可以看做成是二维。 即只有面...
关于此模板<br />Css3动画相关的几个知识点:<br />Css3  transition:平滑的改变CSS属性的值。<br />(简单的实例:对物体位置、大小、颜色、不透明度的改变。)<br />Css3  2D transform:对...
示例幻灯片<br />Css3 transition:<br />transition-property :none | all | background,…… 指定参与过渡的可变换css属性<br />transition-duration:...
示例幻灯片<br />Css3 2d transform:<br />transform-origin: x,y (变形原点,也就是该元素围绕着那个点变形或旋转, left、right、top、center、bottom)<br />trans...
示例幻灯片<br />Css3 3d transform:<br />transform-style: flat | preserve-3d  变换的类型<br />Perspective: none | <number>变换视觉角度<br /...
示例幻灯片<br />Css3 animation:只在webkit核心的浏览器上起作用<br />@keyframes “关键帧”{           (关键帧的时间函数)<br />n%{ property:value; animatio...
Js 动画的影响<br />js原理<br />所谓动画,就是在一段时间内,通过 click,focus,mousemove,mouseover,mouseout事件连续改变 DOM 元素的属性。<br />JavaScript 实现动画,最传...
Upcoming SlideShare
Loading in …5
×

Css3 transition

3,282 views

Published on

css3 transition

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,282
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Css3 transition

  1. 1. 什么是动画?<br />
  2. 2. Css3 transition 、 2D transform、 3D transform、animation<br />FLASH中的动画原理:许多静止的连续性帧对应的画面,根据 时间顺序播放而产生的视觉动画,即看起来画面在动。<br />Flash动画的类型:<br /><ul><li>逐帧动画,通过一帧帧连续的画面按时间顺序播放而产生的动画类型;
  3. 3. 动作补间动画,一种基于关键帧与关键帧而产生的动画类型, 即设 定起始关键帧和结束关键帧后,FLASH将自动完成中间动画的过渡部分, 让画面能够流畅运动。</li></ul>简单的动作动画——对物体位置、大小、颜色、不透明度的改变.<br />形状补间动画,先对关键帧中的形状指定属性,然后在后续关键帧中修改形状或者绘制另一个形状而产生的动画类型。(红旗飘动)<br /><ul><li>路径引导动画,一种用于控制运动补间动画中的对象位置移动情况的动画类型。
  4. 4. 遮罩动画,此类动画类型必须创建一个遮罩层,其特点是只有被遮罩的舞 台区域中的画面才能够看到,而没有被遮罩的区域画面则不可视。</li></li></ul><li>二维即左右、上下两个方向,不存在前后。一张纸上的内容就可以看做成是二维。 即只有面积,没有立体。<br />三维既是坐标轴的三个轴,即x轴、y轴、z轴,其中x表示左右空间,y表示上下空间,z表示前后空间,这样就形成了人的视觉立体感.<br />Ps3dmax中怎样实现二维和三维?<br />
  5. 5. 关于此模板<br />Css3动画相关的几个知识点:<br />Css3 transition:平滑的改变CSS属性的值。<br />(简单的实例:对物体位置、大小、颜色、不透明度的改变。)<br />Css3 2D transform:对物体进行二维的变换,对物体移动、旋转、缩放、 倾斜<br />Css3 3D transform:对物体进行三维的变换。<br />Css3 animation:具有较为全面动画步骤。<br />自定义徽标<br />浏览器的支持情况<br />
  6. 6. 示例幻灯片<br />Css3 transition:<br />transition-property :none | all | background,…… 指定参与过渡的可变换css属性<br />transition-duration:*指定这个过渡的持续时间<br />transition-timing-function:*指定过渡速度方程 ,有linear| ease| ease-in | ease-out | ease-in-out | cubic-bezier<br />transition-delay:* 延迟过渡时间<br />Linear |ease | ease-in | ease-out | ease-in-out都是从cubic-bezier ( <number>, <number>, <number>, <number>)<br />三次贝塞尔曲线根据特殊参数变换形成的方程。……<br />Ease-in 表示过渡速度先慢后快<br />Ease-in-out 表示过渡速度慢快交替<br />Ease-out 表示过渡舒服先快后慢<br />http://xiebiji.com/works/mt1.2cn/Docs/index.html#Fx/Fx.Transitions<br />http://zengrong.net/post/1151.htmmotools动画函数<br />http://blog.lipte.com/archives/54贝塞尔曲线<br />
  7. 7. 示例幻灯片<br />Css3 2d transform:<br />transform-origin: x,y (变形原点,也就是该元素围绕着那个点变形或旋转, left、right、top、center、bottom)<br />transform-property :transform-function……<br />比如:<br />translate(80px, 80px)偏移<br />scale(1.5, 1.5)缩放<br />rotate(45deg)旋转<br />skew(35deg,35deg)斜切<br />Matrix(x……)矩阵变换,就是基于X和Y 坐标重新定位元素,它使用6个参数<br />http://www.cnblogs.com/winter-cn/archive/2010/12/29/1919266.html数学原理<br />http://zh.wikipedia.org/zh-cn/%E5%8F%98%E6%8D%A2%E7%9F%A9%E9%98%B5变换矩阵<br />
  8. 8. 示例幻灯片<br />Css3 3d transform:<br />transform-style: flat | preserve-3d 变换的类型<br />Perspective: none | <number>变换视觉角度<br />Perspective-orgin:变换视觉角度原点<br />backface-visibility:visible | hidden背割面是否可见<br />transform-property :transform-function……<br />比如:<br />translate3d(x, y, z)偏移<br />scale( x, y , z)缩放<br />rotate3d(x,y,z,45deg)旋转 --rotateX(45deg), rotateY(45deg), rotateZ(45deg)<br />skew(35deg,35deg)斜切<br />例子:<br />
  9. 9. 示例幻灯片<br />Css3 animation:只在webkit核心的浏览器上起作用<br />@keyframes “关键帧”{ (关键帧的时间函数)<br />n%{ property:value; animation-timing-function:ease;} <br /> from{property:value; } to{property:value; }<br />}<br />animation-name:*关键帧 (可以有多个关键帧)<br />animation-duration:*指动画的持续时间<br />animation-timing-function:*指定动画速度方程<br />animation-iteration-count:*动画循环播放的次数<br />animation-direction:*动画播放的方向,是否倒着播放.normal | alternate<br />animation-play-state:*播放状态 running | paused <br />animation-delay:*延迟过渡时间<br />http://www.zhangxinxu.com/study/201011/css3-transition-animate-demo-6.html<br />
  10. 10. Js 动画的影响<br />js原理<br />所谓动画,就是在一段时间内,通过 click,focus,mousemove,mouseover,mouseout事件连续改变 DOM 元素的属性。<br />JavaScript 实现动画,最传统的方法就是采用定时器,在一段时间内(duration 时长),遵循特定规律(easing 平滑函数),改变 DOM 元素的属性(props, 最常见的是 style),在动画结束时,触发回调(callback)。一个典型的接口如下:<br />Varanim = new Anim(elem, props, duration, easing, callback); <br />anim.run(); <br />有了 CSS3 Transitions之后,传统方法中的定时器变得多余,我们只需:<br />elem.style.transition = 'props duration time-function';<br />elem.style.cssText += ';' + targetStyle; <br />这样就能调用浏览器原生的 transitions 将元素从当前样式逐步过渡到最终样式,这就是动画!<br />
  11. 11. css3 动画的应用<br />http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/<br />http://www.dmxzone.com/demo/dmxAnimator/effects/slide_out_menu.html<br />http://webkit.org/blog-files/3d-transforms/poster-circle.html<br />数学公式、空间想象力、美工功底、实践能力、纠结的精神<br />

×