關于animate的rate和speed理解
?我的理解是time是總的時間,分成很多段,rate是每段的時間,每個rate就移動speed的位移,
let?animate?=?setInterval(()?=>?{
????????????if?(?this.picBox.style.left?==?goal?||?Math.abs(Math.abs(parseFloat(this.picBox.style.left))?-?Math.abs(goal))?<?Math.abs(speed)?)?{
????????????????this.picBox.style.left?=?goal?+?"px"
????????????????clearInterval(animate)
???????????????
????????????}?else?{
????????????????this.picBox.style.left?=?parseFloat(this.picBox.style.left)?-?speed?+?"px"
????????????}
????????},?rate)
? ? ? ??
2021-05-18
animate(offset)?{????????//?定義切換時間為1000毫秒?1秒????????const?time?=?1000????????????//稍微移動為0.1秒????????const?rate?=?100????????????//計算移動距離????????let?speed?=?offset?/?(time?/?rate)????????????//?計算目標位置使用parseFloat去掉單位????????let?goal?=?parseFloat(this.picBox.style.left)?-?offset????????this.animated?=?true????????//判斷是否到達目標位置????????let?animate?=?setInterval(()?=>?{?//計算去掉單位的目標絕對值減去目標位置的絕對值小于移動距離的絕對值????????????if?(this.picBox.style.left?==?goal?||?Math.abs(Math.abs(parseFloat(this.picBox.style.left))?-?Math.abs(goal))?<?Math.abs(speed))?{????????????????this.picBox.style.left?==?goal????????????????clearInterval(animate)????????????????this.animated?=?false????????????????if?(parseFloat(this.picBox.style.left)?==?0)?{????????????????????this.picBox.style.left?=?-this.sliders?*?this.sliderWidth?+?"px"????????????????}?else?if?(parseFloat(this.picBox.style.left)?==?-(this.sliders?+?1)?*?this.sliderWidth)?{????????????????????this.picBox.style.left?=?-this.sliderWidth?+?"px"????????????????}????????????}?else?{????????????????//未到達目標位置繼續移動????????????????this.picBox.style.left?=?parseFloat(this.picBox.style.left)?-?speed?+?"px"????????????}????????},?rate)????}我的理解在注釋里和你的基本一致