function animate(obj, json){

clearInterval(obj.timer);
obj.timer=setInterval(function(){
var flag = true;
for(var k in json){
var target = json[k];
// leader = 当前元素的属性值
var leader =parseInt(getStyle(obj,k));
// 缓动公式step =(target - leader)/10 leader = leader + step;
var step =(target - leader)/10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
// 赋值给元素
obj.style[k] = leader +"px";
if(leader != target){
flag = false;
}
}
if(flag){
clearInterval(obj.timer);
}
},20)
}
// 获取样式的方法 元素 属性
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return window.getComputedStyle(obj, null)[attr];
}
};

缓动动画(json)的更多相关文章

  1. JS-特效 ~ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle(ele,attr) ;、缓动动画封装

    知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top  : if (true === a)tr ...

  2. jQuery-1.9.1源码分析系列(十五) 动画处理——缓动动画核心Tween

    在jQuery内部函数Animation中调用到了createTweens()来创建缓动动画组,创建完成后的结果为: 可以看到上面的缓动动画组有四个原子动画组成.每一个原子动画的信息都包含在里面了. ...

  3. 背水一战 Windows 10 (15) - 动画: 缓动动画

    [源码下载] 背水一战 Windows 10 (15) - 动画: 缓动动画 作者:webabcd 介绍背水一战 Windows 10 之 动画 缓动动画 - easing 示例演示缓动(easing ...

  4. WPF界面设计技巧(7)—模拟电梯升降的缓动动画

    原文:WPF界面设计技巧(7)-模拟电梯升降的缓动动画 如同Flash一样,WPF的亮点之一也在于其擅于表现平滑的动画效果,但以移动动画来说,仅凭简单的起始位置.目标位置,所产生的动画仍会非常生硬,这 ...

  5. Windows Phone开发(42):缓动动画

    原文:Windows Phone开发(42):缓动动画 前面在讨论关键帧动画的时候,我有意把几个带缓动动画的关键帧动画忽略掉,如EasingColorKeyFrame.EasingDoubleKeyF ...

  6. 重新想象 Windows 8 Store Apps (19) - 动画: 线性动画, 关键帧动画, 缓动动画

    原文:重新想象 Windows 8 Store Apps (19) - 动画: 线性动画, 关键帧动画, 缓动动画 [源码下载] 重新想象 Windows 8 Store Apps (19) - 动画 ...

  7. JS基础知识——缓动动画

    基于距离的缓动动画 原理:设定起始位置  start 和终止位置 end,变化会越来越慢. 公式:start=start+(end-start)/10;     这个10不是固定的,想分成多少份就分成 ...

  8. js简单动画:匀速动画、缓动动画、多物体动画以及透明度动画

    主要实现以下几种简单的动画效果(其实原理基本相同): 1.匀速动画:物体的速度固定 2.缓动动画:物体速度逐渐变慢 3.多物体动画 4.透明度动画 效果实现: 1.匀速动画(以物体左右匀速运动为例) ...

  9. js off 缓动动画

    动画也有很多种,一起来学习,缓动动画吧 缓动动画 1.缓动动画原理=盒子位置+(目标盒子位置-现在盒子位置)/10 2.步长越来越小 3.让步长越来越小的公式      步长=(目标位置-本身位置)/ ...

随机推荐

  1. Oracle数据库------体系结构

    ORACLE体系结构包括:实例(Instance),数据库文件,用户进程(User process),服务器进程以及其他文件. 1.ORACLE实例(instance)     1).要访问数据库必须 ...

  2. Caffe代码分析--crop_layer.cu

    因为要修改Caffe crop layer GPU部分的代码,现将自己对这部分GPU代码的理解总结一下,请大家多多指教! crop layer完成的功能(以matlab的方式表示):A(N,C,H,W ...

  3. Nodejs-express 4.0框架 简单介绍

    http://www.expressjs.com.cn/4x/api.html  这个是express API的中文手册 但是只是翻译了一点 英语比较差比较难受. 1. 关于安装 现在网上查的时候有一 ...

  4. 面向面试编程——javascript对象的几种创建方式

    javascript对象的几种创建方式 总共有以下几个模式: 1.工厂模式 2.构造函数模式 3.原型模式 4.混合构造函数和原型模式 5.动态原型模式 6.寄生构造函数模式 7.稳妥构造函数模式 1 ...

  5. MVC 树节点Table格式授权

    这几夜心里颇不平静, 奈何 JS水平有限,前台效果耗时四天,后台传值一天,直至昨夜丑时测试初步完成,其实就是一个给tree来授权,网上开源的插件很多,如treejs.easyui 等等,只是这里授权稍 ...

  6. Linux命令 文件压缩及压缩命令

    gzip [功能说明] 文件的压缩 #gizp属于GNU软件,总性能不错,是Linux系统首选的压缩工具,tar归档命令的-z参数也是利用gzip/gunzip来解压缩 [语法格式] Gip[选项][ ...

  7. [css 实践篇] CSS box-orient

    定义和用法 box-orient 属性规定框的子元素应该被水平或垂直排列. 提示:水平框中的子元素从左向右进行显示,而垂直框的子元素从上向下进行显示.不过,box-direction 和 box-or ...

  8. AVAudioSession(2):定义一个 Audio Session

    本文转自:AVAudioSession(2):定义一个 Audio Session | www.samirchen.com 本文内容主要来源于 Defining an Audio Session. A ...

  9. Centos6.5 源码编译安装 Mysql5.7.11及配置

    安装环境 Linux(CentOS6.5 版).boost_1_59_0.tar.gz.mysql-5.7.11.tar.gzMySQL 5.7主要特性:    更好的性能:对于多核CPU.固态硬盘. ...

  10. php中比较两个变量是否相等的最高效写法

    <?php //php中比较两个变量是否相等的最高效写法 function isEqual($a,$b){ return $a==$b; } var_dump(isEqual(3,3));//t ...