1.帧动画
先来看实际的效果
Video_2019-07-29_132517.gif
原图 ( 原图是一张高度为9000的2倍图 ):
image.png
什么是帧动画
其实就类似于电影中的胶片上的每一格,通过连续的一帧一帧的表现最终实现一个动画效果,而在cs3中,胶片就相当于是一张精灵图
使用帧动画的好处
既然都是动画,那为什么不直接使用GIF呢
第一种解决方案
GIF在交互上有致命的缺点,无法根据我们定义的事件去在规定的事件内完成我们想要达到的效果~,比如你想做点什么,那必须得等到动画结束
第二,在性能上GIF会引起页面周期性的绘画,性能较差
第二种解决方案
当然,其实还有其他的替代方案,就是通过更改 background-image的属性值,不断的切换图片,也能实现一帧一帧播放的效果
但是这种方式会向服务器发生多个HTTP请求,服务器压力大
那我们其实面临着2个问题,第一是动画如何交互,第二是减少图片的请求次数,减少服务器的压力
第三种解决方案
连续切换精灵图的背景位置,将动画所有需要的帧提前在精灵图上拼接好,并且精灵图只需要想HTTP发送一次请求,这样就解决了我们的第二个问题.我们先来看看css3具体是如何实现这种效果的
1.css实现方式
Video_2019-07-29_133143.gif
.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属性:
参数1:分几步执行
参数2:第一帧是动画结束(start) / 第一帧是动画开始(end)
一帧的高度是75px.所有100%的状态下y轴为-4500;
如果单单给cs3加上鼠标移入事件,通过移除和添加class类来实现鼠标移入和移除,会出现一个渲染的bug,类似于一个空白的顿闪,而且在动画中无法去控制交互的效果,于是就马上按照js的原理用JavaScript实现了一下
2.js实现交互
需求:
1,当鼠标移入的时候
2.当鼠标移出的时候
需求拆解:
1.每次切换背景图片的x轴位置为0
2.每次切换背景图片Y轴的位置为帧数 * 一帧高度
3.帧数 = 图片高度 / 一帧高度
Video_2019-07-29_132517.gif
效果展示
//每次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);
//每次定时器执行一次都让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"));
//每次定时器执行,都让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)
})