前端動畫基礎

時間 2019-11-07

標籤前端動畫基礎简体版

原文原文鏈接

動畫基礎

css3動畫

知識點:javascript

animation屬性

animation 屬性是一個簡寫屬性，用於設置六個動畫屬性：css

值	描述
animation-name	規定須要綁定到選擇器的 keyframe 名稱。。
animation-duration	規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function	規定動畫的速度曲線。
animation-delay	規定在動畫開始以前的延遲。
animation-iteration-count	規定動畫應該播放的次數。
animation-direction	規定是否應該輪流反向播放動畫。

註釋: 請始終規定 animation-duration 屬性，不然時長爲 0，就不會播放動畫了。html

經常使用幾個屬性的值:vue

animation-timing-function 規定動畫的速度曲線。java

值	描述
linear	動畫從頭至尾的速度是相同的。
ease	默認。動畫以低速開始，而後加快，在結束前變慢。
ease-in	動畫以低速開始。
ease-out	動畫以低速結束。
ease-in-out	動畫以低速開始和結束。

animation-direction 規定是否應該輪流反向播放動畫。css3

normal	默認值。動畫應該正常播放。
alternate	動畫應該輪流反向播放。

案例:幽靈小貓web

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>動畫transform:translate()性能最佳</title>
  <style> .move{ position: absolute; top: 0; left: 100px; width:300px; height:300px; animation: demo1 10s linear infinite alternate;//10s完成 速度一致 無數次 反向播放 text-align: center; line-height: 300px; color:white; font-size: 2em; } @keyframes demo1{ from{ transform: translateX(0); } to{ transform: translateX(900px); } 0%{background-color: yellow;} 50%{background-color: green;} 100%{background-color:orange;} } </style>
    
 </head>
 <body>
    <div class="move">我是幽靈小貓菜小彬</div>
 </body>
</html>

複製代碼

transtion屬性

transition 屬性是一個簡寫屬性，用於設置四個過渡屬性：css3動畫

默認:all 0 ease 0異步

值	描述
transition-property	規定設置過渡效果的 CSS 屬性的名稱。
transition-duration	規定完成過渡效果須要多少秒或毫秒。
transition-timing-function	規定速度效果的速度曲線。
transition-delay	定義過渡效果什麼時候開始。

transition-timing-function的值能夠參考animation函數

案例:鼠標觸碰移動,移開回收

<!DOCTYPE html>
<html>
<head>
<style> div { width:100px; height:100px; background:blue; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ } div:hover { width:300px; } </style>
</head>
<body>
<div></div>
</body>
</html>
//這種寫法是針對單個屬性,下面介紹習慣寫法,針對全部屬性,選擇哪一種取決於需求
複製代碼

div
{
	width:100px;
	height:100px;
	background:blue;	
	transition:all 2s;
}
div:hover{
	transform:scal(1.1,.1);
}
複製代碼

javascript

知識點:

1.相對位置偏移量

一個元素在頁面中實現移動,即在一段時間內持續改變本身相對頁面的位置便能顯示動畫的效果

關於偏移量

該元素要設置position屬性
top,left屬性能夠設置偏移量
offsetLeft,offsetTop屬性能夠設置偏移量

2.obj.offsetwidth與obj.style.width的區別

obj.offsetwidth只讀屬性,不可賦值,結果爲一個純數字
obj.style.width使用的前提是元素標籤內聯有的style樣式且width屬性存在的狀況,可讀能夠賦值

<!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" xml:lang="zh">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>Document</title>
</head>
<style> *{ padding: 0; margin: 0; } div{ width: 400px; height: 400px; padding: 10px; border: 10px solid #ccc; margin: 20px; background-color: yellow; } </style>
<body>
	<div ></div>
	<script> var box=document.querySelector("div"); box.offsetWidth=300;//不能賦值 console.log(box.offsetWidth);//440,一個純數字不帶單位 console.log(box.style.width);//沒有內聯style且width屬性不存在,沒法讀取 var a=500 box.style.width=a+"px";//能夠賦值,注意賦值的形式 // box.style.width=600+"px";//能夠賦值,注意賦值的形式 // box.style.width="700px";//能夠賦值,注意賦值的形式 console.log(box.style.width);//賦值成功,能夠讀取,結果500px </script>
</body>
</html>
複製代碼

3.定時器setIntervel()

var tag=setInterval(function(){ alert("Hello"); }, 3000);//每3000毫秒執行一次函數
console.log(tag);//1,返回一個 ID（數字），能夠將這個ID傳遞給clearInterval()，clearTimeout() 以取消執行。

複製代碼

注意:

定時器函數在vue代碼裏,function(){}匿名函數要用()=>{}函數來代替,不然this並不會指向vue對象
定時器函數是一個異步函數,在使用時要解決一個問題就是,每次觸發定時器還可能存在上一個定時器在排隊執行任務,這就會致使動畫效果愈來愈快,因此每次觸發定時器時,必須先清除以前已經存在的定時器,再重新開始

案例:點擊開始按鈕,盒子向右移動400px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> *{ padding: 0;margin: 0; } #dv{ width: 200px; height: 200px; background-color: pink; position: relative; } </style>
</head>

<body>
    <input type="button" value="開始" id="btn">
    <div id="dv"></div>
    <script> var btn=document.getElementById("btn"); var dv=document.getElementById("dv"); btn.onclick=function(){ if(btn.timeId){//自定義屬性,十分高妙,若是存在結果爲1,不然在對象btn中加入該屬性 clearInterval(btn.timeId); } btn.timeId=setInterval(function(){ var target=400; step=17;//每次走增長的距離 var back=Math.abs(dv.offsetLeft-target);//若最後的左邊的距離超出目標值,須要返回的距離 //console.log(dv.offsetLeft);//打印當前距離左邊的距離 //console.log(Math.abs(dv.offsetLeft-target));//判斷是超過目標值仍是沒有超過 if(dv.offsetLeft<target){ dv.style.left= dv.offsetLeft+step+"px";//這裏不使用dv.style.left運算是由於返回值帶有單位須要轉化 console.log(dv.style.left); }else{ clearInterval(btn.timeId); dv.style.left= dv.offsetLeft-back+"px";//或者直接:dv.style.left= target+"px"; //console.log(dv.style.left); } },30)//時間設小點,不然連續點擊會有視覺殘留 } </script>
</body>

</html>
複製代碼

參考資料: W3C css3 動畫屬性

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。