zoukankan      html  css  js  c++  java
  • 关于用js写缓动 动画

    关于制作简单的缓动动画,动画和dom是js的两大弱项,但是有时候又不得不用js所以下面做一个js的简单封装函数;

    首先解释缓动的思想:

    若target是目标距离,step为步长,object是对象,

    var step=(target-object.offsetLeft)/10;

    我们拿盒子的距离-目标对象的左偏移量;

    object.style.left = 盒子本身的位置  +  步长;

    当然不要忘记取整;

    一般在计算距离通常无小数

    step=step>0 ? Math.ceil(step):Math.floor(step);

    最后在开始和结束时不要忘记清除计时器;

    clearInterval(object.timer);

    下面看一下封装好的代码:

    function animate(object,target){ //object要动的对象 target 要动的距离
    clearInterval(timer);//清楚定时
    object.timer=setInterval(function(){
    // 计算步长 动画的原理 盒子本身的位置 + 步长
    var step=(target-object.offsetLeft)/10;
    //对步长取整;
    step=step>0 ? Math.ceil(step):Math.floor(step);
    // object.style.left = 盒子本身的位置 + 步长;
    object.style.left=object.offsetLeft+step+"px";
    //判断是否达到目标点
    if(object.offsetLeft==target) {
    clearInterval(object.timer);
    //清除定时
    }
    },20)//20定时器的时间,执行多久;
    }

  • 相关阅读:
    芯片产品介绍
    稀疏矩阵理论与实践
    EUV极紫外光刻技术
    国内AI与芯片企业列表
    中国软件外包现状对比
    GPU指令集技术分析
    寒武纪智能系统参数
    TVM量化路线图roadmap
    EUV光刻机市场与技术
    轻松部署 .NET 5 应用程序,这个指南一定不要错过
  • 原文地址:https://www.cnblogs.com/yangyangae86/p/5795667.html
Copyright © 2011-2022 走看看