zoukankan      html  css  js  c++  java
  • 缓动动画的原理

    1,我们用JavaScript原生来实现缓动动画的效果,这个是缓动动画的原理

    //获取元素样式计算后的值
    function getStyle(element, attr) {
    return element.currentStyle ? element.currentStyle[attr] : window.getComputedStyle(element, null)[attr];
    }
    
    //animate动画包含三个参数  1.对象  2元素属性和值对象(写属性和值)3回调函数动画
    function animate(element, json,fn) {
    clearInterval(element.timeId);
    element.timeId = setInterval(function () {
    var flag=true;
    for (var attr in json) {
    if(attr=="opacity"){//关于透明度改变
    var current = getStyle(element, attr)*100;
    var target=json[attr]*100;
    //每次移动的步数
    var step = (target - current) / 10;
    //每次移动步数都是整数(比较大的数字)
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    current += step;//移动后的当前的像素
    element.style[attr] = current/100;
    }else if(attr=="zIndex"){关于层级改变
    element.style[attr]=json[attr];
    }else{
    var current = parseInt(getStyle(element, attr));
    var target=json[attr];
    //每次移动的步数
    var step = (target - current) / 10;
    //每次移动步数都是整数(比较大的数字)
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    current += step;//移动后的当前的像素
    element.style[attr] = current + "px";
    }
    if (current != target) {//到达目标后停止计时器
    flag=false;
    }
    }
    if(flag){
    clearInterval(element.timeId);//清理计时器
    if(fn){
    fn();
    }
    }
    }, 20);
    }

    希望大家都可以了解一下~~~~

  • 相关阅读:
    java实现 n人过桥问题
    git:rebase的原理
    注解@ConfigurationProperties使用方法
    docker+mysql 更改配置后重启不了的解决方案
    docker+mysql 构建数据库的主从复制
    Linux 踩坑记
    OSS上传图片无法在线预览的解决方案
    Linux中du、df显示不一致问题
    zookeeper作配置中心(存储支付信息)
    @Configuration结合@Bean实现对象的配置
  • 原文地址:https://www.cnblogs.com/luozhixiang/p/6648276.html
Copyright © 2011-2022 走看看