在前端开发中,提到动画,我们可以:
-
<李>直接利用DOM实现动画。
<李>利用帆布实现动画。
<李>利用svg实现动画。
<李>直接用一张gif动图。
<李>利用图片实现帧动画。
<李>…
所有动画的基本原理都是:在短时间内连续依次展示对应的图片,这样在视觉上看起来就是‘动’的了。本文主要来说一说第4点和5点第。
图片帧动画
当我们要实现的动画效果比较复杂,而且开发排期比较紧的情况下,用一张gif动图来实现动画是成本最低,效果也不错的一种方案。比如下面这种动画效果:
可是如果我们想让动效在某个时候暂停,隔一段时间后,再从断点开始继续播放动效,用gif图就实现不了了。<强> gif图的动效是没有办法暂停的强。这个时候,可以考虑采用图片帧动画。
图片帧动画可以看做是:把gif图的原理在前端用代码实现了一遍。
上面个那个动效,(假设)可以分成100帧,即100张图片,然后用代码控制100张图片依次显示,并且,可以随时在中途暂停。为了节省http请求,把100张图片合成一张雪碧图,然后用背景位置去控制显示哪一张图。推荐一个很不错的图片生成工具:GKA
我把100张图片生成了一个竖直的雪碧图。
在代码里,只需要更新DOM元素的背景位置即可实现动画。
首先第一个点需要注意:背景位置设置的是<强>背景图片相对于DOM元素强劲的起始位置。
假设DOM元素和图片宽高都是100 * 200
<代码>专门建立的学习Q-q-u-n⑦⑧④-⑦⑧③——零①②分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
推荐- - - - - - css
#包装{
宽度:100 px;
身高:200 px;
背景图片:url(“雪碧图中将“);
background-size: 100% - 10000%;//有100张图100 * 100
平铺方式:不再重演;
}
推荐- - - - - - js
var domEl=document.querySelector(#包装);
var n;//n:显示雪碧图中第几张图片,n祝辞=0,,n<100
domEl.style。backgroundPosition=' 0 px $ {n * 200} px”;//注意这里是负值
我们只需要用js控制n的值就行,就可以很容易实现<强>随时执行,暂停动效。
上面的例子中,dom元素宽高是固定的,如果不固定,想要自适应的话,需要根据图片宽高比,通过padding-top来设置dom元素的宽高比。这个时候,在背景位置中,也无法使用具体的数值了,需要使用百分比。这里有一个需要注意的地方:
背景位置百分比取值时,很自然的以为是直接用背景图片宽高乘以百分比即可得到最终偏移量,但其实不是的。计算公式如下:
<代码> x偏移量=(元素宽度——背景图片的宽度)* x百分比 y偏移量=(元素高度——背景图片的高度)* y百分比
换算一下:
<代码> x百分比=x偏移量/(元素宽度——背景图片宽度) y百分比=y偏移量/(元素高度——背景图片高度)
具体到上面的例子中,就是:
<代码>//假设每一张小图片宽度为w,高度为h,当前需要展示第n张图片,一共有100张图,则
var xPercent=0;
var yPercent=hn,/(h - 100 h) * 100=n/99 * 100;
domEl.style。backgroundPosition=" $ {xPercent} % $ {yPercent} % ';
最终,我们就能实现图片帧动画了。当然,如果不需要完全控制动画效果,可以不借助js,直接用css即可。或者直接用gif动图就好。
css曲线运动
曲线运动,使用svg,画布是很不错的选择。但是在对曲线的路径不那么严格要求的时候,使用svg和帆布或许略微麻烦了。可以直接用css来实现一个”看起来是曲线”的运动。
以类似抛物线的一个运动为例,大概是一个这样的效果:
位移曲线上某点的切线就是速度,而速度可以分解成x轴的速度和y轴的速度。也就是说,上面的运动可以分解成水平方向x轴的运动和竖直方向y轴的运动。从感官上,不难看出,x轴的运动大概是匀速的,而y轴的运动是越来越快的。
