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

  • 相关阅读:
    数据库连接池、事务
    JDBC、单元测试、DAO模式
    归并排序
    插入排序
    MySQL数据库
    JQuery
    JavaScript
    算法训练 连续正整数的和
    算法提高 寻找三位数
    算法训练 学做菜
  • 原文地址:https://www.cnblogs.com/yangyangae86/p/5795667.html
Copyright © 2011-2022 走看看