JS实现缓动效果-让div运动起来
var tween = {
linear:function(t,b,c,d){
return c*t/d + b;
},
easeIn:function(t,b,c,d){
return c * ( t /= d ) * t + b;
},
strongEaseIn:function(t,b,c,d){
return c * ( t /= d ) * t * t * t * t + b;
},
strongEaseOut:function(t,b,c,d){
return c * ( ( t = t / d -1 ) * t * t * t * t +1 ) + b;
},
sineaseIn:function(t,b,c,d){
return c * ( t /= d ) * t * t + b;
},
sineaseOut:function(t,b,c,d){
return c * ( ( t = t / d -1 ) * t * t *t +1 ) + b;
}
}; var Animate = function(dom){
this.dom = dom;
this.startTime = 0;
this.startPos = 0;
this.endPos = 0;
this.propertyName = null;
this.easing = null;
this.duration = null;
} Animate.prototype.start = function(propertyName,endPos,duration,easing){
this.startTime = +new Date;
this.startPos = this.dom.getBoundingClientRect()[propertyName];
this.propertyName = propertyName;
this.endPos = endPos;
this.duration = duration;
this.easing = tween[easing]; var self = this;
var timeId = setInterval(function(){
if(self.step() === false){
clearInterval(timeId);
}
},19);
} Animate.prototype.step = function(){
var t = +new Date;
if(t>=this.startTime + this.duration){
this.update(this.endPos);
return false;
}
var pos = this.easing(t-this.startTime, this.startPos, this.endPos - this.startPos, this.duration);
this.update(pos);
} Animate.prototype.update = function(pos){
this.dom.style[this.propertyName] = pos + 'px';
} var div = document.getElementById('div');
var animate = new Animate(div);
animate.start('left',500,1000,'strongEaseOut');
JS实现缓动效果-让div运动起来的更多相关文章
- animation js控制 缓动效果
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>缓动 ...
- 《JavaScript 实战》:Tween 算法及缓动效果
Flash 做动画时会用到 Tween 类,利用它可以做很多动画效果,例如缓动.弹簧等等.我这里要教大家的是怎么利用 Flash 的 Tween 类的算法,来做js的Tween算法,并利用它做一些简单 ...
- javascript的缓动效果
这部分对原先的缓动函数进行抽象化,并结合缓动公式进行强化.成品的效果非常惊人逆天.走过路过不要错过. 好了,打诨到此为止.普通的加速减速是难以让人满意的,为了实现弹簧等让人眼花缭乱的效果必须动用缓动公 ...
- Adobe Edge Animate –弹性的方块-使用tweenmax缓动效果
Adobe Edge Animate –弹性的方块-使用tweenmax缓动效果 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 此前有Edge爱好者提出一 ...
- javascript 45种缓动效果BY司徒正美
javascript 45种缓动效果 参数 类型 说明 el element 必需,为页面元素 begin number 必需,开始的位置 change number 必需,要移动的距离 durati ...
- 过渡与动画 - 缓动效果&基于贝塞尔曲线的调速函数
难题 给过渡和动画加上缓动效果是一种常见的手法(比如具有回弹效果的过渡过程)是一种流行的表现手法,可以让界面显得更加生动和真实:在现实世界中,物体A点到B点往往也是不完全匀速的 以纯技术的角度来看,回 ...
- js off 缓动动画
动画也有很多种,一起来学习,缓动动画吧 缓动动画 1.缓动动画原理=盒子位置+(目标盒子位置-现在盒子位置)/10 2.步长越来越小 3.让步长越来越小的公式 步长=(目标位置-本身位置)/ ...
- [ActionScript 3.0] AS3 用于拖动对象时跟随鼠标的缓动效果
package com.fylibs.components.effects { import flash.display.DisplayObject; import flash.events.Even ...
- 软件项目技术点(1)——Tween算法及缓动效果
AxeSlide软件项目梳理 canvas绘图系列知识点整理 Tween算法及缓动效果 软件里在切换步序时需要有过渡动画效果,从当前位置的画面缓动到目标位置的画面.动画效果可重新查看文章系列第一篇 ...
随机推荐
- 解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局,为啥到真机就是乱的
解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局,为啥到真机就是乱的 .chart{ width: 100%; text-align: center; } .canvas{ ...
- AI - 概念(Concepts)
01 - AI.ML与DL的关系 从涵盖范围上来讲,人工智能(AI)大于机器学习(ML)大于深度学习(DL) 人工智能(AI):能够感知.推理.行动和适应的程序: 机器学习(ML):能够随着数据量的增 ...
- 【jdbc】连接数据库从浅入深
一.回想 还记得以前自学的时候,刚接触到数据库,讲解的连接数据库的最基本的理论知识和方法,现在温习一下基础知识并总结如下! 1.JDBC连接数据库的基本流程 加载JDBC驱动程序 —> 提供JD ...
- [源码]Python简易http服务器(内网渗透大文件传输含下载命令)
Python简易http服务器源码 import SimpleHTTPServerimport SocketServerimport sysPORT = 80if len(sys.argv) != 2 ...
- EDI 学习开发(一)
最近有个需求,关于EDI 的开发,效果烂成一坨屎,写个总结,记录这坨屎. 配置文件:01.EDI.Export.Config(在EDI 服务器SystemConfig目录下) 02.EDI.TypeC ...
- ES6 系列之私有变量的实现
前言 在阅读 <ECMAScript 6 入门>的时候,零散的看到有私有变量的实现,所以在此总结一篇. 1. 约定 实现 class Example { constructor() { t ...
- 开发“todolist“”项目及其自己的感悟
一,项目题目: 实现“todolist项目” 该项目主要可以练习js操控dom事件,事件触发之间的逻辑关系,以及如何写入缓存,获取缓存.固定. 二,todolist简介 ToDoList是一款非常优秀 ...
- wap开发中的cookie
安卓和ios的wap开发,安卓中的cookie可以识别中文,但是ios不能识别,需要转码成通用码(UNICODE),解决办法:直接转成16进制码, escape('测试文字') 友情链接:http:/ ...
- 使用.Net Core 2.1开发Captcha图片验证码服务
更新后续篇:Captcha服务(后续1) 使用.Net Core 2.1开发Captcha验证码服务 开发工具:Visual Studio 2017 15.7.3 开发平台:64位 Windows 1 ...
- 第一册:lesson thirty seven。
原文: Making a bookcase. A:You are working hard,George. What are you doing . B:I am making a bookcase. ...