css3动画实现------利⽤长图⽚资源（jpgpng等）实现帧动画⾸先，公司项⽬内部⾥实现利⽤许多张图⽚（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];
js控制css3动画触发
int[][] ImageArrays = new int[len][];
for (int i = 0; i < len; i++) {
try {
src[i] = new File(files[i]);
images[i] = ad(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(images2015blogs/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：${宽} ${⾼}来设置图⽚⾼度，那动画也要设置对应的拖动长度~~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。