css3中變形與動畫（二）

時間 2019-11-06

標籤 css3 css 變形動畫欄目 CSS 简体版

原文原文鏈接

css3製做動畫的幾個屬性：變形(transform)，過渡(transition)和動畫(animation)。javascript

transform介紹過了。接下來介紹過渡transition。css

1、例子

先經過一個例子感性認識一下transition的動畫效果。html

鼠標放上去，div寬度從100px增大到200px。java

<style type="text/css">
    div{
        width: 100px;
        height: 100px;
        background-color: red;
    }
    div:hover{
        width: 200px;
    }
</style>
<div></div>

這效果其實也算是動畫，可是很是變化很是快，不平滑。node

若是想讓鼠標放上去後div寬度在5s內平滑過渡到200px。只須要加一行代碼；css3

div:hover{
    width: 200px; transition:width 5s ease-in;
}

這裏用到的就是transition屬性，它就是用來實現屬性值平滑過渡，視覺上產生動畫效果。web

上面用的transition是縮寫，包含四個屬性:transition-property,transition-duration,transition-timing-function,transition-delay，下面會一一介紹。算法

2、transition

css3新增transition屬性，能夠在事件觸發元素的樣式變化時，讓效果更加細膩平滑。canvas

transition用來描述如何讓css屬性值在一段時間內平滑的從一個值過渡到另外一個值。這種過渡效果能夠在鼠標點擊、得到焦點、被點擊或對元素任何改變中觸發。瀏覽器

語法：

transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*

transition有四個屬性值：

transition-property:執行過渡的屬性。

transition-duration:指定完成過渡須要的時間。

transition-timing-function,在延續時間段，過渡變換的速率變化，簡單理解就是指定過渡函數。

transition-delay:過渡延遲時間。

一、transition-property

transition-property用來指定哪一個屬性使用過渡動畫效果。

語法：

transition-property ： none | all | [ <IDENT> ] [ ',' <IDENT> ]*

none:全部屬性都不該用過渡效果。

all：默認值。當值爲all時，元素產生任何屬性值變化時都將執行transition效果。

ident：元素屬性名。經過ident指定具體哪些屬性。若是指定的多個屬性中有某個屬性不能應用過渡效果，其餘屬性仍是生效的。

過渡屬性只有具有一個中點值的屬性（須要產生動畫的屬性）才能具有過渡效果。在w3c中列出了全部能夠實現transition效果的css屬性值以及值的類型，點這裏查看。

Property Name     Type
background-color     as color
background-position     as repeatable list of simple list of length, percentage, or calc
border-bottom-color     as color
border-bottom-width     as length
border-left-color     as color
border-left-width     as length
border-right-color     as color
border-right-width     as length
border-spacing     as simple list of length
border-top-color     as color
border-top-width     as length
bottom     as length, percentage, or calc
clip     as rectangle
color     as color
font-size     as length
font-weight     as font weight
height     as length, percentage, or calc
left     as length, percentage, or calc
letter-spacing     as length
line-height     as either number or length
margin-bottom     as length
margin-left     as length
margin-right     as length
margin-top     as length
max-height     as length, percentage, or calc
max-width     as length, percentage, or calc
min-height     as length, percentage, or calc
min-width     as length, percentage, or calc
opacity     as number
outline-color     as color
outline-width     as length
padding-bottom     as length
padding-left     as length
padding-right     as length
padding-top     as length
right     as length, percentage, or calc
text-indent     as length, percentage, or calc
text-shadow     as shadow list
top     as length, percentage, or calc
vertical-align     as length
visibility     as visibility
width     as length, percentage, or calc
word-spacing     as length
z-index     as integer

View Code

Note：並非什麼屬性改變都會觸發transiton動畫效果，好比頁面的自適應寬度，當瀏覽器改變寬度時，並不會觸發transition的效果。但上述表格所示的屬性類型改變都會觸發一個transition動做效果。

舉例：能夠同時給幾個屬性設置動畫效果，好比給height和line-height同時設置動畫效果，實現div變高文字仍然垂直居中。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>變形與動畫</title>
    <style type="text/css">
div {
    width: 300px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    background-color: orange;
    margin: 20px auto;
    -webkit-transition-property: height line-height;
    transition-property: height line-height;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
}
div:hover {
    height: 100px;
    line-height: 100px;
}
</style>
</head>
<body>
    <div>文字垂直居中</div>

</body>
</html>

View Code

二、transition-duration

transition-duration用來設置從舊屬性過渡到新屬性須要的時間，即持續時間。

三、transition-timing-function

語法：

<single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)

transition-timing-function屬性指的是過渡的「緩動函數」。經過這個函數會創建一條加速度曲線，所以在整個transition變化過程當中，變化速度能夠不斷改變。主要包括如下幾種函數。

ease:默認值，元素樣式從初始狀態過渡到終止狀態速度由快到慢，逐漸變慢。
linear：意思是線性過渡，即過渡過程恆速。
ease-in:速度愈來愈快，呈現加速狀態，一般稱爲「漸顯效果」。
ease-out:速度愈來愈慢，呈現減速狀態，一般稱爲「漸隱效果」。
ease-in-out速度先加速後減速，稱爲「漸顯漸隱效果」。

舉例：鼠標通過問號，幫助信息漸顯漸隱。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>transition-demo by starof</title>
    <style>
