缓动动画(加回掉函数)

function animate(obj, json,fn){

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);
if(fn()){
fn()
}
}
},20)
}
// 获取样式的方法 元素 属性
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return window.getComputedStyle(obj, null)[attr];
}
};

时间: 2024-08-08 21:51:11

缓动动画(加回掉函数)的相关文章

JS-特效 ~ 05. 缓动框架兼容封装/回掉函数/兼容透明度/层级、旋转轮播图、正则表达式、验证表单注册账号、

缓动函数中opcity  写百分值的值 JS一般不用小数运算,会照成精度丢失 元素的默*认透明度是 层级一次性赋值,不缓动 利用for-in为同一个父元素的子元素绑定属性 缓动框架兼容封装/回掉函数/兼容透明度/层级 function animate(ele,json,fn){ //先清定时器 clearInterval(ele.timer); ele.timer = setInterval(function () { //开闭原则 var bool = true; //遍历属性和值,分别单独处

Web API (scroll系列)、(仿淘宝侧边栏效果实现)、(mouseenter与mouseover的区别)、(动画的原理)、(缓动动画)

一 .三大系列中的scroll系列 : (1)scrollLeft |  scrollTop  :水平   |   垂直方向滚动出去的距离  : (2)scrollWidth |  scrollHeight   :内容的真是宽度  |  高度   : (3)滚动整个页面的时候  :   window . pageYOffset   : 二 .仿淘宝侧边栏效果实现 : 1.  找到关心的元素对象  : (1)banner区域  元素对象  : (2)侧边栏的元素对象   : (3)主体部分元素对象

Android动画学习(缓动动画与属性动画的区别)

前言: 在 Android动画学习(概述)中,如果你看过这篇帖子,你应该会对缓动动画和属性动画之间的区别产生疑问,因为在它们的应用中,你会感觉这两种动画有着一些相似的地方,为此,我打算把这两种动画之间的区别做一下说明 区别: 在这里先附上官方文档对于这两种动画的区别说明(我所说的缓动动画对应在下文中的英文为:View Animation,属性动画对应在下文中的英文为:Property Animation): How Property Animation Differs from View Ani

Javascript缓动动画原理

匀速动画的原理:   盒子本身的位置  +  步长 缓动动画的原理:    盒子本身的位置  +  步长 (不断变化的) 封装代码: 1 function animate(obj,target){ // 第一个参数 动谁 第二个参数 动多少 2 clearInterval(obj.timer); 3 obj.timer = setInterval(function() { 4 // 计算步长 动画的原理 盒子本身的位置 + 步长 5 var step = (target - obj.offset

动画: 缓动动画

演示缓动(easing)的应用Animation/EasingAnimation.xaml <Page x:Class="Windows10.Animation.EasingAnimation" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xml

simple_udp_register中回掉函数解析

simple-udp.c中的simple_udp_register()函数的解析,重点为回掉函数,结合broadcast-udp.c这个例子对其进行分析. broadcast-udp.c是基于simple-udp的一个广播数据报的例子. int simple_udp_register(structsimple_udp_connection *c, uint16_t local_port, uip_ipaddr_t *remote_addr, uint16_t remote_port, simpl

定时器缓动动画

定时器缓动动画公式: 初始值+=(终止值-初始值) × 缓动系数 <!DOCTYPE html> <html> <head> <meat charset="utf-8"> <title>缓动动画</title> <style> *{ padding: 0; margin: 0; } body{ background-color: #000; } #btn{ width: 80px; height: 40

c# Winform 缓动动画

一.定义缓动动画类 public class AnimationHelper { Timer animationTimer = new Timer(); double velocity = 0.0; Point location = Point.Empty; double force = 0.01; //0.69; double drag = 0.8; private Control control; //private AxShockwaveFlash control; private int

缓动动画封装详细讲解

---来自一个前端妹子 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 8 <!-- 9 先快后慢 10 一开始的步子要迈的大,后面的步子要小 11 12 步子要越来越小 13 14 被除数 / 10 ,被除数的值越大,结果就越大,被除数越小.值就越小