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. Linux常用命令说明(记录自己Linux命令使用情况,后续会持续更新)

    首次记录时间--20170602 感觉自己Linux命令使用掌握的情况非常差,今天先记录当前会的几个. 1#cd(change directory) 切换工作目录(或者叫修改当前目录) eg. cd ...

  2. VR全景智慧城市:VR全景技术分析与研究

    全景智慧城市,多年从事三维全景技术应用的互联网公司,我们利用计算机图形学.多媒体.人工智能和计算机网络技术,深入研发和推广虚拟现实9VR0技术的行业应用.如官方网站升级+720度全景.微网站建设+72 ...

  3. js与jQuery对象相互转换

    // jQuery-->JavaScript 两种方法: $(selector).get(index) ; $(selector)[index]; // JavaScript-->jQue ...

  4. Java常用类之String类练习

    1.编程. 已知字符串:"this is a test of java". 按要求执行以下操作: (1) 统计该字符串中字母s出现的次数 (2) 取出子字符串"test& ...

  5. iOS CAReplicatorLayer 实现脉冲动画效果

    iOS CAReplicatorLayer 实现脉冲动画效果 效果图 脉冲数量.速度.半径.透明度.渐变颜色.方向等都可以设置.可以用于地图标注(Annotation).按钮长按动画效果(例如录音按钮 ...

  6. vs2015未安装 Style 的 Visual Studio 语言支持

    解决方案:在浏览器搜索下载安装Microsoft ASP.NET and Web Tools即可 下载地址:https://www.microsoft.com/en-us/download/confi ...

  7. 《Python编程从入门到实践》第三章_列表简介

    什么是列表呢? 官方说明就是由一些列按特点顺序排列的元素组成.其实可以看出很多个字符串的有序组合吧,里面的内容可以随时的删除,增加,修改. 下面这个就是一个列表,python打印列表的时候会将中括号和 ...

  8. <iOS 组件与框架> -- UIKit Dynamics

    UIKit Dynamics 结合 『iOS 组件与框架 』一书.总结的知识点与demo demo 地址: GitHub地址 一.概述 1.UIKit Dynamics 是 iOS 7 新增的内容.其 ...

  9. Ubuntu下录音机程序的使用

    在Ubuntu中使用系统自带的录音机程序可以录制电脑的音频输出(比如,电脑正在播放视频的声音),或录制外部环境音频输入(比如,自己说话的声音) 1.录制电脑音频输出 在“硬件”选项中,将”选中设备的设 ...

  10. [原创]Floodlight+ovs的基本使用

    一.配置好openflow交换机 配置好交换机的管理地址,可先用串口登,使管理口地址与controller地址在同一个网络中. 在交换机上配置controller地址: 如: 先用命令新建一个brid ...