缓动动画(json)

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];
}
};

时间: 2024-08-16 16:22:03

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

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

定时器缓动动画

定时器缓动动画公式: 初始值+=(终止值-初始值) × 缓动系数 <!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

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

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

缓动动画(加回掉函数)

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 leade

tween 缓动动画

在讲tween类之前,不得不提的是贝塞尔曲线了.首先,贝塞尔曲线是指依据四个位置任意的点坐标绘制出的一条光滑曲线.它在作图工具或动画中中运用得比较多,例如PS中的钢笔工具,firework中的画笔等等.无论运用在哪里,它们的原理都是一样的.同样,在用js实现运动效果时,我们也可以利用贝塞尔曲线来实现不同的特效,而tween.js就是一个封装好的计算辅助算法.你可以通过连续输入多个值,然后利用贝塞尔曲线公式输出不同的值,最终形成了一条光滑的曲线.因为一条曲线上的值的不一样的,所以我们可以利用曲线的

分享一个即插即用的私藏缓动动画JS小算法

二.即插即用的缓动小算法 原理如下: 假设要从数值A变化到数值B,如果是线性运动,则每次移动距离是一样:如果是缓动,每次移动距离不一样.那如何才能不一样呢?很简单,按比例移动就可以. 例如:每次移动剩余距离的一半. 对吧,超容易理解的. 比方说:你和初恋之间距离是64,每秒移动一半,则,你们之间的距离下一秒就是32, 再下一秒就是16,然后8,然后4,然后2,然后1,然后--你们就在一起了.你们在一起的这个过程就是一个典型的先快后慢的缓动运动过程,如下示意图: 用一个简单的公式表示就是: A =