第12章CSS的高级应用
CSS 3中增加了许多革命性的创新功能，如添加了文本阴影、圆角边框、多列布局和盒布局等相关的静态样式属性。除此之外CSS 3中还添加了实现动态变化的样式属性，使用这些属性可以实现元素过渡、平移、移动以及缩放等效果，本节将详细介绍这些属性。
通过本章的学习，读者可以对CSS 3中的过渡、转换和动画有所了解，并且能够熟练地使用相关属性实现过渡、移动、旋转、倾斜和缩放等特效。
本章学习要点：
掌握过渡、平移和动画效果实现的浏览器支持情况
掌握相关属性实现过渡效果的方法
掌握transition属性的使用方法
掌握如何使用transform属性实现平移、缩放、倾斜和旋转操作
掌握如何实现更改元素原点坐标的效果
熟悉设置动画关键帧的语法
掌握与动画相关的属性及使用方法
12.1 过渡
过渡可以动态改变颜色的值，以动画的形式从一种颜色过渡到另外一种。一般情况下如果要改变一个样式属性的值，变化就会立即发生且中间没有过渡状态，但是CSS 3中提供的相关属性解决了这个问题。
12.1.1 浏览器支持情况
CSS 3中与过渡相关的属性有多个，如transtion-duration、transtion-property、transtion-delay和transtion-timing等。目前所有主流的浏览器都不提供对这些属性的支持，但是可以通过扩展属性（即添加前缀）来实现。具体说明如下所示：
●Chrome和Safari浏览器可以通过添加-webkit-前缀来支持
●Opera浏览器可以通过添加-o-前缀来支持
●Firefox浏览器可以通过添加-moz-前缀来支持
●Internet Explorer浏览器可以通过添加-ms-前缀来支持
12.1.2 transition-duration属性
transition-duration属性用于指定过渡经过的时间，即指定从旧属性换到新属性需要多长时间才能完成。如果将该属性的值指定为非负数或不设置，则会被视为0。该属性的单位是秒（s）或者毫秒（ms）。
transition-duration属性的语法非常简单，只需要在该属性后设置过渡动画所需要的时间即可。其语法形式如下：
transition-duration:time;
下面的示例代码演示了当鼠标移动到图片上时在3秒之内从当前图片过渡到完整图片并且为图片的边框添加样式。具体代码如下所示：
img { width:174px; //图片宽度 height:279px;
//图片高度
margin-left:20px; margin-top:20px; transition-duration: 3s; -moz-transition-duration: 3s; //Firefox 浏览器
-webkit-transition-duration: 3s;
//Chrome 或Safari 浏览器 -o-transition-duration: 3s;
//Opera 浏览器
}
img:hover
//悬浮时的效果
{ width:574px;
border:1px solid #E1E1E1;
}
transition-duration 属性指定的时间也将作用于“逆向”过渡，即从最终效果返回到原始效果所需要的时间。另外如果要在JavaScript 中对某个对象添加该属性，需要根据浏览器是否支持来添加代码，以Google 浏览器为例脚本代码为object.style.WebkitTranstionDuration=“3s ”。其中object 为对象名称，Webkit 为浏览器支持该属性时添加的前缀名。
12.1.3 transition-property 属性
transition-property 指定要进行过渡的CSS 样式属性名称，如果要指定多个属性名称则需要使用逗号分隔。该属性的语法形式如下：
transition-property:none | all | property;
上述语法中可以将transition-propery 属性的值设置为3个，它们的具体说明如下： ● none 不对任何属性进行过渡 ● all 对所有的属性进行过度
● property 定义进行过渡的属性名称
例如下面的示例代码指定当鼠标移到img 元素上时对背景色使用过渡效果。具体代码如下所示：
img:hover{ background-color:#FF0000;
//指定悬浮时过渡的背景色 transition-property: background-color;
//指定背景色的CSS 属性
-webkit-transition-property: background-color;
-moz- transition-property: background-color; -o- transition-property: background-color;
-moz-transition-duration: 3s;
-webkit-transition-duration: 3s; -o-transition-duration: 3s;
}
如果要在脚本中对某个对象添加该属性，Google 浏览器中JavaScript 的代码为object.style.WebkitTranstionProperty=“width,height ”。其中object 为对象名称，width 和height 表示属性名称。
12.1.4 transition-delay 属性
transition-delay 属性指定过渡延迟的时间，单位为秒（s ）或者毫秒（ms ）。该属性的值可以为正数、负数或零，如果为负数表示过渡的动作会从该时间点开始显示，之前的所有动作都会被截断。
transition-delay 属性的使用方法也非常简单，直接在该属性后面设置延时时间即可。语法形式如下：
transition-delay:time;
例如下面的示例代码指定当鼠标移动到img 元素上时对图片宽度和高度实现过渡效果。但是该动画效果不会立即执行，而是等待5秒后再缓慢的从当前图片过渡到整张图片。具体代码如下：
img { width:174px; height:279px;
-webkit-animation-property:width,height; -webkit-transition-duration: 3s; -webkit-transition-delay:5s;
/* 省略Firefox 浏览器和Opera 浏览器的样式代码 */
}
另外，如果要在JavaScript 代码中设置该属性，其具体代码是：
object.style.transitionDelay = "10s";
object.style.WebkitTransitionDelay = "10s"; //Google 或Safari 浏览器 object.style.MozTransitionDelay = "10s";
//Firefox 浏览器
12.1.5 transition-timing-function 属性
transition-timing-function 属性是整个过渡效果的核心属性，它指定过渡过程中的时间的计算方式，从而可以实现加速或者减速效果。该属性的语法形式如下：
transition-timing-function:liear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);
上述语法中指定transition-timing-function 属性的值为6个，其具体说明如表12-1所示。
表12-1 transition-timing-function 属性的值 值名称
说明
linear
默认值，指定切换效果以相同速度从开始到结束。等同于
cubic-bezier(0.0,0.0,1.0,1.0)
ease 指定一个缓慢的开始，然后加快，最后慢慢结束。等同于
cubic-bezier(0.25,0.1,0.25,1.0)
ease-in 指定一个缓慢的开始，然后逐渐加速（淡入效果）。等同于
cubic-bezier(0.42,0,1.0,1.0)
ease-out 指定一个缓慢的结束（淡出效果）。等同于cubic-bezier(0,0,0.58,1.0) ease-in-out 指定加速后再减速。等同于cubic-bezier(0.42,0,0.58,1)
cubic-bezier(x1,y1,x2,y2) 定义用于加速或者减速的贝塞尔曲线的形状，它们的值在0~1之间例如为了使实现的过渡效果更加富有立体感，可以使用transition-timing-function属性指定过渡效果。在上一节的基础上添加如下代码：
img
{
width:174px;
height:279px;
-webkit-animation-property:width,height; //指定过渡属性名称
-webkit-transition-duration: 3s; //指定过渡时间
-webkit-transition-delay:5s; //指定延时时间
-webkit-transition-timing-function:ease-in-out; //指定过渡效果的名称
/* 省略Firefox浏览器和Opera浏览器的样式代码*/
}
12.1.6 transition属性
transition-duration、transition-propery、transition-delay和transition-timing-function属性都可以指定元素的过渡效果，但是如果为每个元素定义完整的过渡效果时需要添加每个属性，并且需要为这些属性添加前缀。这样非常麻烦，如代码冗长和不方便修改等，那么有没有一种简单的方法呢？答案是肯定的：有。CSS 3中还提供了另外一种属性：transtion。
transition属性是一个速记属性，通过它可以设置上述属性的值，各个属性之间使用空格分隔。其语法形式如下：
transition:transition-property transition-duration transition-timing-function transition-delay;
例如，如果使用多个属性为某个div元素实现过渡效果的代码如下：
div{
background-color:red;
-webkit-transition-property:background-color;
-webkit-transition-duration:2000ms;
-webkit-transition-timing-function:ease;
-webkit-transition-delay:1000ms;
}
但是直接使用transition属性代码就简单很多，如下所示：
div{
background-color:red;
-webkit-transition:background-color 2000ms ease 1000ms;
}
使用transition属性实现过渡效果时各个参数必须按照顺序定义，不可
以颠倒。
使用过渡的相关属性可以实现多个过渡的效果，例如元素在更改旋转的时候也可以更改颜色。使用多个属性定义的代码如下：
-webkit-transition-property:transform,color;
-webkit-transition-duration:3s,2s;
-webkit-transition-timing-function:ease-in,ease-out;
上述代码表示在3秒内对旋转属性应用到ease-in 的过渡，在2秒内对颜色属性应用到linear的过渡。
如果通过指定transition属性实现多个过渡效果，需要为每个过渡集中指定所有值，并且使用逗号分隔每个过渡。其具体代码如下：
-webkit-transition-transition:transform 3s ease-in,color 2s ease-out;
12.1.7 多个颜色过渡
前面已经详细介绍了过渡的相关属性，本节使用transition属性实现多个颜色渐变过渡的效果。
【实践案例12-1】
实现本案例效果的具体步骤如下：
（1）添加新的HTML页面，在页面的合适位置添加两个div元素。其具体代码如下：
（2）为页面中的div元素添加相关样式，具体样式代码如下：
#div .liv
{
width:150px; //指定元素宽度
height:150px; //指定元素高度
margin-left:50px;
margin-top:50px;
background: #ff0000; //背景颜色
transition: background-color 3s 0.5s linear;
-moz-transition: background-color 3s 0.5s linear; //Firefox浏览器
-webkit-transition: background-color 5s 0.5s linear; //Google或Safari浏览器
-o-transition: background-color 3s 0.5s linear; //Opera浏览器
}
#div .liv:hover //鼠标悬浮时的样式
{
background: #0006ff;
}
上述样式代码中通过background属性指定div元素的背景颜色，然后通过transition属性设置鼠标悬浮时延迟0.5秒，然后在3秒内实现颜色从红色匀速过渡到蓝色。
（3）运行本示例的代码进行测试，鼠标悬浮到图形时的过渡效果如图12-1所示。
图12-1 多个颜色过渡的运行效果
本示例中也可以通过分别设置过渡属性实现颜色的渐变效果，感兴趣
的读者可以亲自动手试一试。
12.2 变形
CSS 3中可以利用transform功能来实现文字或图像的旋转、缩放、倾斜和平移的变形处理，也可以更改变形的坐标原点，本节将详细介绍这些内容。
12.2.1 变形的相关属性
CSS 3中提供了3种与变形相关的属性，它们的具体说明如下：
●transform-style
transform-style属性指定嵌套元素是如何在三维空间中呈现的，如果将该值指定为flat 表示不保留其三维的转换效果，将该值指定为preserve-3d表示子元素保留其三维转换效果。其语法形式如下：
transform-style:flat | preserve-3d;
●transform-origin
transform-origin属性允许用户更改转换元素的位置，如果实现2D效果则可以改变元素的X轴和Y轴，实现3D效果还可以改变元素的Z轴。但是该属性必须与transform属性结合使用，不能单独使用。
transform-origin属性的语法形式如下：
transform-origin:x-axis y-axis z-axis;
上述代码中transform-origin属性有3个参数，这些参数的具体说明如下：
?x-axis 定义视图设置在X轴，可能的值包括left、center、right、length和%
?y-axis 定义视图设置在Y轴，可能的值包括top、center、bottom、length和%
?z-axis 定义视图设置在Z轴，常用的值有length
●transform
transform属性用来指定转换操作，该属性可以对元素进行旋转、平移、缩放和移动等。其语法形式如下：
transform:none | transform-functions;
上述语法中指定transform的属性值是none或者多个函数中的一种，如表12-2列出了常用的函数。
表
12-2 transition-timing-function属性的值
函数名称说明
matrix(n,n,n,n,n,n) 使用6个值的矩阵实现缩放、旋转、倾斜或其它操作
translate(x,y) 以矩阵中的x和y为参数移动元素，第二个参数是可选的，默认值为0 translateX(x) 只沿着X轴移动元素
translateY(y) 只沿着Y轴移动元素
scale(x,y) 以矩阵中的x和y为参数缩放，第二个参数是可选的，默认值等于第一个
scaleX(x) 为X轴的值定义一个缩放转换，等同于scale(x,1)
scaleY(y) 为Y轴的值定义一个缩放转换，等同于scale(1,y)
rotate(angle) 根据指定的角度旋转元素
rotateX(angle) 只沿着X轴旋转
rotateY(angle) 只沿着Y轴旋转
skew(x-angle,y-angle) 沿着X轴和Y轴倾斜
skewX(angle) 只沿着X轴倾斜
skewY(angle) 只沿着Y轴倾斜
如果要在JavaScript中设置变形的相关属性，直接通过属性指定该值即
可，如object.style.transformStyle=“flat”（object表示对象）。另外，目
前所有的浏览器都不提供对该属性的支持，但是可以通过添加前缀的
方式实现。
12.2.2 平移
将transform属性的属性值指定为translate()函数、translateX()函数或translateY()函数都可以实现平移的效果。translate()函数语法形式如下：
transform:translate(x-value,y-value);
上述语法中x-value指元素在水平方向上移动的距离，y-value指元素在垂直方向上移动的距离。如图12-2给出了平移的效果。
y个单位
x个单位
实线代表平移前的图形
虚线代表平移后的图形
图12-2 平移效果图
【实践案例12-2】
本案例通过将transfrom属性的值设置为translate()函数实现平移效果。其具体步骤如下：（1）添加新的HTML页面，在页面的合适位置添加img元素和input元素。具体代码如下所示：
图片位置：
translate(10)
translate(20,10)
translate(50,5)
translate(-5)
translate(-5)
none
（2）单击每个单选按钮时都会触发onclick事件调用changePosition()函数，该函数通过传入的参数值设置transform属性的值。其具体代码如下：
function changePosition(value)
{
var obj = document.getElementById("imgPosition"); //获取指定的对象
obj.style.Transform = "translate(" + value + ")";
obj.style.WebkitTransform = "translate(" + value + ")"; //Google或Safari浏览器
obj.style.OTransform = "translate(" + value + ")"; //Opera浏览器
obj.style.MozTransform = "translate(" + value + ")"; //Firefox浏览器}
（3）运行本案例的代码单击不同的按钮进行测试，最终运行效果如图12-3所示。
图12-3 平移效果
12.2.3 缩放
如果将transform属性的值设置为scale()函数、scaleX()函数或scaleY()函数时可以重新定义元素的宽度和高度比例，从而实现元素缩小或放大的效果。以最常用的scale()函数为例，其语法形式如下：
transform:scale(a,b);
上述语法中向scale()函数中传入的参数a和b可以是正数、负数和小数。如果为正数表示在元素原来的基础上放大元素；如果为小数表示在元素原来的基础上缩小元素；如果为负数则表示先将元素翻转180度后再进行缩放。如果省略第二个参数，那么默认情况下它的值与第一个相同。如图12-4显示了缩放的效果图。
a
b
实线代表缩放前的图形
虚线代表缩小和放大后的图形
图12-4 缩放效果图
下面通过一个简单的示例演示scale()函数的使用。
【实践案例12-3】
本案例中实现相册列表的显示，当鼠标移动到图片上时实现图片放大效果，鼠标移出后重新显示原来的大小。实现该功能的主要步骤如下：
（1）添加新的HTML页面，在页面的合适位置添加ul、li和img元素，它们实现元素的列表显示。主要代码如下：
/* 省略其他图片的代码*/
（2）为页面中的元素添加相关样式，当鼠标悬浮时通过transform属性将图片放大2倍，通过box-shadow属性设置图片显示的阴影效果。主要代码如下：
ul.polaroids li {
display:inline;
}
ul.polaroids a {
background:#fff;
display:inline;
float:left;
-webkit-box-shadow:0 3px 6px rgba(0, 0, 0, .25); //设置阴影效果
-moz-box-shadow:0 3px 6px rgba(0, 0, 0, .25);
box-shadow:0 3px 6px rgba(0, 0, 0, .25);
}
ul.polaroids li a:hover {
transform:scale(2);
//设置放大效果
-webkit-transform:scale(2); -o-transform:scale(2);
-moz-transform:scale(2); -ms-transform:scale(2);
-webkit-box-shadow 0 3px 6px rgba(0, 0, 0, .5); -moz-box-shadow 0 3px 6px rgba(0, 0, 0, .5); box-shadow 0 3px 6px rgba(0, 0, 0, .5); position:relative; z-index:5;
}
ul.polaroids img { display:block; height:100px; margin-bottom:12px;
}
（3）运行本示例的代码进行测试，最终运行效果如图12-5所示。
图12-5 图片放大效果
scale()函数中的值也可以设置为小数和负数，有兴趣的读者可以亲自动手试一试，比较它们的运行效果。
12.2.4 倾斜
如果将transform 属性的值设置为skew()函数、skewX()函数或者skewY()函数时都可以对元素水平和垂直方向上进行倾斜。以skew()函数为例，其语法形式如下：
transform:skew(x-angel,y-angel);
上述语法中参数x-angel 和y-angle 都是一个数字，它们分别表示沿着水平和垂直方向倾斜元素，如果省略第二个参数，则默认的值为0。如图12-6显示了该函数的效果图。
实线代表缩放前的图形虚线代表缩放后的图形x-angel
y-angel
实心圆形表示元素的中心点
图12-6 skew()函数的效果图
重新更改上一节案例的样式代码，在该样式代码中对图片进行倾斜处理。其主要样式代码如下：
ul.polaroids li a:hover { transform:skew(30deg,20deg); -webkit-transform:skew(30deg,20deg);
-moz-transform:skew(30deg,20deg); -o-transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg); /* 省略缩放和阴影样式代码 */
}
上述代码中skew(30deg,20deg)表示将元素围绕X 轴和Y 轴倾斜20度和30度，重新运行本示例的代码进行测试，最终运行效果如图12-7所示。
图12-7 倾斜效果
有兴趣的读者可以将skew()函数的值设置为负数、或直接使用skewX()函数和skewY()进行测试，观察它们的运行效果。
12.2.5 旋转
如果将transform 属性的值设置为rotate()函数、rotateX()函数或rotateY()函数都可以实现元素旋转的效果。这些函数以元素的中心点为原点，围绕顺时针或者逆时针的方向旋转指定的角度。rotate()函数的语法形式如下：
transform:rotate(angel);
上述语法中参数angle 表示以deg 结束的旋转的角度。旋转是以顺时针方向进行的，如果实现逆时针旋转图形的效果直接将参数angle 的值设定为负数就可以了。如图12-8为旋转的效果图。
实线代表缩放前的图形
虚线代表缩放后的图形
angel 为正数angel 为负数
图12-8 旋转的效果图
【实践案例12-4】
本案例通过向rotate()函数中传递参数实现文字的旋转的效果，并且通过设置transition 属性实现颜色过渡效果。其具体步骤如下：
（1）添加新的HTML 页面，在页面的合适位置添加ul 、li 元素，它们显示导航链接列表。页面主要代码如下：
（2）为页面中的元素添加相应的样式代码，当鼠标悬浮到导航文字时设置transition 属性指定延迟0.5后再在2秒内过渡到蓝色，transform 属性依次设置顺时针旋转的角度为20度、水平和垂直方向各平移5个单位且字体放大1.2倍。主要样式代码如下所示：
#navigation nav { width: 754px; height: 26px; float: left;
border-bottom: 4px solid #f2e2cb;
}
#navigation nav li { float: left; list-style-type: none; } #navigation nav li a {
padding: 6px 13px 0px 13px;
color: #5a3d1c; display: block; text-decoration: none; float: left;
}
#navigation nav li a:hover { text-decoration: underline; color:blue;
-webkit-transition:color 2s 0.5s ease-out;
-webkit-transform:rotate(20deg) translate(5px,-5px) scale(1.2); /* 省略其他浏览器中的旋转样式代码 */ }
（3）运行本示例的代码进行测试，最终运行效果如图12-9所示。
图12-9 旋转的运行效果
与其他属性一样，某个元素的同一个样式中transform 属性只能指定一次，如果要实现多个变形效果使用空格隔开即可。
12.2.6 更改变形的原点坐标
前面几节已经详细介绍过如何通过transform 属性实现元素的平移、缩放、倾斜以及旋转效果，但是在进行这些变形操作时都是以元素的中心点为基准点进行的。如何要更改元素变形时的操作原点可以使用12.2.1节介绍过的transform-origin 属性。
在对称图形中进行变形操作使用该属性特别有用，例如对一个圆形进行旋转，通过tra nsform-origin 属性更改旋转的原点。如图12-10显示了更改变形原点的效果图。
top
left
图12-10 更改原点坐标的效果图
下面以简单的示例演示将transform-origin的属性设置为不同的值时显示的图片效果。【实践案例12-5】
本案例中首先添加img元素，然后通过设置transform-origin属性的值实现不同的效果。主要步骤如下：
（1）添加新的HTML页面，在页面的合适位置添加4个img元素，它们显示更改原点坐标后的不同图片。具体代码如下：
（2）更改im元素旋转时的坐标原点，添加的样式主要代码如下：
#image1 img
{
transform: rotate(45deg); //旋转45度
transform-origin:50% 50%; //更改坐标原点的位置
-webkit-transform: rotate(45deg); //Google或Safari浏览器
-webkit-transform-origin:50% 50%;
-moz-transform: rotate(45deg); //Firefox浏览器
-moz-transform-origin:50% 50%;
-o-transform: rotate(45deg); //Opera浏览器
-o-transform-origin:50% 50%;
-ms-transform: rotate(45deg); //IE 9
-ms-transform-origin:50% 50%;
}
#image2 img
{
transform: rotate(45deg); //旋转45度
transform-origin:60% 30%; //更改坐标原点的位置
-webkit-transform: rotate(45deg); //Google或Safari浏览器
-webkit-transform-origin:20% 60%;
/* 省略其他浏览器的样式代码*/
}
#image3 img
{
transform: rotate(45deg); //旋转45度
transform-origin:right top; //更改坐标原点的位置
-webkit-transform: rotate(45deg); //Google或Safari浏览器
-webkit-transform-origin:left bottom;
/* 省略其他浏览器的样式代码*/
}
#image4 img
{
transform: rotate(45deg); //旋转45度
transform-origin:left bottom; //更改坐标原点的位置
-webkit-transform: rotate(45deg); //Google或Safari浏览器
-webkit-transform-origin:right 70%;
/* 省略其他浏览器的样式代码*/
}
（3）添加上述代码完成后运行页面，最终运行效果如图12-11所示。
图12-11 更改坐标原点的运行效果
12.3 动画
动画效果是让元素从一个样式逐渐改变到另外一个，CSS 3中除了支持过渡和变形外，也可以通过设置animation属性实现比较复杂的动画效果。本节将详细介绍动画的相关知识，包括animation属性、该属性的值及@keyframes等内容。
12.3.1 关键帧
创建动画是通过逐步改变从一个样式设定到另一个，在动画过程中用户可以对CSS样式设定多次。但是创建动画之前必须先定义关键帧，一个关键帧表示动画过程中的一个状态，CSS 3中通过@keyframes来创建关键帧的集合。它的语法形式如下：
@keyframes animationname {
keyframes-selector {css-styles;}
}
上述语法中各个参数的说明如下：
animationname 该参数是必需的，它定义关键帧的名称且将会作为引用时的惟一标识
●keyframes-selector 该参数是必需的，它指定当前关键帧应用到整个动画过程中的
位置。该参数的值可以from、to或百分比值，其中from和0%的效果相同表示动画开始，to和100%的效果相同表示动画结束
●css-styles 该参数是必需的，它可以定义一个或多个合法的CSS样式属性。多个
属性之间可以使用分号进行分隔
根据CSS 3的标准语法，目前所有的主流浏览器都不提供对
@keyframes的支持，但是可以通过添加前缀来实现。如Firefox浏览器
可以使用@-moz-keyframes，Safari和Chrome浏览器可以使用
@-webkit-keyframes等。
例如下面的代码创建了一个名称为picAppear的动画，在该动画开始时透明度为0.2，动画结束时透明度为1。Google浏览器下的具体代码如下：
@-webkit-keyframes picAppear
{
0%{opacity:0.2;} //动画开始时的状态，完全透明
100%{opacity:1;} //动画结束时的状态，完全不透明}
可以使用from和to来代替上段代码，Google浏览器下的代码如下：
@-webkit-keyframes picAppear
{
from{opacity:0.2;} /* 动画开始时的状态，完全透明*/
to{opacity:1;} /* 动画结束时的状态，完全不透明*/
}
开发人员也可以在一个动画中添加多个CSS样式，如下代码分别指定了开始和结束时元素的宽度、高度和背景色等。具体代码如下：
@-webkit-keyframes picAppear
{
form{width:100px; height:100px; background-color:red; margin-top:0;} //动画开始时的状态
100%{ width:300px; height:300px; background-color:blue; margin-top:10;} //动画结束时的状态}
除了在动画中定义多个样式外，也可以定义多个关键帧选择器。具体代码如下：
@-webkit-keyframes picAppear
{
0%{width:100px; height:100px; background-color:red; margin-top:0;} //动画开始时的状态
25%{width:150px; height:150px; background-color:red; margin-top:3;}
75%{width:200px; height:200px; background-color:red; margin-top:8;}
100%{ width:300px; height:300px; bac kground-color:blue; margin-top:10;} //动画结束时的状态}
【实践案例12-6】
本案例主要通过设置@keyframe实现一个简单的动画。其主要步骤如下：
（1）添加新的HTML页面，在页面的合适位置添加id为donghua的div元素。相关代码如下：
（2）在样式代码中添加@keyframes属性，接着设置动画开始时、运行过程和结束时的样式，然后在元素中通过设置animation属性调用。具体代码如下：
@-webkit-keyframes mymove //Google或Safari浏览器
{
0%{top:0px; left:0px;}
25%{top:0px; left:400px;}
50%{top:100px; left:400px;}
75%{top:100px; left:0px;}
100% {top:0px; left:0px;}
}
#donghua
{
width:120px;
height:120px;
background-image:url(img/1.gif);
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; //Google或Safari浏览器
}
/* 省略其他浏览器的设置代码*/
（3）运行本案例的代码查看动画效果，最终运行效果如12-12所示。
图12-12 简单动画的运行效果
12.3.2 动画属性
使用@keyframe创建好动画后并不能实现动画的效果，必须通过动画的相关属性将该样式应用到页面元素上。CSS 3中提供了多个与动画相关的属性，它们分别是animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、a nimation-direction、animation-fill-mode和animation。
与变形、过渡和@keyframe的相关属性一样，目前所有的浏览器都不
提供对动画属性的支持，所以在使用这些属性时必须根据不同的浏览
器添加前缀，如Google或Safari浏览器可以添加“-webkit-”。
1．animation-name属性
animation-name属性用来定义应用动画的名称，它的值是@keyframe中绑定到选择器的关键帧的名称。如果值为none则指定没有动画，通常用于覆盖或取消动画。该属性的语法形式如下：
animation-name:animationname | none;
如下代码指定了图片运行时动画效果，并为div应用指定的动画样式。具体代码如下：@-webkit-keyframes changepic{
from{background-image:url(image/pic1.jpg);}
to{background-image:url(image/pic2.jpg);}
}
div{
animation-name:changepic; //指定动画效果名称为mymove
}
2．animation-duration属性
animation-duration属性定义动画完成一个周期需要多长时间，单位为秒（s）或毫秒（m s）。该函数的语法形式如下：
animation-duration:time;
如下代码指定5秒内完成div元素的动画效果：
div{
animation-name:changepic; //指定动画效果名称为mymove
animation-duration:5s; //完成动画的时间是5秒
}
3．animation-timing-function属性
animation-timing-function属性指定动画以哪种方式完成执行效果，该属性的值有与tran sition-timing-function属性的值相同，具体说明可以参考12.1.5节。
animation-timing-function属性的语法形式如下：
animation-timing-function: liear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);
如下代码指定div元素在5秒内匀速完成动画效果：
div{
animation-name:changepic; //指定动画效果名称为mymove
animation-duration:5s; //完成动画的时间是5秒
animation-timing-function: linear; //匀速完成动画
}
4．animation-delay属性
animation-dealy属性定义在执行动画之前的延迟时间，单位是秒（s）或毫秒（ms）。该属性值可以是负值，如果为负值表示动画启动进入动画的周期。其语法形式如下：animation-delay:time;
如下代码指定元素延时5秒后再开始动画效果：
div{
animation-name:changepic; //指定动画效果名称为mymove
animation-duration:5s; //完成动画的时间是5秒
animation-delay:5s; //延迟5秒后再开始动画
}
5．animation-iteration-count属性
animation-iteration-count属性定义动画重复播放的次数。它的属性值是一个数字或infin ite，如果是数字表示定义应该播放多少次动画，如果是infinite则指定动画循环（永远）播放。该属性的语法形式如下：
animation-iteration-count:number | infinite;
如下示例代码指定重复播放div元素的动画效果：
div{
-webkit-animation-name:mymove;
-webkit-animation-duration:5s;
-webkit-animation-delay:1s;
-webkit-animation-iteration-count:3;
}
6．animation-direction属性
animation-direction属性定义当前动画播放的方向，即动画播放完成后是否逆向交替循环。其语法形式如下：
animation-direction:normal | alternate;
animation-direction属性的值有两个：normal是默认值，表示动画每次都会正常显示；a lternate表示交替逆向运动，即动画正向播放奇数次迭代，反向播放偶数次迭代。7．animation-play-state属性
animation-play-state属性指定动画是否正在运行或已经停止，其语法形式如下：
animation-play-state:paused | running;
animation-play-state属性的值有两个：paused和running。paused表示暂停动画；runnin g指定动画正常运行。
8．animation-fill-mode属性
animation-fill-mode属性定义动画开始之前或者播放之后所进行的操作，该属性的语法格式如下：
animation-fill-mode:none | backwards | forwards | both;
上述语法中animation-fill-mode属性的值有4个，它们的具体说明如下：
●none 默认值，表示动画按照定义的顺序执行，且执行完成后返回到初始的关键帧
●backwards 指定关键帧在动画开始前应用样式
●forwards 指定关键帧在动画结束后才应用样式
●both同时应用forwards和backwards的效果
如下代码指定了该属性在动画中的使用：
div{
-webkit-animation-name:mymove;
-webkit-animation-duration:5s;
-webkit-animation-fill-mode:both;
}
9．animation属性
与transition 属性一样，animation 属性也是一个标记属性，通过它也可以设置其他属性的值。其语法形式如下：
animation: animation-name animation-duration animation-timing-function animation-delay animation-iter ation-count animation-direction;
使用animation 属性时必须将animation-name 和animation-duration 属性指定，否则持续的时间为0，并且永远不进行播放。
如下示例代码使用多个动画属性定义了元素的完成实现效果：
div{ -webkit-animation-name:mymove; -webkit-animation-duration:5s;
-webkit-animation-timing-function:linear; -webkit-animation-delay:0.5s;
-webkit-animation-iteration-count:infinite; -webkit-animation-direction:alternate; -webkit-animation-play-state:running; -webkit-animation-fill-mode:both;
}
上面的代码可以使用animation 属性来定义，具体代码如下：
div{ -webkit-animation:mymove 5s linear 0.5s infinate alternate; -webkit-animation-play-state:running; -webkit-animation-fill-mode:both;
}
使用animation 属性还可以同时定义多个动画效果，每个之间使用逗号分隔。示例代码如下：
p{
//同时定义多个动画效果
animation: mymove 5s ease-in-out 5ms infinite alternate,
youmove 3s ease-in-out 4ms infinite;
}
animation 属性可以组合（或缩写）上述语法中的6个属性，但是它并不包含animation-play-state 属性和animation-fill-mode 属性，需要额外设置这两个属性。
12.3.3 图片轮换显示的动画效果
前两节已经详细介绍过实现动画所需的关键帧和动画属性，本节将它们起来结合实现一个简单的示例。 【实践案例12-7】
用户在访问网页时会发现许多页面上都实现了图片不断轮换显示的效果，如果在HTM L 4中需要借助第三方内容（如JavaScript 和JQuery 等）通过编码来实现，但是本节仅仅通过设置元素的相关属性样式来实现图片轮换显示的动画效果。其主要步骤如下：
（1）添加新的HTML 页面，在页面的合适位置添加div 元素、img 元素和p 元素。页
形状变形动画制作步骤： 1、启动软件； 双击桌面上的 2.制作元件：元件变化包括：一个任意图形到另一个任意图形的变形，一个任意图形大小的变形，一个任意图形和多个任意图形的变形。 A 单击“插入”菜单——新建元件——输入元件名称——选择元件类型——确定。 B 一个任意图形到另一个任意图形的变形： 单击时间轴上的第一帧，单击工具面板上的椭圆工具，笔触色静止，在编辑区拖动鼠标画椭圆——在时间轴上第一帧至第20帧的任意帧处右击（单击鼠标右键），选择“插入关键帧”，单击面板上的黑箭头（即选择工具），在椭圆外单击一下，取消对椭圆的选择——鼠标指向椭圆，当出现弧形时按住键盘上的CTRL，拉出心形尖角 说明：两个关键帧之间的距离长短决定了动画变化的快慢。 C心形大小的变化：右击时间轴上第30帧处——插入关键帧——单击工具面板上的“任意变形”工具——单击编辑区里的心形——拖动心形周围的控点，将心形拉大——右击40帧——插入关键帧——单击任意变形工具——单击心形，将心形缩小。 这样，一个心形大小的变形动画结束。 D 心形一个变多个的变形：右击50帧——插入关键帧——右击心形——复制——到空白处右击——粘贴——拖动粘贴出来的心形至合适位置处。 C单击第1-20帧，帧处任意帧——选择编辑区下面的补间下拉按钮——选择形状（当出现绿色的箭头时，表明形状变形动画制作成功）。其余的20至30，30-40，40-50之间形状补间的添加照此类推 3.元件在舞台上的展示 单击场景按钮，切换到舞台编辑状态——单击图层1第一帧 A背景的添加： B导入图片到库里：文件菜单——导入——导入到库——选择图片文件——打开。 C单击场景图层1第一帧，从库里拖图片到舞台。 D单击图层1下方的“添加图层”按钮，添加出图层2（做动画时，为了分清每个的内容，可将图层进行命名：方法是,双击图层，输入名称，在图层外空白处单击一下即可），单击图层2第一帧，拖动库里的元件到舞台适当位置处。 4.动画影片测试：单击控制菜单——选择测试影片。
修改安卓手机状态栏及 美化 Company number：【WTUT-WT88Y-W8BBGB-BWYTT-19998】
删除自己用不到的软件，添加自己想用的软件，其实很简单例如：打开某R O M出现以下文件夹 data->app:目录下的软件是在android中可以自由删除软件，不要想的统统删掉，想添加软件直接把APK文件放到此文件夹即可例如：想要在ROM中添加安智市场，只需将安智市场的APK文件放在data->app目录下即可，如下图
2011-2-23 15:37 上传 system->app:目录下的软件是android自带软件，在系统中无法删除的，你可以在这里删除掉，比如youtube之类. 关闭打开的RAR即可，重新刷机之后，你发现想删掉的文件没了，想要的出现了. 本帖最后由无敌风火轮于 2011-2-24 13:59 编辑 美化ROM包括，字体，图标，壁纸，状态栏的修改.但是这些全部都在framework-res之内.下面给大家提供一个 修改framework-res美化界面教程 原文如下： ”在尝试制作半透明升级包的过程中，我发现有几个图片无论如何也不能透明，即使你挖空它，可能是Android 还不能接受全透明吧……
用WinRar打开，绝大部分要修改的都在res\drawable-mdpi内（不同的ROM可能文件夹名字不一样，但是很快就能找到图片最多那个）。 信号和电池要修改的几个文件（某些ROM，如基于Beta7的，还有、、要修改）： 这些文件大部分通过英文就能明白它们所指的意思。 屏幕锁屏时要修改的（请到drawable-land-mdpi文件夹修改同样名称的几个，drawable-land-mdpi 文件夹保存的是横屏时的一些图片）： 一般需要我们修改的就是任务栏，这些文件基本都在framework-res里面，大家可以在framework-res文件里面查找对应文件并替换就可以了.
---------------------------------------------------------------最新资料推荐------------------------------------------------------ 改字体大小字体间距详细教程(安卓、塞班、电脑 可用) 字体文件安卓，塞班， PC 全都通用，改名字就好。 第一部分： 替换字体教程首先，说一下字体替换原理： Android 系统的字体包路径为手机存储\ system\ font 其中三个字体包分别对应的字体如下： DroidSans.ttf 系统默认英文字体 DroidSans-Bold.ttf 系统默认英文粗字体 DroidSansFallback.ttf 系统默认中文字体替换字体教程： ①确保你手机已经 ROOT 过，并且装了 R.E 管理器，如果没有请自行搜索②将你下载好的字体解包三个文件放进 sd 卡，随便哪，能找到就行③用手机打开 R. E 管理器，进入sdcard，找到你的字体。 ④按菜单键看到多选，选中你的三个字体。 ⑤找到 system/fonts，记住！点击上面的挂载读/写。 然后粘贴。 ⑥修改你刚才粘贴过的字体的权限 2-1-1，即第一行勾上第一、二个。 第二行、第三行只勾第一个。 ⑦重启手机。 1 / 3
第二部分： 修改字体大小教程 1 部分手机可以通过修改 system 文件夹下的 build.prop 文件里面的字符串来找到字符串： [ Copy to clipboard] [ - ] CODE: ro.sf.lcd_density= 180 不一定是 1 80，一般 1 80-240，改大数值，数值越大，字符越大。 修改后重启不行的话就只能用 Fontcreator 在电脑上改了。 2 电脑端 FontCreator 软件修改教程： 首先需要电脑端修改字体软件 FontCreator： 教程如下： 1 .打开 FontCreator。 2.文件-打开-选择你要修改的字体文件，上面说过了，中文的话是 DroidSansF fontcreat or.zip (9.37 MB) 3.找工具栏的格式-字体设置。 4.看布局部分。 单位/ em 位置，数字越大，字体越小，反之一样。 5.修改后保存，替换进手机看效果。 第三部分： 修改字体间距教程 1 .一个字占四个字节的情况。 选择： 格式》设置》类别》类别》选择短体。 保存即可。
精心整理 动画十大运动规律 2008-10-0223:31:54| 分类：动画进化| 标签：动作分解|举报|字号大中小订阅 1、压缩与伸展 当物体受到外力作用时，必然产生形体上的压缩和伸展。动画中运用压扁和拉长的手法，夸大这种形体改变的程度，以加强动作上的张力和弹性，从而表达受力对象的质感、重量，以及角色情绪上的变化，例如：惊讶、喜悦、悲伤等。 “压缩与伸展”应注意的几点： 跟随和重迭是一种重要的动画表现技法，它使动画角色的各个动作彼此间产生影响，融混，重迭。移动中的物体或各个部分不会一直同步移动，有些部分先行移动，有些部分随后跟进，并和先行移动的部分重迭的夸张表演。 跟随和重迭往往和压缩和伸展结合在一起运用，能够生动地表现动画角色的情趣和真实感。 6、慢进与慢出 动作的平滑开始和结束是通过放慢开始和结束动作的速度，加快中间动作的速度来实现。现实世界中的物体运动，多呈一个 抛物线的加速或减速运动
7、圆弧动作 动画中物体的运动轨迹，往往表现为圆滑的曲线形式。因此在绘制中间画时，要以圆滑的曲线设定连接主要画面的动作，避免以锐角的曲线设定动作，否则会出现生硬、不自然的感觉。不同的运动轨迹，表达不同的角色特征。例如机械类物体的运动轨迹，往往以直线的形式进行，而生命物体的运动轨迹，则呈现圆滑曲线的运动形式。 8、第二动作 第二动作可理解为主要动作的辅助动作，它能丰富角色人物的情感表达。但第二动作只能以配合性的动作出现，不能过于独 立或剧烈，不能喧宾夺主，影响主要动作的清晰度。 生弹力，形变消失时，弹力也随之消失。动画片中处理变形不明显的运动物体时，要运用夸张变形的动漫手法，表现出独特的弹性运动。在表现物体弹性运动时，也要处理好动画速度和节奏间的关系，否则就达不到理想的动画效果。 3、曲线运动 当物体受到与其运动方向成一定角度的力的作用时，便形成了曲线运动。大致可以分为三类：弧形运动、波形运动、s形运动。曲线运动能表现各种细长、轻薄、柔软及富有韧性和弹性的物体的质感。是动画片中经常运用的一种运动规律，它能使人物或动物的动作以及自然形态的运动产生柔和、圆滑、优美的韵律感和协调感。 1）弧形运动 当物体的运动路线呈弧线、抛物线的行进轨迹时，称为弧形曲线运动。
大家用安卓手机这么久了有没有考虑缓缓手机字体的口味的想法呢?今天小编就教大家简单的修改自己教程,以后女女们就可以风风光光的拿出自己的爱机在盆友面前炫耀了,怎么?心动了吧!下面就给大家上教程吧! 注意：字体替换之后如果会出现“口口口”现象的话，一般是因为你没有修改权限引起的，大家一定要注意！具体字体的形状将不再阐述，大家可以百度，尽管不是所有都合你的口味，总有些是不错的。 先说字体替换教程——此教程针对S-OFF的机油有效。 Android系统的字体文件路径为手机存储\system\font 其中三个字体文件分别对应的字体如下： 1、DroidSans.ttf 系统默认英文字体 2、DroidSans-Bold.ttf 系统默认英文粗字体 3、DroidSansFallback.ttf 系统默认中文字体 本教程采用直接替换法，要求手机必须是root了的，为了避免一些机友替换失误，中文无法显示的情况，在替换之前最好备份一下原文件免得想换回来的时候找不到，备份方式除了将原文件拷贝出来以外，还可以修改原文件名。 【步骤】： 1、root你的爱机。 2、下载字体文件。这个可以从下面的地址下，也可以网上找自己喜欢的字体。 3、下载安装“RE文件管理器”（Root Explorer）这软件可谓是玩机必备。 4、把下载的字体包（后缀名为.ttf）放在存储卡里，位置随意，只要能找得到。 5、打开RE文件管理器，找到你之前下载的字体，重命名为DroidSansFallback.ttf。 6、然后长按字体文件选择复制，然后粘贴到手机存储\system\fonts\目录下（注意：RE管理器“载装读/写”才能粘贴，RE右上角的按键。若提示覆盖，点击“是”即可。） 7、最关键的一步：找到DroidSansFallback.ttf，长按DroidSansFallback.ttf弹出对话框选择“权限（Permissions）”， 由下面左边图的样式改为右边图的样式，再点击确定。
动画十大运动规律 2008-10-02 23:31:54| 分类：动画进化| 标签：动作分解|举报|字号大中小订阅 1、压缩与伸展 当物体受到外力作用时，必然产生形体上的压缩和伸展。动画中运用压扁和拉长的手法，夸大这种形体改变的程度，以加强动作上的张力和弹性，从而表达受力对象的质感、重量，以及角色情绪上的变化， 例如：惊讶、喜悦、悲伤等。 “压缩与伸展”应注意的几点： 1、压缩和伸长适合表现有弹性的物体不能使用过度，否则物体就会失去弹性，变得软弱无力。 2、在运用压缩和伸长时，虽然物体形状变了，但物体体积和运动方向不能变。 3、压缩与伸长运用到动画角色人物上，会产生意想不到的趣味效果。
2、预期动作 动作一般分为预期动作和主要动作。预期动作是动作的准备阶段的动作，它能将主要动作变得更加有力。在动画角色做出预备动作时，观众能够以此推测出其随后将要发生的的行为。 预备动作的规则是“欲左先右，欲前先后” 3、夸张 夸张是动画的特质，是动画表现的精髓，。夸张不是无限制的夸张，要适度，要符合运动的基本规 律。
美国DIC娱乐公司出品的动画片《Sabrina》猫咪全身根根如倒刺般 的立起的皮毛，之字形的尾巴，拉长如一根直线般的身躯等等 4、重点动作和连续动作 动画的绘制，有其独特的步骤，重点动作(原画)和连续动作(中间画)需分别绘制。首先把一个动作拆成几个重点动作，绘制成原画。原画间需插入中断动作，即补齐连续重点动作的中间画连续动作，这个补 齐中间画的工作叫中割
5、跟随与重迭 跟随和重迭是一种重要的动画表现技法，它使动画角色的各个动作彼此间产生影响，融混，重迭。移动中的物体或各个部分不会一直同步移动，有些部分先行移动，有些部分随后跟进，并和先行移动的部 分重迭的夸张表演。 跟随和重迭往往和压缩和伸展结合在一起运用，能够生动地表现动画角色的情趣和真实感。
小白修改手机字体大小一点通（教程）Android版各位机油大家好，水民可以在网站上搜到一堆修改字体风格或修改大 小的帖子，但两者可兼得的内涵贴却 寥寥无几(当然本人也是小白) 今天小鸢同学特此将所学融合在此，先看效果，装了华文行楷效果如下 第一张是歌曲界面，第二张电子书，第三张短信，第四张软件主页 TNND，最后一张竟然挂了
一：字体替换方法 首先，说一下字体替换原理： Android系统的字体包路径为手机存储\system\font其中三个字体包分别对应的字体如下： DroidSans.ttf 系统默认英文字体 DroidSans-Bold.ttf 系统默认英文粗字体DroidSansFallback.ttf 系统默认中文字体 步骤： 一、root机机，没有root的不必往下看 二、下载字体包。电脑上能用的TTF 字体手机基本都 能用。 三、打开RE管理器，如果没有下载安装Root Explorer（后面就简称RE了）软件可谓是玩机必备，地球都知道。 四、把下载的字体包放在手机自带存储卡里，哪里都行，只要能找得到。 五、打开RE，找到你之前下载的字体，重命名为DroidSansFallback.ttf，（注意区分大小写） 然后复制，粘贴到手机存储\system\fonts
目录，这时会覆盖或替换先前的字体（注意下RE权限挂载只读，否则无法粘贴） 然后很重要的一步！修改权限一定不能忽略！长按刚粘贴过来的字体文件（否则会出现一些口口）这时弹出一个界面读：三个竖框均打钩写只打第一个钩执行不打 ok 开机重启，效果出现，但可能性问题会出现如下： 字体混合 解决办法 部分安卓手机按教程修改字体后，出现只有部分汉字应用了新字体，而其余的还是旧字体的现象，也就是…混合字体?。 解决的办法是：删除system/fonts下的MTLmr3m.ttf文件，重启手机，问题解决，字体完美应用。 字体过小（大），不是我想要的： 第二个问题自然是需要解决的重点： 在这里首先介绍第一种简单方法，
1.在动画运动规律技巧方面美国与日本动画的区别 在技巧方面，非常充分的运用了传统的动画表现手法，展现各类物体的物理现象，我们常常称其为运动规律。弹性运动，曲线运动，预备和缓冲运动。美国动画片被当做艺术品和经典作品来完成，多为电影大片，制作周期长，品质优良。在运动规律方面，日本动画制作张数仅为美国动画的五分之一。常常“停格”。因此，日本动画大量运用大量摄影技巧来弥补运动方面的不足，日本动画多为电视动画，周期短，产量大。 2.什么是动画设计稿 设计师根据分镜头台本的构图人物造型比例以及场景样稿画设计稿，设计稿最主要的任务是统一背景和人物的透视。 3.什么是动漫 动漫是由“cartoon”包括两方面内容，动画和漫画，静止不动的称为漫画，像电影一样会动的称之为动画 4.视觉残留（名词解释） 物体在移动前其影像在人眼的视网膜上会有八分之一秒左右的停留，如果这个物体形象的动作每三格动一下，观者看到的就不是静止的画面，而是运动的画面。 4.画运动规律的专用设备叫“透台”又叫“拷贝台” 5.动画专用纸有三个定位孔，叫做“动画纸”用“定位尺”来固定 6.动画线条绘制标准“准，挺，匀，活” 7.日文的“中割”也称之为“动画”，即运动物体关键动态之间呈渐变过程的，已构成一个形体的画，对一个单一的动作而言，两头极限的两张叫做原画，中间的画面就叫做中间画8.动画中有哪几种变形 主要有四类变形（1）荒诞变形（2）弹性运动变形（3）预备和缓冲变形（4）阻力变形 9.什么是弹性运动变形 物体受到力的作用时，形态会发生改变，这种改变在物理学上称之为弹性，当作用力大于反作用力时就成生了变形，物体在发生形变时会产生弹力想，当形变消失时，弹力也随之消失10.预备和缓冲变形 预备动作是指动画角色在同某一方向运动前呈现的一个反方向动作，加了物体的夸张，缓冲室物体受到惯性的影响，一时止不住而产生的物理现象，也会引起物体的变形，预备和缓冲引起的变形和夸张是动画设计中常用的一种技巧，目的是使动画片更具有戏剧性。 11.阻力变形 物体受到阻力和离心力时也会变形，阻力变形会使动作充满力度 12.什么是转面 转面就是绘制角色或物体的朝向连续变化的过程，是运动规律中最基本的技法 13.头部转面要点 用十字线（眼线和中线）表示头部的朝向，用一个圆球概括头部形状来绘制转面，首先要注意角色自身的结构，在转面过程中基本保持角色结构不变。同时要注意两种透视关系：即切割的距离和造型的透视。 14.自然转面法 绘制转面时，还有一些技巧需要注意，才能使转面过程自然生动，称为自然转面法，如果眼神与头部同步运动，那么画出的效果就很机械，绘制转面时，可以让眼神先与头部运动，或者滞后，同时配合抬头——低头的过程，使转面呈现出弧线效果，都是自然转面常用的技巧。 15.表情绘制 表情主要通过口型和五官运动来表示
【新手定制ROM入门教程一】如何内置软件删除自己用不到的软件，添加自己想用的软件，其实很简单 例如：打开某ROM出现以下文件夹 data->app:目录下的软件是在android中可以自由删除软件，不要想的统统删掉，想添加软件直接把APK文件放到此文件夹即可例如：想要在ROM中添加安智市场，只需将安智市场的APK文件放在data->app目录下即可，如下图
system->app:目录下的软件是android自带软件，在系统中无法删除的，你可以在这里删除掉，比如youtube之类. 关闭打开的RAR即可，重新刷机之后，你发现想删掉的文件没了，想要的出现了. 【新手定制ROM入门教程二】如何美化ROM 美化ROM包括，字体，图标，壁纸，状态栏的修改.但是这些全部都在framework-res之内.下面给大家提供一个 修改framework-res美化界面教程 原文如下： ”在尝试制作半透明升级包的过程中，我发现有几个图片无论如何也不能透明，即使你挖空它， 可能是Android 2.1还不能接受全透明吧…… 用WinRar打开framework-res.apk，绝大部分要修改的都在res\drawable-mdpi内（不同的ROM可能文件夹名字不一样，但是很快就能找到图片最多那个）。 状态栏要修改的几个文件：还有status_bar_header_background.9.png、 status_bar_item_background_normal.9.png可以修改，但是不能改成透明的（至少我修改失败了，不过末将说可以）。 信号和电池要修改的几个文件（某些ROM，如基于Beta7的，还有stat_sys_signal_null.png、
《动画运动规律》课程教案 第一章人的运动规律 一、本部分课堂教学参考学时：20学时 在动画片中，人物的表演是非常关键的，掌握人物动作的基本运动规律是设计与表演的基础。人物的动作复杂多变，但基本规律是相同的，在本部分中，我们以人物常见的走跑跳等为主，展开教学。 二、主要教学内容： 第一节走路 第二节跑步 第三节跳动 第四节表情 第五节口型 三、学习顺序与方法： 请先浏览各部分文本框中的教学内容。 四、重点与难点： 1、重点：正确掌握人物正常行走、跑步、跳动的关键动作、加中间画的要领，掌握表情线的特点，掌握口型与脸型的关系。 2、难点：人在各种运动过程中不同风格的造型与时间、节奏的关系。 五、作业与练习： 本部分各小节均有作业练习，点击界面左下方的“作业练习”键，即可进入本小节的作业练习文本框。在文本框中列有当前小节的相应练习，点击文中出现的彩色热字，即出现相应的示范画面，供学员学习、临摹。 作业要求：临摹并熟记示范画面中的造型与顺序，并能熟练地画出来。 工具：笔：B—2B的铅笔纸：铅画纸、打印纸、复印纸均可。橡皮：软质橡皮 第一节人的运动规律--走路 人走路时左右两脚交替向前，双臂同时前后摆动，但双臂的方向与脚正相反（图001）。脚步迈出时，身体的高度就降低，当一只脚着地而另一只脚向前移至两腿相交时，身体的高度就升高，整个身体呈波浪型运动（图002）。 脚的局部变化（图003）在走路过程中非常重要，处理好脚跟、脚掌、脚趾及脚踝的关系会使走路更加生动。 除了正常的走姿，不同年龄、不同的场合、不同的情节，会有不同的走路姿态。以下是常见的几种走姿： 正常的走姿（图004） 昂首阔步的走（图005） 蹑手蹑脚的走（图006） 垂头丧气的走（图007） 踮着脚走的走（图008） 跃步（图009） 在动画镜头中，走的过程通常有两种表现形式，一种是直接向前走，一种是原地循环走。直接向前走（图010）时，背景不动，角色按照既定的方向直接走下去，甚至可以走出画面。原地循环走（图011）时，角色在画面上的位置不变，背景向后拉动，从而产生向前走的效果。 画一套循环走（图012）的原动画可以反复使用，用来表现角色长时间的走动（图013）。本节作业与练习：( 本节作业范图从网络课程下载，网址：https://www.doczj.com/doc/936086825.html,/ )
Flash变形动画 一、定义 指一个物体变成为另一个物体。它主要着重于两个物体之间形状的变化。在变形的过程中可以产生位置、大小、颜色的变化。 1、确定初始状态 2、选择时间 3、确实终止状态 4、发出动画指令 例如：制作一个圆变长方形 1、先用椭圆工具画一个圆 2、选择时间，在第30帧单击 3、插入空白关键帧，单击“插入”——“时间铀”——“空白关键帧” 4、用矩形工具绘制一个长方形 5、发出变形动画指令，单击“属性”——“补间”——“形状” 二、如何播放动画 方法一 单击“控制”菜单中“测试影片” 方法二 按ctrl+enter组合键
三、椭圆工具 1、作用： 用于画椭圆或正圆形。 2、使用方法： （1）选择椭圆工具 （2）用鼠标在舞台上拖动 （3）释放鼠标 注意：如画正圆形，拖动时必须按住shift键。 四、矩形工具 1、作用： 用于画长方形或正方形。 2、使用方法： （1）选择矩形工具 （2）用鼠标在舞台上拖动 （3）释放鼠标 注意：如画正方形，拖动时必须按住shift键。 五、多角星形工具 1、作用： 用于画多边形或多角星 2、使用方法： （1）选择多角星形工具 （2）用鼠标在舞台上拖动
（3）释放鼠标 如须画多角星形需要将“选项”菜单打开，再选择“样式”中“星形”例如画一个五角星。 六、选择工具 作用： （1）用于选择对象 单击用于选择图形中一个部分； 双击用于选择整个图形（包括框线及内部填充色） （2）用于移动对象 选中对象后，按住鼠标左键拖动 （3）用于变形 可以改变物体的形状。 文字、数字、字母的变形动画。 对于文字、数字、字母做变形动画时，不能直接做，必须将它用“分离”命令。 “修改”——“分离” 注意：对于两个以上的文字、数字或字母必须用两次分离命令。 设置变形效果 添加形状提示点，可以控制变形的效果，从而可以做出许多种不同的变形效果。 “修改”——“形状”——“添加形状提示”
max2012魅力动画 动画10大运动规律（扩展知识） 1、压缩与伸展 当物体受到外力作用时，必然产生形体上的压缩和伸展。动画中运用压扁和拉长的手法，夸大这种形体改变的程度，以加强动作上的张力和弹性，从而表达受力对象的质感、重量，以及角色情绪上的变化， 例如：惊讶、喜悦、悲伤等。 “压缩与伸展”应注意的几点： 1、压缩和伸长适合表现有弹性的物体不能使用过度，否则物体就会失去弹性，变得软弱无力。 2、在运用压缩和伸长时，虽然物体形状变了，但物体体积和运动方向不能变。 3、压缩与伸长运用到动画角色人物上，会产生意想不到的趣味效果。
2、预期动作 动作一般分为预期动作和主要动作。预期动作是动作的准备阶段的动作，它能将主要动作变得更加有力。在动画角色做出预备动作时，观众能够以此推测出其随后将要发生的的行为。 预备动作的规则是“欲左先右，欲前先后” 3、夸张 夸张是动画的特质，是动画表现的精髓，。夸张不是无限制的夸张，要适度，要符合运动的基本规 律。
美国DIC娱乐公司出品的动画片《Sabrina》猫咪全身根根如倒刺般 的立起的皮毛，之字形的尾巴，拉长如一根直线般的身躯等等 4、重点动作和连续动作 动画的绘制，有其独特的步骤，重点动作(原画)和连续动作(中间画)需分别绘制。首先把一个动作拆成几个重点动作，绘制成原画。原画间需插入中断动作，即补齐连续重点动作的中间画连续动作，这个补 齐中间画的工作叫中割
5、跟随与重迭 跟随和重迭是一种重要的动画表现技法，它使动画角色的各个动作彼此间产生影响，融混，重迭。移动中的物体或各个部分不会一直同步移动，有些部分先行移动，有些部分随后跟进，并和先行移动的部 分重迭的夸张表演。 跟随和重迭往往和压缩和伸展结合在一起运用，能够生动地表现动画角色的情趣和真实感。
第一章绪论 ①在《埃及王子》、《人缘泰山》、《小马王》等几部在技术上取得重大突破的动画片影片问世之后，人们加强了运动规律是动画影片的技术支撑的认识，不再把它作为二维动画独有的技术知识。尤其是《小马王》这不影片，它是在三维技术环境中完成的，在制作中吸收了大量的二维动画运动规律的经验。动作表演的完成基本上是在原画设计师的指导下进行的。当影片最终以二维动画的画面形式出现的时候，人们几乎感觉不到三维制作的痕迹，这时，影片中角色动作表演的感染力就更强大了，可见，运动规律不是单纯的技术问题，而是一种修养。就像演员的表演素质一样，它不是机械的数据理论。它可以随着技术的不断更新而调整工作方式或研究方法，哪怕就是在动作捕捉技术发明、推广之后，人们依然需要根据运动规律的知识来提高动作表演的质量。 ②原动画运动规律的经验包括：基本的运动规律和个性化的动作设计。在运动规律这门课程中，我们要讲解的就是常见动作的基本规律，以及围绕这些基本规律展开的常见的个性化表演，同时学会研究和总结运动规律的方式方法。因为运动规律是一门经验性较强的学科，它除了要求掌握大量的基础知识之外，还要通过不断地实验操作来加强基础知识的运用，在练习和创作中不断积累新的运动状态的规律和表现经验。通过对运动规律基础知识的分析，让学习者掌握运动规律的研究方法。我们既是学习者又是研究者，这样才能具备真正的原动画制作和原动画动作设计的能力。 第二章运动规律的基本知识 动画的概念： ①在这门课程中，必须准备以下工具： ⑴动画用纸张打孔机 ⑵动画用定位尺 ⑶拷贝箱 ⑷黑色铅笔和彩色铅笔 ⑸一面镜子和一支秒表 ②动画的工作流程: ⑴前期工作 ⑵中期制作 ⑶后期制作 ⑴前期工作包括：企划、剧本编写、形象设计、场景画面风格设计和分镜头剧本的绘制。 ⑵中期制作包括：镜头规格设计、原动画制作、背景制作和色处理。 ⑶后期制作包括：镜头合成、音效、特技处理和后期编辑。 ③工作进度表，是一部动画片进入实际制作后的时间进程安排与计划。 ④动画作品在制作的时候缺乏一般绘画创作的随意性，而是要求极其严谨、细致的工作态度。 动画制作中的时间概念： ①所谓“动画时间”：是指影片中物体（包括生物和非生物）在完成某一动作
从理论上讲，只要是TTF格式的字库都可以互换（包括各种手机和电脑），只要系统盘能装下即可，但用BUSYBOX DF命令在超级终端上查看SYSTEM目录剩余空间只有4M左右，G1原中文字库3M左右，所以最多能换7M以下的字库（视SYSTEM目录剩余空间大小而异）！ 下面开始讲解如何进行Android手机系统字体替换（主要有两个步骤）： 一、用rootexplorercopy准备用于替换原字库的新字库文件（中文字库需改名为DroidSansFallback.ttf 、英文字库需改名为DroidSans.ttf） 二、用rootexplorer将copy的新字库文件粘贴到手机字库目录/system/fonts/替换原字库文件（两步冲冲完成，不用重启也可以尝到“华文行楷”圆润爽滑的口感）！ 光通过以上两个介绍你肯定还是很迷茫，下面我们就再对这两个步骤进行一个详细的分解： １、把XP字体库目录下的C:\WINDOWS\Fonts\STXINGKA.ttf(华文行楷)字库文件迅速地copy到手机SD卡上，并改名为DroidSansFallback.ttf 2、打开rootexplorer后，稍稍地进入G1的字库目录“/system/fonts”，然后轻轻地按下右上角的“Remount as R/W ”按扭使字库目录变为可“读/写”状态。（把原中文字库文件DroidSansFallback.ttfcopy一份到SD卡，当你玩腻新鲜后可以换回原配的） 3、找到刚才拷入SD卡的华文行楷字库DroidSansFallback.ttf（原名STXINGKA.ttf）并copy到G1的字库目录/system/fonts/替换原中文字库文件 4、提示是否替换文件，轻轻的按下“YES”后精彩的一幕即将上演！ 5、文件copy已完成，至此华文行楷字库已经完美地插入G1的内部，换完后可以在“高级设置”里将字体调大点，这下可以亲身体会华文行楷圆润爽滑的口感！ 6、用同样的方法将那个英文字库也换成你心怡的对象：首先用记事本或Office 办公软件等选中你心怡的英文字库（打开记事本-->格式-->字体；打开WORD-->格式-->字体-->字体），记住名字后，同样到XP字体库目录C:\WINDOWS\Fonts\找到同名字库文件（如JOKERMAN.TTF）并copy到SD卡后改名为DroidSans.ttf ，接下来就是
修改安卓手机状态栏 及美化 Revised on November 25, 2020
删除自己用不到的软件，添加自己想用的软件，其实很简单例如：打开某ROM出现以下文件夹 data->app:目录下的软件是在android中可以自由删除软件，不要想的统统删掉，想添加软件直接把APK文件放到此文件夹即可例如：想要在ROM中添加安智市场，只需将安智市场的APK文件放在data->app目录下即可，如下图 2011-2-23 15:37 上传
system->app:目录下的软件是android自带软件，在系统中无法删除的，你可以在这里删除掉，比如youtube之类.关闭打开的RAR即可，重新刷机之后，你发现想删掉的文件没了，想要的出现了. 本帖最后由无敌风火轮于 2011-2-24 13:59 编辑 美化ROM包括，字体，图标，壁纸，状态栏的修改.但是这些全部都在framework-res之内.下面给大家提供一个 修改framework-res美化界面教程 原文如下： ”在尝试制作半透明升级包的过程中，我发现有几个图片无论如何也不能透明，即使你挖空它，可能是Android 还不能接受全透明吧…… 用WinRar打开，绝大部分要修改的都在res\drawable-mdpi内（不同的ROM可能文件夹名字不一样，但是很快就能找到图片最多那个）。 信号和电池要修改的几个文件（某些ROM，如基于Beta7的，还有、、要修改）：
这些文件大部分通过英文就能明白它们所指的意思。屏幕锁屏时要修改的（请到drawable-land-mdpi文件夹修改同样名称的几个，drawable-land-mdpi文件夹保存的是横屏时的一些图片）： 一般需要我们修改的就是任务栏，这些文件基本都在framework-res里面，大家可以在framework-res文件里面查找对应文件并替换就可以了. 修改的经验： 用Photoshop打开图片，如果锁定了就双击那个图层解锁，如果是“索引模式”就改图层模式为“RGB模式”。 然后用磁性套索工具或者矩形选区工具（总之是你喜欢的选区工具选住要透明的部分），然后右键->羽化，再按Delete键挖空它。保存。 如果这时你用图片浏览器打开这个图片发现不是透明的，就继续操作吧。如果是要绝大部分透明，留一点半透明组件，那这里很难说清楚。 =================================================== 美化状态栏时其中时间颜色更改的详细方法 如题：请至xda下载名为changecolor的软件。（许多同学e文不好，咱e文也一般所以，方法仅是个人总结的。。。并未参考任何其他人或者作者的教程的直译，如有需要请取舍一二） 修改方法： 1.请先下载xda上面的（点击下载）文件，然后在此（点击跳转传送门）中的两个文件，一个名为smali1. 2.3
反编译framework-res.apk 得到framework-res文件夹！ 修改里面的文件， 找到（如何找到呢？看完就知道了） framework-res.apk\res\values\s.xml < name="bright_foreground_dark">#ffc8c8c8设置界面以及对话框顶栏字体颜色 < name="bright_foreground_dark_disabled">#80ffffff未启用功能字体颜色（暗色） < name="dim_foreground_dark">#ffbebebe 关于手机里的型号版本号字体颜色 < name="dim_foreground_dark_disabled">#80bebebe关于手机里的型号版本号以及二级目录字体暗颜色 < name="hint_foreground_dark">#ff808080输入框内提示文本颜色 < name="dim_foreground_light">#ff323232关机界面飞行模式等下的二级文本颜色 < name="bright_foreground_light">#ff000000选择列表字体颜色 < name="status_bar_text">#ffffffff状态栏字体颜色 < name="status_bar_clock_text">#ffbebebe状态栏时钟字体颜色 < name="status_bar_event_primary_text">#ffffffff下拉提示栏字体主颜色 < name="status_bar_event_secondary_text">#ffb6cad6下拉提示栏二级字体颜色 < name="sub_text_">#ff6e9cba全局二级字体颜色 把以上的颜色代码修改为你喜欢的颜色然后保存并退出（颜色代码可在百度上搜索，文中"#xxxxxxxx" #前两位为透明度，后六位为颜色代码），编辑工具仍然建议使用Notepad++，很方便的文本编辑器。如何查找到上面的代码呢？用
说明书上没有，修改字体需要手机有root权限，如果开始字体不是你修改的，那你最好去找修改的那个人。方法：1.确定手机root，就是得到最高权限；2.使用RE管理器复制ttf字体到手机/system/fonts下即可；3.重启手机； 一、字体安装 1、安装z4root，提权（帖子如麻，不再赘述）。 2、安装Re管理器（建议版本为2.13英文版，低版本或汉化后在某些机子上会有问题）。 3、下载字体文件 4、将下载来的字体文件存放到sd卡（什么位置无所谓，找到即可）。 5、将字体文件重命名（中文字体改为DroidSansFallback.ttf，英文常规字体改为DroidSans.ttf，英文加粗字体改为DroidSans-Bold.ttf，区分大小写！！！另：本步骤可与第4步互换）。 6、运行Re管理器，将sd卡上的字体文件复制（会吧，复制粘贴或移动）到/system/fonts/文件夹下覆盖同名文件即可。 7、设置复制过来的字体文件权限（从上往下，由左到右前4个打钩，实质上不设也没事）。 8、重启 OK！ 二、常见问题简单 1、无法覆盖原文件，提示because the file system is read-only。 解决办法：点击Re管理器上面的“Mount R/W ”命令，使文件权限由R/O状态变为R/W状态即可。 2、无法覆盖原文件，提示There was not enough free…… 解决办法：他告诉你空间不足，怎么办呢？
（1）换小一点的字体文件。 （2）删除一些/system下的内容（删什么呢？最好什么也别删，移动到sd卡上，系统自带程序都可以，什么飞信、MM……反正是应用程序.apk都可以，前提是你不想要的）。 （3）删除程序后，有时候看不到容量发生变化，重启即可，如果覆盖完字体文件后还有空间的话，再把刚才移走的程序移回去，这些程序照样可用）。 3、安装完字体后出现“口口口”这样的东东。 解决办法：对于出现这样的问题，指定是字体文件的原因，换句话说，就是字体库中没有要显示的那个字符。常规做法是：换一个比较全的字体文件；特殊做法是：利用字体编辑软件如Font Creator Program进行手动编辑。做法很简单（电脑上操作哦！），利用上述软件载入自带字体，再载入你下载来的字体，将下载来的字体的一部分（数字、大小写字母、常规符号，也就前面若干行）复制到原字体中覆盖保存即可。当然英文字体适合这样做，不过你要有耐心，中文字体也可以，逐个对比替换，估计得半天时间，中文文字符号太多，对于中文还是建议换一个字库全的字体文件。 4、替换字体后手机无法启动（很少有这样的情况）。 解决办法：重新刷机，呵呵！不是开玩笑，手机无法启动那就意味着手机端的操作全部否定，只能刷机。 一、root机机。具体方法因机而异，请 各位到自己专版里面找一下
本教程主要内容有：Android系统文件夹结构解析、应用软件说明、定制精简、ROM签名把包等内容。本教程测试平台为HTC G2、G3这两个型号，其它机型可以借鉴，刷机有风险，出问题自负。其实这个教程一早就想写的，但由于时间及本人的懒惰，一直拖着。今晚终于静下心来写好本文，本文有部份内容来自于网络。 速度与华丽，你喜欢那个。是不是想要一个又够速度又华丽的ROM呢？我是一个追求新鲜的人，对于手机的ROM，我又追求稳定、精简、美观、省电。现在Hero ROM有很多，最新的有第三方Android 2.1版本，但这些ROM的制作者都会跟据自已的个人喜欢会增加和增少相应的功能或是界面，但我们往往不喜欢这些ROM的某些小方面，所以随着而来面对的问题就是怎样把这个ROM修改成为一个自已真正需要的ROM呢？以往一直是依靠“大杀器”来解决，但觉得还是过于麻烦，所以寻求办法自己动手修改ROM。于是有了本文。废话少说，进入正题。 一、Android系统文件夹结构 一个完整的ROM根目录会有以下几个文件夹及文件： data META-IN system boot.img 系统目录说明 1. 应用程序安装目录 1) 系统应用程序所在目录 /system/app/*.apk 2)用户安装应用程序所在目录 /data/app/*.apk 3) 注意： a)在模拟器中，每重启一次，/system/app/下的应用都会被还原，有时/data/app下也会被清除 b)若在/system/app和/data/app下有重名的应用，不一定会启动哪一个，尤其是在adb install杀死正在运行的程序时，有时旧的就会被启动 2.用户数据所在目录 /data/data/应用包名/shared_prefs 配置文件 /data/data/应用包名/databases/* 库文件所在目录 3. SD卡对应目录 /sdcard/ 而我们需要处理的只是两个文件夹里面的内容： data/app –该文本夹里的文件可以全删，也可以自由添加自已所需安装的应用软件，刷机安装后可以自由删除。 system/app –在这个文件夹下的程序为系统默认的组件,可以看到都是以APK格式结尾的文件，但有些自制的ROM里面还有和APK 文件名对应的odex文件。我们主要是针对该文件夹里的文件进行精简，如果有odex文件的，删除APK文件名时同时也删除与其对应的odex文件。 虽然一般定制时只是对以上两个文件夹里的文件做相应的增减，但我们还是一起来了解system相应目录相应文件的用途吧。（rom版本不同里面的APK也会不一样） \\system\\app \\system\\app\\AlarmClock.apk 闹钟
变形动画的制作 本课特点 信息技术作为一门工具学科，学生通过学习完成对知识的探索、理解与应用，同时他们也将自己的想法与创意展现出来。本课是《动画大师——Flash Mx》中的变形动画，利用变形功能可以制作出类似变形的效果，让一种形状随时间变化成另外一种形状，同时形状的位置、大小、颜色均可以发生改变，为学生丰富的想象与创造力提供了技术支持。 学情分析： １、学情分析： 八年级学生在学习flash软件之前，已经学习过word软件、excel软件，已经具备了一定的自主学习、自主探究的能力。 在学习这节课之前，学生已经学习过flash软件工具箱中各个工具的功能，并学会综合运用工具绘制简单图形，为本节课的学习奠定了一定的基础。 ２、学生认知障碍点： 把变形动画的设计安排在动画学习的第一课，flash时间轴中各种帧的理解就成为本节课的一个认识障碍点。 教学目标 知识与技能： （1）理解Flash Mx中时间轴的帧、关键帧、空白关键帧、帧频的含义。 （2）能制作一个简单的“变形”动画。 过程与方法： （1）通过对变形动画的设计，具备自主探究、勇于实践、合作学习的能力。 （2）通过作品创作，具备运用所学知识对信息进行加工处理的能力，以及创新思维和审美能力。 情感态度与价值观： 能体验到创作所带来的成就感，增强学生进一步学习flash软件的信心。
教学重点 掌握变形动画的制作要领。 教学难点 灵活应用变形动画。 教学方法 创设情境法、任务驱动法、自主学习、小组合作、演示讲解法。 学习方法 任务驱动法、自主探究法、小组合作法、观察法、归纳总结法等。 课型：新授课 课时：1课时 教学过程 一、创设情境、激情导入 展示一幅flash画面，让学生欣赏，观察画面中“花朵”的变化，导入新课——《变形动画的制作》，从而激发学生的学习兴趣。 二、任务驱动、自主探究 （一）了解动画制作原理 大家都知道，电影是由一个一个的胶片按照先后顺序播放出来的，由于人眼有视觉停留现象，这一个一个的胶片按照一定速度播放出来，我们看起来就"动"了。动画制作采用的也是这一原理，是由一帧帧的画面组成的。我们要学习制作动画，首先应了解有关帧的概念与操作。好！大家请看时间轴。 （二）了解帧的概念与操作 时间轴上每一个小方格称为一帧，帧在时间轴上的排列顺序决定了一个动画的播放顺序。（师利用一个“秒表”动画讲解有关帧的概念与操作）１、帧；（插入帧） ２、关键帧；（插入关键帧）