anime.js图⽚位移动画_CSS实现图⽚帧动画与曲线运动⼦瑜说IT 2019-09-24 01:15:00
在前端开发中，提到动画，我们可以：
1. 直接利⽤DOM实现动画。
2. 利⽤canvas实现动画。
3. 利⽤svg实现动画。
4. 直接⽤⼀张gif动图。
5. 利⽤图⽚实现帧动画。
6. ...
图所有动画的基本原理都是：在短时间内连续依次展⽰对应的图⽚，这样在视觉上看起来就是'动'的了。本⽂主要来说⼀说第4点和第5点。图⽚帧动画
当我们要实现的动画效果⽐较复杂，⽽且开发排期⽐较紧的情况下，⽤⼀张gif动图来实现动画是成本最低，效果也不错的⼀种⽅案。⽐如下⾯这种动画效果：
可是如果我们想让动效在某个时候暂停，隔⼀段时间后，再从断点开始继续播放动效，⽤gif图就实现不了了。gif图的动效是没有办法暂
gif图的动效是没有办法暂停的。这个时候，可以考虑采⽤图⽚帧动画。
停的
svg和canvas的区别图⽚帧动画可以看做是：把gif图的原理在前端⽤代码实现了⼀遍。
上⾯个那个动效，(假设)可以分成100帧，即100张图⽚，然后⽤代码控制100张图⽚依次显⽰。并且，可以随时在中途暂停。为了节省http请求，把100张图⽚合成⼀张雪碧图，然后⽤background-position去控制显⽰哪⼀张图。推荐⼀个很不错的图⽚⽣成⼯具：GKA
我把100张图⽚⽣成了⼀个竖直的雪碧图。
在代码⾥，只需要更新DOM元素的background-position即可实现动画。
背景图⽚相对于DOM元素的起始位置。
⾸先第⼀个点需要注意：background-position设置的是背景图⽚相对于DOM元素
假设DOM元素和图⽚宽⾼都是 100 * 200
--- css
#wrapper {
width: 100px;
height: 200px;
background-image: url('雪碧图.png');
background-size: 100% 10000%; // 有100张图， 100*100
background-repeat: no-repeat;
}
--- js
var domEl = document.querySelector('#wrapper');
var n; // n：显⽰雪碧图中第⼏张图⽚，n >=0 && n<100
domEl.style.backgroundPosition = `0px ${-n*200}px`; // 注意这⾥是负值
随时执⾏、暂停动效。
我们只需要⽤js控制n的值就⾏，就可以很容易实现随时执⾏、暂停动效
上⾯的例⼦中，dom元素宽⾼是固定的，如果不固定、想要⾃适应的话，需要根据图⽚宽⾼⽐，通过padding-top来设置dom元素的宽⾼⽐。这个时候，在background-position中，也⽆法使⽤具体的数值了，需要使⽤百分⽐。这⾥有⼀个需要注意的地⽅：
background-position百分⽐取值时，很⾃然的以为是直接⽤背景图⽚宽⾼乘以百分⽐即可得到最终偏移量，但其实不是的。计算公式如下：
x偏移量 = (元素宽度—背景图⽚的宽度)*x百分⽐
y偏移量 = (元素⾼度—背景图⽚的⾼度)*y百分⽐
换算⼀下：
x百分⽐ = x偏移量 / (元素宽度 - 背景图⽚宽度)
y百分⽐ = y偏移量 / (元素⾼度 - 背景图⽚⾼度)
具体到上⾯的例⼦中，就是：
// 假设每⼀张⼩图⽚宽度为w, ⾼度为h, 当前需要展⽰第n张图⽚，⼀共有100张图，则
var xPercent = 0;
var yPercent = -hn / (h - 100h) * 100 = n / 99 * 100;
domEl.style.backgroundPosition = `${xPercent}% ${yPercent}%`;
css 最终，我们就能实现图⽚帧动画了。当然，如果不需要完全控制动画效果，可以不借助js，直接⽤css即可。或者直接⽤gif动图就好。css 曲线运动
曲线运动，使⽤svg，canvas是很不错的选择。但是在对曲线的路径不那么严格要求的时候，使⽤svg和canvas或许略微⿇烦了。可以直接⽤css来实现⼀个『看起来是曲线』的运动。
以类似抛物线的⼀个运动为例，⼤概是⼀个这样的效果：
位移曲线上某点的切线就是速度，⽽速度可以分解成x轴的速度和y轴的速度。也就是说，上⾯的运动可以分解成⽔平⽅向x轴的运动和竖直⽅向y轴的运动。从感官上，不难看出，x轴的运动⼤概是匀速的，⽽y轴的运动是越来越快的。
另外，由于运动分解成了两个⽅向的运动，需要两个DOM，分别写动画，才能实现最终的效果。
--- html
<div class='x-container'>
<div class='y-container'></div>
</div>
--- css
.x-container {
width: 50px;
height: 50px;
animation: xMove 2s linear;
}
.y-container {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #000;
animation: yMove 2s cubic-bezier(.98,.03,.91,.77);
}
@keyframes xMove {
0% {
}
100% {
transform: translateX(400px);
}
}
@keyframes yMove {
0% {
}
100% {
transform: translateY(400px);
}
}
两个⽅向的运动合起来，就是上⾯的效果了。
写在后⾯
想要实现⼀个不那么严格的曲线运动，直接使⽤css animation，也是⼀个不错的选择。写在后⾯
本⽂总结了依赖css实现图⽚帧动画和曲线运动的实例。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论