<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
* {
margin:0;
padding:0;
}
#wrap {
background-color:#0094ff;
height:600px;
width:600px;
}
#round {
height:100px;
width:100px;
background-color:#452692;
border-radius:50%;
position:absolute;
}
</style>
<script src="tween.js"></script>
</head>
<body>
<div id="wrap">
<div id="round"></div>
</div>
<script>
var round = document.getElementById("round");
function r() {
var t = 0;
var b = 0;
var c = 500;
var d = 2000;
var timer = setInterval(run, 20)
function run() {
t += 10;
if (t >= d) {
clearInterval(timer);
myfunction();
}
round.style.left =Tween.Bounce.easeInOut(t, b, c, d) + "px"; }
}
function myfunction() {
var t = 0;
var b = 0;
var c = 500;
var d = 2000;
var timer1 = setInterval(we, 20)
function we() {
t += 10;
if (t>=d) {
clearInterval(timer1);
myfunc();
}
round.style.top =Tween.Bounce.easeInOut(t, b, c, d) + "px";
}
}
function myfunc() {
var t = 0;
var b = 0;
var c = 500;
var d = 2000;
var timer2 = setInterval(we, 20)
function we() {
t += 10;
if (t >= d) {
clearInterval(timer2);
myfun();
}
round.style.left =c-Tween.Bounce.easeInOut(t, b, c, d) + "px";
}
}
function myfun() {
var t = 0;
var b = 0;
var c = 500;
var d = 2000;
var timer3 = setInterval(we, 20)
function we() {
t += 10;
if (t >= d) {
clearInterval(timer3);
r();
}
round.style.top =c-Tween.Bounce.easeInOut(t, b, c, d) + "px";
}
}r();
</script>
</body>
</html>

借助tween.js小球沿div四边跑的动画效果的更多相关文章

  1. tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。

    简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween. ...

  2. anime.js 实战:实现一个带有描边动画效果的复选框

    在网页或者是APP的开发中,动画运用得当可以起到锦上添花的作用.正确使用动画,不但可以有助于用户理解交互的作用,还可以大大提高网页应用的魅力和使用体验.并且在现在的网页开发中,动画已经成为了一个设计的 ...

  3. 用HTML、CSS、JS制作圆形进度条(无动画效果)

    逻辑 1.首先有一个圆:蓝色的纯净的圆,效果: 2.再来两个半圆,左边一个,右边一个将此蓝色的圆盖住,效果: 此时将右半圆旋转60°,就会漏出底圆,效果:   然后我们再用一个比底圆小的圆去覆盖这个大 ...

  4. tween.js

     简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween ...

  5. tween.js下面的轮播(饿了么点餐的那种效果)

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. tween.js缓动(补间动画)

    一.理解tween.js 如果看到上面的已经理解了,可以跳过下面的部分.下面为对Tween.js的解释 下面就介绍如何使用这个Tween了,首先b.c.d三个参数(即初始值,变化量,持续时间)在缓动开 ...

  7. tween.js 插件

    1.是什么? jQueryTween是一款轻量级的jQuery补间动画工具库插件.使用jQueryTween可以制作出各种平滑的动画过渡效果.该插件基于tween.js,旨在简化各种补间动画操作,提供 ...

  8. js进阶 13-6 jquery动画效果相关常用函数有哪些

    js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...

  9. Tween.js 动画效果

    一.apply,和call的用法. 先来一个与本次博文无关的东西,就是apply和call的用法.其实apply和call的用法都一样,只是他们的传参不一样.apply是数组,而call是单独的传,类 ...

随机推荐

  1. Oracle: 禁忌给一般用户授权create any procedure、execute any procedure

    给一般用户授 create any procedure.execture any procedure 这2个权限是很不安全的事. 因为授权后,通过一些处理,该用户可以取得dba权限,请一定注意. 下面 ...

  2. unity-Fatal Error GC-GetThreadContext Failed

    这几次在使用unity5.3打windows包后,运行x.exe不久总是会弹出"fatal error GC: GetThreadContext Failed"的错误.到网上查了, ...

  3. SPOJ:Easy Factorials(占位)

    Finding factorials are easy but they become large quickly that is why Lucky hate factorials. Today h ...

  4. [Selenium] 操作 HTML5 中的 Canvas 绘制图形

    测试 http://literallycanvas.com/ 以 Chrome Driver 为例阐述,通过 Actions 在 Canvas 上绘制一个封闭图形.对于 Canvas 上的操作,推荐 ...

  5. web自动化测试的自身特点

    1.web页面是出现的元素可能具有不确定性 2.不同操作系统上不同web浏览器之间的兼容性 3.web应用的高并发性和容错性 4.移动设备上web客户端兼容性,旋转下和各种触摸特性

  6. PostgreSQL 图形化客户端工具有哪些

    linux下有字符界面的:psql         图形界面的:pgaccesswindows系统可以用:phpPgAdmin或者telnet+psql 和phpmyadmin 一家的phpPgAdm ...

  7. Centos添加jdk环境变量

    假设将jdk解压到/opt/jdk1.8.0_131. echo "export JAVA_HOME=/opt/jdk1.8.0_131" >> /etc/profil ...

  8. display:inline-block的div 与 display:block的div之间有间隔问题(div与div之间有间隔的可能性)

    首先看一下我出现的问题如下图: 如上图所示,我的导航栏是由三部分组成的,三部分样式如下: .logo{ /*红框*/ position: relative; display: inline-block ...

  9. 【WIP】客户端JavaScript Web Object

    创建: 2017/10/11   更新: 2017/10/14 标题加上[WIP],增加[TODO] 更新: 2018/01/22 更改标题 [客户端JavaScript Web Object, UR ...

  10. IOS高级开发~Runtime(二)

    #import <Foundation/Foundation.h> @interface CustomClass : NSObject { NSString *varTest1; NSSt ...