国外网站做盗版,做网编去网站还是工作室好,北京建网站的价格,网页怎么截图文章目录 需求分析确定参数确定属性值具体实现简单扩展 需求分析
在 css 中#xff0c;如果要给一个元素设置动画#xff0c;就要改变一个css属性#xff0c;也是一个值到另外一个值的变化#xff0c;但是放入到我们这里的动画函数里面#xff0c;我是不知道是具体要用到… 文章目录 需求分析确定参数确定属性值具体实现简单扩展 需求分析
在 css 中如果要给一个元素设置动画就要改变一个css属性也是一个值到另外一个值的变化但是放入到我们这里的动画函数里面我是不知道是具体要用到那个元素上的所以只能是计算一个数据值到另一个数据值的变化什么变化呢比如在多少时间内1-100变化的频率等等所以我们只要能实现这些就好了
确定参数
一段时间内一个值到另外一个值首先就要知道这个一段时间有多长还需要知道在这个值变化的过程中例如 1-10,5s的时间变化的步进值比如每次前进0.1还是0.5所以还需要一个间隔时间。比如500ms变化一次那么每次的步进的就是10/(10000ms/500ms)每次前进 0.5前进 20 次基于此我们就确定了四个参数起始值、结束值、总时间、间隔时间那么这个是不是完成了呢不然我每次改变的值总需要使用吧这个使用方式是多种多样的只能交给使用者来决定而适合这种灵活的场景只有是函数了所以还需要一个参数回调函数这个回调函数的执行时机是每次间隔时间后调用一次调用多少次取决于传递的参数
确定属性值 我们还需要那些属性呢 首先就是计时器的idtimer然后运动的总次数count当前的运动次数curCount当前值curValue 所以我们现在可以写出一个大概的函数模型如下 function animationFunc({ begin, end, interval 16, total 3000, callback }) {let timer null // 接收定时器IDlet count Math.ceil(total / interval) // 运动次数【向上取整】let step Math.abs((end - begin)) / count // 每次运动的步长let current begin // 当前的位置let currentCount 0 // 当前运动次数timer setInterval(() {// 如果存在回调函数就调用-并传递当前值callback callback(current)}, interval)
}具体实现 其实到现在我们的这个插件已经实现的差不多了只是缺少一些值的计算和停止条件 每次执行后次数1当前值 当前值 每次运动的步长如果当前次数大于或者等于总次数就停止执行如下 function animationFunc({ begin, end, interval 16, total 3000, callback }) {let timer nulllet count Math.ceil(total / interval)let step Math.abs(end - begin) / countlet curValue beginlet currentCount 0timer setInterval(() {// 改变当前值curValue step// 次数1currentCount// 如果当前次数大于或者等于总次数就停止执行if (currentCount count) {// 动画结束callback callback(curValue)clearInterval(timer)timer nullreturn}callback callback(curValue)}, interval)
}那我们具体使用看一下html 中写了一个使用绝对定位固定的 div如下 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box {position: absolute;left: 0;top: 20px;background-color: skyblue;width: 100px;height: 100px;}/style
/headbodydiv classbox/divscript src./index.js/script
/body/html看看使用代码如下 const box document.querySelector(.box)// 动画函数
function animationFunc({ begin, end, interval 16, total 3000, callback }) {let timer nulllet count Math.ceil(total / interval)let step Math.abs(end - begin) / countlet curValue beginlet currentCount 0timer setInterval(() {curValue stepcurrentCountif (currentCount count) {callback callback(curValue)clearInterval(timer)timer nullreturn}callback callback(curValue)}, interval)
}box.onclick function () {animationFunc({begin: 0,end: 500,callback: curValue {box.style.left curValue px}})
}执行效果如图 当然经过 gif 的转换和录屏本身的原因会存在不小的抖动
简单扩展 上述我们已经实现了这个动画的函数而且由于具体实现的业务不为动画函数本身决定大大增加了灵活程度但是业务总是千奇百怪的比如我可能是希望能在动画执行开始和完成的时机调用一个方法告诉我动画函数执行完成了此时我们可以多加两个参数 onBegin、onFinish同时为了具备的更加语义化 callback 改为 onChange如下 const box document.querySelector(.box)// 动画函数
function animationFunc({ begin, end, interval 16, total 3000, onChange, onBegin, onFinish }) {// 执行的时候调用一次 onBeginonBegin onBegin()let timer nulllet count Math.ceil(total / interval)let step Math.abs(end - begin) / countlet curValue beginlet currentCount 0timer setInterval(() {curValue stepcurrentCountif (currentCount count) {// 执行完成后调用 onFinishonFinish onFinish()onChange onChange(curValue)clearInterval(timer)timer nullreturn}onChange onChange(curValue)}, interval)
}box.onclick function () {animationFunc({begin: 0,end: 500,onChange: curValue {box.style.left curValue px},onBegin: () {box.innerHTML 开始执行动画},onFinish: () {box.innerHTML 动画执行完成}})
}效果如图 至于具体需要利用这两个时机完成什么或者做点什么就看各自的业务需求了还可以根据你自己的需求作出更多扩展比如传递多个起始值可以执行多组动画 当然考虑严谨性可以考虑多写一些参数的类型判断或者当前的值如果大于了结束值就赋值为结束值如下 function isFunction(value) {// 为空表示未使用则默认返回 trueif (value null || value undefined) return truereturn typeof value function
}// 动画函数
function animationFunc({ begin, end, interval 16, total 3000, onChange, onBegin, onFinish }) {if (!isFunction(onBegin)) {throw new Error(onBegin 必须是函数)}if (!isFunction(onFinish)) {throw new Error(onFinish 必须是函数)}if (!isFunction(onChange)) {throw new Error(onChange 必须是函数)}if (begin undefined || begin null) {throw new Error(begin 必须有值)}if (end undefined || end null) {throw new Error(end 必须有值)}onBegin onBegin()let timer nulllet count Math.ceil(total / interval)let step Math.abs(end - begin) / countlet curValue beginlet currentCount 0timer setInterval(() {curValue stepcurrentCountif (curValue end) curValue endif (currentCount count) {onFinish onFinish()onChange onChange(curValue)clearInterval(timer)timer nullreturn}onChange onChange(curValue)}, interval)
}
