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定时器的时间,执行多久;
    }

  • 相关阅读:
    磁盘映射命令
    CentOS 配置XWIN/VNC
    生成一个随机数,让用户输入猜这个数字,有三次机会
    自己练习读取写入txt
    python学习笔记:文件操作和集合(转)
    接口测试基础
    nginx_tomcat负载均衡环境
    mysql索引
    shell脚本
    linux基础知识(四)
  • 原文地址:https://www.cnblogs.com/yangyangae86/p/5795667.html
Copyright © 2011-2022 走看看