资源描述
第1页,第1页,第16章 设计动画,本章概述 本章的学习目标 主要内容,第2页,第2页,本章概述,CSS3中的动画功能可以用来做出在网页上运行的动画。CSS3中的动画功能主要包括Transitions和Animations，这两种功能都可以用来制作动画效果。其中，Transitions功能支持从一个属性值平滑过渡到另一个属性值，方便用来制作颜色渐变和形状渐变动画；Animations功能支持通过关键帧的指定来在页面上产生更复杂的动画效果，方便制作逐帧动画。 例如，利用Transitions功能，可以通过改变background-color属性值来让背景色从一种颜色平滑过渡到另一种颜色。,第3页,第3页,本章的学习目标,掌握过渡动画的制作方法，掌握过渡属性、过渡时间、过渡延迟时间、过渡效果的设置操作。 掌握3D动画制作方法，掌握动画名称、动画时间、动画播放方式、动画延迟时间、动画播放次数以及动画播放方向的设置操作。 掌握渐变效果制作，包括Webkit渐变、Mozilla渐变、Opera渐变和IE渐变。 能够应用CSS3的动画功能制作具有一定综合度的动画效果。,第4页,第4页,主要内容,16.1 过渡动画 16.2 3D动画 16.3 渐变效果 16.4 案例综合实战 16.5 本章小结,第5页,第5页,16.1 过渡动画,16.1.1 定义过渡属性 16.1.2 定义过渡时间 16.1.3 定义过渡延迟时间 16.1.4 定义过渡效果,第6页,第6页,16.1.1 定义过渡属性,transition-property属性用来定义转换动画的CSS属性名称，如background-color属性。该属性的语法格式如下： transition-property ： none | all | , * transition-property是用来指定当元素其中一个属性改变时执行transition效果，其主要有以下几个值：none(没有属性改变)；all（所有属性改变）这个也是其默认值；indent（元素属性名）。当其值为none时，transition马上停止执行，当指定为all时，则元素产生任何属性值变化时都将执行transition效果，ident是可以指定元素的某一个属性值。,第7页,第7页,16.1.2 定义过渡时间,transition-duration是用来指定元素转换过程的持续时间，即设置从旧属性换到新属性花费的时间，单位为秒。该属性的语法格式如下： transition-duration ： , * 该属性的初始值为0，适用于所有元素以及:before和:after伪元素。在默认情况下，动画过渡时间为0秒，所以当指定元素动画时，会看不到过渡的过程，直接看到结果。,第8页,第8页,16.1.3 定义过渡延迟时间,transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果。该属性的语法格式如下： transition-delay ： , * 该属性的取值为数值，单位为s（秒）或者ms(毫秒)，其使用和transition-duration极其相似，也可以作用于所有元素，包括:before和:after伪元素。 默认大小是“0“，也就是变换立即执行，没有延迟。,第9页,第9页,16.1.4 定义过渡效果,transition-timing-function的值允许开发人员根据时间的推进去改变属性值的变换速率，也就是定义过渡动画的效果，其基本语法格式如下： transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , ) , ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )* transition-timing-function有6个可能值： ease：过渡效果逐渐变慢。默认值。 linear：匀速过渡效果。 ease-in：加速过渡效果。 ease-out：减速过渡效果。 ease-in-out：过渡效果首先是加速，然后减速。 cubic-bezier：该值允许自定义一个时间曲线，即特定的cubic-bezier曲线。,第10页,第10页,主要内容,16.1 过渡动画 16.2 3D动画 16.3 渐变效果 16.4 案例综合实战 16.5 本章小结,第11页,第11页,16.2 3D动画,16.2.1 定义动画名称 16.2.2 定义动画时间 16.2.3 定义动画播放方式 16.2.4 定义动画延迟时间 16.2.5 定义动画播放次数 16.2.6 定义动画播放方向 16.2.7 控制播放状态 16.2.8 翻转的图片,第12页,第12页,16.2.1 定义动画名称,animation-name用来定义一个动画的名称，基本语法格式如下：animation-name: none | IDENT,none | IDENT*; 其中，IDENT是由Keyframes创建的动画名，换句话说，此处的IDENT要和Keyframes中的IDENT一致，如果不一致，将不能实现任何动画效果；none为默认值，当值为none时，将没有任何动画效果。另外，这个属性和前面所介绍的transition一样，可以同时附几个animation给一个元素，只需要用逗号“，”隔开。,第13页,第13页,16.2.2 定义动画时间,animation-duration用来指定元素播放动画所持续的时间长短，基本语法格式如下： animation-duration: ,* 其中，为数值，单位为s（秒），其默认值为0。这个属性和transition中的transition-duration使用方法一样。,第14页,第14页,16.2.3 定义动画播放方式,animation-timing-function是指元素根据时间的推进来改变属性值的变换速率，说得简单点就是动画的播放方式，基本语法格式如下： animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , ) , ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )* 和transition中的transition-timing-function一样，animation-timing-function具有以下6种变换方式：ease、ease-in、ease-out、ease-in-out、linear和cubic-bezier，使用方法与transition相同。,第15页,第15页,16.2.4 定义动画延迟时间,animation-delay用来指定元素动画开始时间，即动画延迟播放时间，基本语法格式如下： animation-delay: ,* 其中，为数值，单位为s(秒)，其默认值也是0。这个属性和transition-delayy使用方法是一样的。,第16页,第16页,16.2.5 定义动画播放次数,animation-iteration-count用来指定元素播放动画的循环次数，基本语法格式如下： animation-iteration-count:infinite | , infinite | * 其中，取值为数字，其默认值为1；infinite为无限次数循环。,第17页,第17页,16.2.6 定义动画播放方向,animation-direction用来指定元素动画播放的方向，基本语法格式如下： animation-direction: normal | alternate , normal | alternate* 其中，有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，其作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。,第18页,第18页,16.2.7 控制播放状态,animation-play-state主要用来控制元素动画的播放状态，基本语法格式如下： animation-play-state:running | paused , running | paused* 其中，主要有running和paused两个值。running为默认值。他们的作用就类似于音乐播放器一样，可以通过paused将正在播放的动画停下了，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂时了动画的播放，元素的样式将回到最原始设置状态。,第19页,第19页,16.2.8 翻转的图片,本节借助animation属性来设计自动翻转的图片效果，该效果模拟2D平面中实现3D翻转，在这个动画中，图片在X轴上逐渐压缩，然后水平翻转图片，在2D平面中做出3D翻转效果。 详情见【例16-5】翻转的图片。,第20页,第20页,主要内容,16.1 过渡动画 16.2 3D动画 16.3 渐变效果 16.4 案例综合实战 16.5 本章小结,第21页,第21页,16.3 渐变效果,16.3.1 线性渐变在Webkit下的应用 16.3.2 线性渐变在Mozilla下的应用 16.3.3 线性渐变在Opera下的应用 16.3.4 线性渐变在IE下的应用,第22页,第22页,16.3.1 线性渐变在Webkit下的应用,Webkit是第一个支持渐变的浏览器引擎，其支持渐变的方法如下： -webkit-linear-gradient( | ,? , , * )/新的写法 -webkit-gradient(, , ?, , ? , *)/传统写法 webkit-gradient是webkit引擎对渐变的实现参数，一共有5个。第一个参数表示渐变类型（type），可以是linear（线性渐变）或者radial（径向渐变）。第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，也可以用关键值表示，比如 left top（左上角）和left bottom（左下角）。第四个和第五个参数，分别是两个color-stop函数。color-stop函数接受两个参数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个表示该点的颜色。,第23页,第23页,16.3.2 线性渐变在Mozilla下的应用,Firefox浏览器从3.6版本开始支持渐变设计。Gecko引擎定义了两个私有函数，分别用来设计线性渐变和径向渐变。基本语法格式如下： -moz-linear-gradient( | ,? , , * ) 定义渐变起始点，取值包含数值、百分比，也可以使用关键字。 参数定义直线渐变的角度。 参数定义步长。,第24页,第24页,16.3.3 线性渐变在Opera下的应用,线性渐变在Opera下的使用语法如下： -o-linear-gradient( | ,? , , ); /* Opera 11.10+ */ 其中的各项参数与Mozilla下的渐变参数相同。例如，要在Opera浏览器下实现如图16-8所示的渐变效果，代码如下： background: -o-linear-gradient(top,#ccc, #000);,第25页,第25页,16.3.4 线性渐变在IE下的应用,IE依靠滤镜实现渐变，语法格式如下： filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE*/ -ms-filter: “progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)“;/*IE8+*/ 其中，参数startColorstr表示起点的颜色，endColorstr表示终点颜色。GradientType表示渐变类型，0为缺省值，表示垂直渐变，1表示水平渐变。,第26页,第26页,主要内容,16.1 过渡动画 16.2 3D动画 16.3 渐变效果 16.4 案例综合实战 16.5 本章小结,第27页,第27页,16.4 案例综合实战,设计级联菜单 设计实用按钮,第28页,第28页,主要内容,16.1 过渡动画 16.2 3D动画 16.3 渐变效果 16.4 案例综合实战 16.5 本章小结,第29页,第29页,16.5 本章小结,本章全面讲述了CSS3动画的功能，主要内容包括过渡动画、3D动画、渐变效果等内容，最后通过两个综合案例使读者能够综合使用这些功能进行工程实践。,
展开阅读全文