摘要:使用了缓动函数,只需要通过当前动画消耗的时间,搭配其他定义的配置项,就可以计算出当前动画具体位置。此次解析就到这里结束,如有错误,请指出,感谢
本次解析将分为2篇文章,当前是第二篇,第一篇在这里
另外,为了能更好的理解这个库,个人写了一个此库的压缩版,实现了核心的功能(主要也是为了更好理解核心功能),内容更少方便阅读,
地址在这里
继续上一篇,先把结构图拉过来:
// anime主体 function anime(params){ // 定义instance 也是最终返回值 let instance = createNewInstance(params); // 外部API 从当前位置开始执行动画 instance.play = function() {} // 配置 startTime 和 engineTime(关键) instance.tick = function(t) {} // 对当前engineTime进行判断,确定动画方案(关键) function setInstanceProgress(engineTime) {} // 计算动画当前位置 并且赋值(关键) function setAnimationsProgress(insTime){} // 直接跳到参数time的时间所在的位置 instance.seek = function(time) {} // 外部API 暂停 instance.pause = function() {} // 外部API 反转 instance.reverse = function() {} // 外部API reset instance.reset = function() {} // 外部API 重新开始 instance.restart = function() {} /*...*/ return instance }
setAnimationsProgress(省略了一些配置的定义)
这个函数接受一个参数,就是当前位置所消耗时间(动画起始点),然后在里面计算出每一个动画目标的位置,并且赋值
// 计算动画当前位置 并且赋值 function setAnimationsProgress(insTime) { /* ... */ // 这个while逐个计算当前实例中的每个动画的当前位置(通过时间和算法) while (i < animationsLength) { /* ... */ // 消耗的时间占总持续时间的比例 在起点终点之间 const elapsed = minMaxValue(insTime - tween.start - tween.delay, 0, tween.duration) / tween.duration; // 通过算法计算当前进度 const eased = isNaN(elapsed) ? 1 : tween.easing(elapsed, tween.elasticity); /* ... */ // 遍历每一个到达点执行 for (let n = 0; n < toNumbersLength; n++) { let value; const toNumber = tween.to.numbers[n]; const fromNumber = tween.from.numbers[n]; if (!tween.isPath) { // 计算当前具体位置 value = fromNumber + (eased * (toNumber - fromNumber)); } else { // 进行SVG path计算 value = getPathProgress(tween.value, eased * toNumber); } /* ... */ numbers.push(value); } /* ... */ if (!isNaN(n)) { // 组合单位 "135.546"+"px" if (!b) { progress += n + " "; } else { progress += n + b; } } /* ... */ // 组合结果 "translateX("+"135.546px"+")` setTweenProgress[anim.type](animatable.target, anim.property, progress, transforms, animatable.id); anim.currentValue = progress; i++; } // 遍历结果,逐个target赋值 const transformsLength = Object.keys(transforms).length; if (transformsLength) { for (let id = 0; id < transformsLength; id++) { if (!transformString) { const t = "transform"; // 配置兼容性 transformString = (getCSSValue(document.body, t) ? t : `-webkit-${t}`); } // 设置style instance.animatables[id].target.style[transformString] = transforms[id].join(" "); } } // 记录当前位置所对应的时间 instance.currentTime = insTime; // 设置进度 instance.progress = (insTime / instance.duration) * 100; }
剩下的就是一些操作函数了:
instance.seek
// 直接跳到参数time的时间所在的位置 instance.seek = function(time) { setInstanceProgress(adjustTime(time)); }
instance.pause
// 外部API 暂停 instance.pause = function() { const i = activeInstances.indexOf(instance); // 删除activeInstances 后续engine中找不到便不会执行 if (i > -1) activeInstances.splice(i, 1); instance.paused = true; }
instance.reverse
// 外部API 反转 instance.reverse = function() { toggleInstanceDirection(); startTime = 0; lastTime = adjustTime(instance.currentTime); }
instance.restart
// 外部API 重新执行 instance.restart = function() { instance.pause(); instance.reset(); instance.play(); }
instance.reset
// 外部API reset instance.reset = function() { const direction = instance.direction; const loops = instance.loop; // 当前位置,进度 归零 instance.currentTime = 0; instance.progress = 0; instance.paused = true; instance.began = false; instance.completed = false; instance.reversed = direction === "reverse"; instance.remaining = direction === "alternate" && loops === 1 ? 2 : loops; setAnimationsProgress(0); for (let i = instance.children.length; i--; ){ instance.children[i].reset(); } }总结
使用了requestAnimateFrame和CSS动画提高流畅度。
使用了缓动函数,只需要通过当前动画消耗的时间,搭配其他定义的配置项,就可以计算出当前动画具体位置。
此次解析就到这里结束,如有错误,请指出,感谢!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/97745.html
摘要:初始位置结束位置和持续时间是作为参数传入配置的,因此计算已消耗时间就是完成动画的核心。下面就深入了解下它的核心。 本次解析将分为2篇文章,当前是第一篇,第二篇在这里 另外,为了能更好的理解这个库,个人写了一个此库的压缩版,实现了核心的功能(主要也是为了更好理解核心功能),内容更少方便阅读,地址在这里 介绍 anime一个JS轻量动画库,摒弃了常规的left,top属性,全面采用req...
摘要:超过的,是一个动画库,可以处理属性,单个转换,或任何属性以及对象。在,是一个快速的动画引擎,具有与的相同的。在,这个功能和反应动画库只重。由和其他人使用,这个库既流行又令人惊讶地有用。 在浏览网页寻找一个整洁的Javascript动画库时,我发现很多recommended的动画库一段时间都没有维护。 经过一些研究,我收集了11个最好的库,在你的应用程序中使用。我还添加了一些,主要是非维...
摘要:超过的,是一个动画库,可以处理属性,单个转换,或任何属性以及对象。在,是一个快速的动画引擎,具有与的相同的。在,这个功能和反应动画库只重。由和其他人使用,这个库既流行又令人惊讶地有用。 在浏览网页寻找一个整洁的Javascript动画库时,我发现很多recommended的动画库一段时间都没有维护。 经过一些研究,我收集了11个最好的库,在你的应用程序中使用。我还添加了一些,主要是非维...
摘要:超过的,是一个动画库,可以处理属性,单个转换,或任何属性以及对象。在,是一个快速的动画引擎,具有与的相同的。在,这个功能和反应动画库只重。由和其他人使用,这个库既流行又令人惊讶地有用。 在浏览网页寻找一个整洁的Javascript动画库时,我发现很多recommended的动画库一段时间都没有维护。 经过一些研究,我收集了11个最好的库,在你的应用程序中使用。我还添加了一些,主要是非维...
阅读 2500·2023-04-26 02:57
阅读 1389·2023-04-25 21:40
阅读 2122·2021-11-24 09:39
阅读 3504·2021-08-30 09:49
阅读 714·2019-08-30 15:54
阅读 1147·2019-08-30 15:52
阅读 2030·2019-08-30 15:44
阅读 1258·2019-08-28 18:27