用精灵图做动画的简单实现

最近工作中需要实现动画，react项目，总结一下精灵图的实现方式。

需求是6个动画U字形排序。鼠标进入悬浮就开始播放动画。之前做过类似的，把就代码拿过来改版了一下，实现起来也很快。这里做个笔记，以后工作中需要的时候就方便查阅了。

• 页面布局

<div className={styles.mainArea}>
{/* 6个动画U字型排序*}
{
[1,2,3,4,5,6].map(i => <Popover key={i} placement='right' title=(this.popoverTitle(i)} content={this.popovercontent(i)} trigger="hover">
‹div key={i}
    ref={(e) => { this[`dynamicImg_${i}`] = e;}}
    onMouseEnter={()=> this.moveInPic('',-1950,i,'')}
    onMouseOut={() =› this.moveOutPic('',0, i,'leave')}
    onClick={() => this.gotoRoutePage(i)}
    className= {`${styles[`posPoint${i}`]} ${styles.posPoint}`}></div></Popover>)
}
</div>

• css部分

.mainArea {
    //border: 1px solid red:
    background-image: url('../../assets/home/homebgm.png");
    width: 1240px;
    height: 696px;
    margin-top: 30px;
    position: relative:
    //以下动面u字型排序，6个动面
    .posPoint {
        cursor: pointer;
        height: 150px;
        width: 150px;
        border-radius: 30%;
        background-repeat:no-repeat; 
        background-size: auto 150px;
        background-position: 0 0;
    }
    .posPoint1 {
        // border: 1px solid blue;
        top: 160px;
        left: 275px;
        background-image: url('../../assets/home/accessDynPic.png");
     }
     .posPoint2 {
        // border: 1px solid blue;
        top: 248px;
        left: 444px;
        background-image: url('.../ ../assets/home/serviceDynPic.png');
     }
     ....
     //省略部分代码,省略的类似posPoint1
     .posPoint6 {...}

• js部分

moveInPic = (item, len = -1950, n, leave) => {
    clearInterval(this.timer_pic[n])
    let toleft = true
    let backgroundLen=Number(this[`dynamicImg_${n}`].style['backgroundPositionX'].replace(/px/,
''))
    this.timer_pic[n] = setInterval(() =› {
     let backgroundLen=Number(this[`dynamicImg_${n}`].style['backgroundPositionX'].replace(/px/,
    ''))

        //版本1播放一次
        if(backgroundLen › -1800) { 
            backgroundLen -= 150
            this[`dynamicImg_${n]`].style['backgroundPositionX'] = backgroundLen + 'px'
         }
        if (backgroundLen <= -1800)
            clearInterval(this.timer_pic[n])
            this.timer_ pictnp = mull
            if(leave) this[`dynamicImg_${n}`].style['backgroundPositionX'] ='0px'
         }

        //版本2无线循环播放
        // if (toLeft) {
        //    backgroundLen -= 150
        //    this[`dynamicImg_${n}`].style['backgroundPositionX']= backgroundLen + 'px'
        //    if(backgroundLen <= -1800) toLeft = false
        // }else{
        //    backgroundLen += 150
        //    this[`dynamicImg_${n}`].style['backgroundPositionX']= backgroundLen + 'px'
        //    if (backgroundLen ›= 0) toLeft = true
        //   }
    }, 100)
}

moveOutPic = (item, len = 0, n, leave) => {
//版本1播放一次
    clearInterval(this.timer_pic[n])
    this.timer_pic[n] = setInterval(() =› {
        let backgroundLen = Number(this[`dynamicImg_${n}`].style['backgroundPositionX'].replace(/px/,''))
        if (backgroundLen < len) {
            backgroundLen + 150
            this[`dynamicImg_${n}`].style['backgroundPositionX']= backgroundLen + 'px'
        } else {
            clearInterval (this.timer_pic[n])
            this.timer_pic[n] = null
            if(leave) this[`dynamicImg_${n}`].style['backgroundPositionX'] ='0px'
        }
    }, 50)

    //版本2无线循环播放,鼠标移走，立即暂停
    //clearInterval (this.timer_pic[n])
    // this[`dynamicImg_${n}`].style['backgroundPositionX'] ='0px'
}