原生js实现动画过渡效果

原生JS实现动画过渡效果原理

一般情况实现动画效果可以采用CSS3里的transition属性实现动画过渡。但如果有需求只能采用原生JS的情况下可以采用JS里的定时器功能。当然还有很多可以实现动画效果的方法。因为本人初步接触前端,实力不足这里只讲一下定时器的使用。
以固定的时间(极短)每次将CSS样式修改一点,达到视觉上的动画效果,使运动看起来不是特别生硬。

定时器使用

var timer = null;
    timer = setInterval(function() {
            pic.style.width = pic.offsetWidth + speed + "px";
        }
    }, time)

这里的pic可以是任意元素,speed则是单位时间pic宽度的变换量(速度),time是执行一次的时间。当time足够小时pic就会使宽度的变化以动画形式展现。

但是这种情况下pic的宽度会一直以speed的速度执行下去。我们需要加一个条件,当满足此条件时结束定时器

var timer = null;
 clearInterval(timer);
    timer = setInterval(function() {
        if (pic.style.width >= 150 + "px") {
            clearInterval(timer);
        } else {
            pic.style.width = pic1.offsetWidth + speed + "px";
        }
    }, time)

此时pic.style.width >= 150 + "px"就是定时器停止的条件。当图片宽度大于150px时,结束定时器。

注意

  • 执行语句和清除定时器的判断语句必须用if else语句连接。
  • 判断语句最好用 >= 而不是 == 因为在定时器执行时不一定能准确达到期望值。此时加上 >= 可以时定时器及时结束。

结语

以上就是我对原生JS里定时器的浅层认识,如有错误欢迎提出、讨论。

原生js实现动画过渡效果原生js实现动画过渡效果 HAG HUG 发布了2 篇原创文章 · 获赞 15 · 访问量 1102 私信 关注
上一篇:python基础--目录的操作


下一篇:idea2019配置,Javaweb项目实现上传图片保存到本地文件文件夹,Tomcat服务器