#help{
    width:20px;
    height:20px;
    border-radius:10px;
    color:#fff;
    background:#000;
    text-align:center;
    position:relative;
    margin:50px 20px;
    cursor:pointer;
}
#help .tips{

    position:absolute;
    width:300px;
    height:100px;
    background:#000;
    top:-30px;
    left:35px;
    border-radius:10px;
    opacity:0;
    /*漸隱效果*/
    transition: opacity .8s ease-in-out;
    -moz-transition: opacity .8s ease-in-out;
    -webkit-transition: opacity .8s ease-in-out;
}
.tips:before{
    content:"";
    border-width:10px;
    border-style:solid;
    border-color:transparent #000 transparent transparent;
    position:absolute;
    left:-20px;
    top:30px;
}
#help:hover .tips{
    opacity:0.5;
    /*漸顯效果*/
    transition: opacity .8s ease-in-out;
    -moz-transition: opacity .8s ease-in-out;
    -webkit-transition: opacity .8s ease-in-out;
}
</style>
</head>
<body>
    <div id="help">
        ?
        <div class="tips">幫助信息</div>
    </div>
</body>
</html>

View Code

四、transition-delay

transition-delay設置改變屬性值後多長時間開始執行動畫。

五、屬性簡寫

在改變多個css屬性的transition效果時，把幾個transition聲明用逗號隔開，而後每一個屬性就都有各自的過渡時間和效果。

Note：第一個時間是時長，第二個是延時。

a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}

3、貝塞爾曲線和transition

transition的數學模型就是貝塞爾曲線，下面介紹。

曲線其實就是兩點之間插值的效果，貝塞爾曲線是一種插值算法，比線性插值複雜一點。

貝塞爾曲線：起始點，終止點（也稱錨點），控制點。經過調整控制點，貝塞爾曲線的形狀發生變化。

k階貝塞爾插值算法須要k+1個控制點。

一階貝塞爾曲線（線段）：意思就是從P0到P1的連續點，用來描述一段線段。一次貝塞爾插值就是線性插值。

二階貝塞爾曲線（拋物線）：P0-P1是曲線在P0處的切線。

三階貝塞爾曲線：

transition用到的就是三階貝塞爾插值算法,以下圖。

時間在0,1區間，待變換屬性也認爲是0,1區間。P0和P3的座標一直是（0,0）和（1,1）。transition-timing-function屬性用來肯定P1和P2的座標。

ease [0, 0] [0.25, 0.1] [0.25, 1.0] [1.0,1.0]

linear [0, 0] [0.0, 0.0] [1.0, 1.0] [1.0,1.0]

ease-in [0, 0] [0.42, 0] [1.0, 1.0] [1.0,1.0]

ease-out [0, 0] [0, 0] [0.58, 1.0] [1.0,1.0]

ease-in-out [0, 0] [0.42, 0] [0.58, 1.0] [1.0,1.0]

step-start steps(1,start)

step-end steps(1,end)

cubic-bezier(x1,y1,x2,y2) [0, 0] [x1, y1] [x2, y2] [1.0,1.0]

4、其餘相關資料

canvas畫貝塞爾曲線：查看來源

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>bezier demo</title>
</head>
<body>
<div style="width:800px;height:600px;background-color:#fac0c0;">
<canvas id="cvs" width="800" height="600">騷瑞，您的瀏覽器不支持canvas</canvas>
</div>
<script type="text/javascript">
var cvs=document.getElementById("cvs"),
context=cvs.getContext("2d"),
points=[];
function getXY(node){
var x=0,
y=0;
if (node.offsetParent) {
while (node.offsetParent) {
x += node.offsetLeft;
y += node.offsetTop;
node = node.offsetParent;
}
}
else {
node.x && (x += node.x);
node.y && (y += node.y);
}
return [x,y];
}
function drawPoint(x,y,c,b) {
!b && (b=2);
context.fillStyle=c || "red";
context.fillRect(x,y,b,b);
}
function bezier(points,t){
var i,
n=points.length-1,
x=0,
y=0;
function fn(p,n,i,t){
return arrangement(n,i)*p*Math.pow(1-t,n-i)*Math.pow(t,i);
}
for(i=0;i<n+1;i++){
x+=fn(points[i][0],n,i,t);
y+=fn(points[i][1],n,i,t);
}
return [x,y];
}
function factorial(n){
if(isNaN(n) || n<=0 || Math.floor(n)!==n){
return 1;
}
var s=1;
while(n){
s*=n--;
}
return s;
}
function arrangement(n,r){
return factorial(n)/(factorial(r)*factorial(n-r));
}
cvs.addEventListener("click",function(event){
var i,
point=getXY(this),
x=event.clientX-point[0]+(document.documentElement.scrollLeft || document.body.scrollLeft),
y=event.clientY-point[1]+(document.documentElement.scrollTop || document.body.scrollTop);
points.push([x,y]);
context.clearRect(0,0,screen.width,screen.height);
context.beginPath();
//points
for(i=0;i<points.length;i++){
drawPoint(points[i][0],points[i][1],"blue",4);
}
//bezier
for (i = 0; i < 1; i += 0.001) {
drawPoint.apply(this, bezier(points,i));
}
//line
if(points.length==1){
context.moveTo(points[0][0],points[0][1]);
}else if (points.length>1){
for(i=0;i<points.length;i++){
context.lineTo(points[i][0],points[i][1]);
}
context.lineWidth=0.2;
context.stroke();
context.closePath();
}
},true);
</script>
</body>
</html>