css3動畫實現------利用長圖片資源(jpg png 等)實現幀動畫
阿新 • • 發佈:2019-01-24
首先,公司專案內部裡實現利用許多張圖片(30多張圖片)製作成一個動畫,效果是滑鼠停留時實現img的自動轉化。
我的思路有2:
1.js 做mouseover事件觸發處理,利用setInteval()傳入function和週期隔離事件50ms,但是在實現了相關方法之後在本地可以跑通效果,在預釋出環境下出現了卡頓現象,難以出現相關的效果(js請求太多了)!!! 大佬說可以做一下限流實現,我還沒做過,轉戰方法二了,程式碼事例如下:
注:相當卡頓,炸裂卡頓!!var i = -1; var num = ""; var _interval; var icon_name; // js動畫效果 $(document).ready(function(){ $(".icon-dyn").mouseover(function () { icon_name=this.id; _interval=setInterval(function () { i++; if(i<10){ num ="0"+i; }else if(i<34){ num = i+""; }else{ i=-1; num="00"; } var img_addr= "css/i/dynamic_icons/"+ icon_name +"/"+icon_name+"_"+num+".png"; $("#"+icon_name).attr("src",img_addr); },50); }); $(".icon-dyn").mouseout(function () { icon_name=this.id; window.clearInterval(_interval); resetImg(); }); }); function resetImg() { $("#"+icon_name).attr("src", "css/i/dynamic_icons/"+ icon_name +"/"+icon_name+"_00.png"); }
2.css3實現多一個長圖片的讀取,background:url(#長圖片資源路徑#),對該層設定css3動畫效果,具體事例參考的是部落格中的做法 ----點選開啟連結。那麼下面整個步驟存在著以下問題:
2.1:製作長圖片(拼接問題)
大佬說可以用ps弄,自己弄了好久,對後端人感覺好難。。。所以找了段java程式碼實現圖片的拼接、剪輯功能的如下:
public static void mergeImage(String[] files, int type, String targetFile) { int len = files.length; if (len < 1) { throw new RuntimeException("圖片數量小於1"); } File[] src = new File[len]; BufferedImage[] images = new BufferedImage[len]; int[][] ImageArrays = new int[len][]; for (int i = 0; i < len; i++) { try { src[i] = new File(files[i]); images[i] = ImageIO.read(src[i]); } catch (Exception e) { throw new RuntimeException(e); } int width = images[i].getWidth(); int height = images[i].getHeight(); ImageArrays[i] = new int[width * height]; ImageArrays[i] = images[i].getRGB(0, 0, width, height, ImageArrays[i], 0, width); } int newHeight = 0; int newWidth = 0; for (int i = 0; i < images.length; i++) { // 橫向 if (type == 1) { newHeight = newHeight > images[i].getHeight() ? newHeight : images[i].getHeight(); newWidth += images[i].getWidth(); } else if (type == 2) {// 縱向 newWidth = newWidth > images[i].getWidth() ? newWidth : images[i].getWidth(); newHeight += images[i].getHeight(); } } if (type == 1 && newWidth < 1) { return; } if (type == 2 && newHeight < 1) { return; } // 生成新圖片 try { BufferedImage ImageNew = new BufferedImage(newWidth, newHeight, BufferedImage.TYPE_INT_RGB); int height_i = 0; int width_i = 0; for (int i = 0; i < images.length; i++) { if (type == 1) { ImageNew.setRGB(width_i, 0, images[i].getWidth(), newHeight, ImageArrays[i], 0, images[i].getWidth()); width_i += images[i].getWidth(); } else if (type == 2) { ImageNew.setRGB(0, height_i, newWidth, images[i].getHeight(), ImageArrays[i], 0, newWidth); height_i += images[i].getHeight(); } } //輸出想要的圖片 ImageIO.write(ImageNew,"png", new File(targetFile)); } catch (Exception e) { throw new RuntimeException(e); } }
注:如果給的是png檔案可能存在透明度問題,在使用程式碼進行拼接的時候可能存在著問題,(target圖片大小不變,但是裡面的rgb值也就是顏色變了),笨一點的話用畫圖轉jpg就會去掉那些透明度了~~~ 也可以用ps錄個動作~~~~:》
2.2background的坑
這裡面的樣例是採用的background引入圖片,但是往往這個父層存在著相關的子元素(就是圖片),而background的index是最低的,也就是所有的子元素往往是遮蓋在background上(悲劇)。。。目前我的方法是hover偽類選擇器下對子元素做出display:none操作~~~也不知道有沒有大神告知聰明一點的方法
2.3 動畫設計
div{
width:140px;
height:140px;
background: url(http://images2015.cnblogs.com/blog/754767/201606/754767-20160601000042992-1734972084.png) ;
animation:run 1s steps(1, start) infinite;
-webkit-animation:run 1s steps(1, start) infinite;
}
@keyframes run{
from{
background-position: 0 0;
}
to{
background-position: -1540px 0 ;
}
}
這是橫著放的長圖片(1540px *140px) 有可能還設定background-size:${寬} ${高}來設定圖片高度,那動畫也要設定對應的拖動長度~~