1.幀動畫
先來看實際的效果
原圖 ( 原圖是一張高度為9000的2倍圖 ):
什么是幀動畫
其實就類似于電影中的膠片上的每一格,通過連續(xù)的一幀一幀的表現(xiàn)最終實現(xiàn)一個動畫效果,而在cs3中,膠片就相當于是一張精靈圖
使用幀動畫的好處
既然都是動畫,那為什么不直接使用GIF呢
第一種解決方案
GIF在交互上有致命的缺點,無法根據(jù)我們定義的事件去在規(guī)定的事件內完成我們想要達到的效果~,比如你想做點什么,那必須得等到動畫結束
第二,在性能上GIF會引起頁面周期性的繪畫,性能較差
第二種解決方案
當然,其實還有其他的替代方案,就是通過更改 background-image的屬性值,不斷的切換圖片,也能實現(xiàn)一幀一幀播放的效果
但是這種方式會向服務器發(fā)生多個HTTP請求,服務器壓力大
那我們其實面臨著2個問題,第一是動畫如何交互,第二是減少圖片的請求次數(shù),減少服務器的壓力
第三種解決方案
連續(xù)切換精靈圖的背景位置,將動畫所有需要的幀提前在精靈圖上拼接好,并且精靈圖只需要想HTTP發(fā)送一次請求,這樣就解決了我們的第二個問題.我們先來看看css3具體是如何實現(xiàn)這種效果的
1.css實現(xiàn)方式
.boxA {
width: 75px;
/*寬高尺寸任意增減*/
height: 75px;
position: absolute;
background: url("./images/20-2.jpg") no-repeat;
background-size: 100%;
animation: run steps(60,end) 1s infinite ;
}
@keyframes run {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -4500px;
}
}
steps屬性:
參數(shù)1:分幾步執(zhí)行
參數(shù)2:第一幀是動畫結束(start) / 第一幀是動畫開始(end)
一幀的高度是75px.所有100%的狀態(tài)下y軸為-4500;
如果單單給cs3加上鼠標移入事件,通過移除和添加class類來實現(xiàn)鼠標移入和移除,會出現(xiàn)一個渲染的bug,類似于一個空白的頓閃,而且在動畫中無法去控制交互的效果,于是就馬上按照js的原理用JavaScript實現(xiàn)了一下
2.js實現(xiàn)交互
需求:
1,當鼠標移入的時候
2.當鼠標移出的時候
需求拆解:
1.每次切換背景圖片的x軸位置為0
2.每次切換背景圖片Y軸的位置為幀數(shù) * 一幀高度
3.幀數(shù) = 圖片高度 / 一幀高度
效果展示
//每次y運動的坐標(正方向)
var num = 0;
//每次y運動的坐標(反方向)
var nums = 0;
//當前y的坐標
var y = 0;
//正反定時器
var timid = null;
var timids = null;
?
//鼠標移入
$(".service_body ul li i").mouseenter(function () {
if(timids){
clearInterval(timids);
}
nums = 0;
var that = $(this);
//每次定時器執(zhí)行一次都讓y的坐標減去一幀的高度150,移入的動畫
timid = setInterval(function () {
that.css("backgroundPositionX", 0);
that.css("backgroundPositionY", (-150 + num));
num -= 150;
//如果到達最小高度,就把定時器清零
if (parseInt(that.css("backgroundPositionY")) == -4350) {
clearInterval(timid)
timid = 'null'
num = 0;
}
}, 20);
})
//鼠標移出
$(".service_body ul li i").mouseleave(function () {
if(timid){
clearInterval(timid);
}
num = 0;
var that = $(this);
//接收鼠標移除時當前y的坐標
var y = parseInt(that.css("backgroundPositionY"));
//每次定時器執(zhí)行,都讓y加150,反方向動畫,移出的動畫
timids = setInterval(function () {
that.css("backgroundPositionX", 0);
that.css("backgroundPositionY", (y + nums));
nums += 150;
//如果到達最大高度,就把定時器清零
if (Math.abs(parseInt(that.css("backgroundPositionY"))) == 0) {
clearInterval(timids)
timids = 'null'
nums = 0;
}
}, 20)
})
