<!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. wukong引擎源码分析之索引——part 3 文档评分 无非就是将docid对应的fields信息存储起来，为搜索结果rank评分用

    之前的文章分析过,接受索引请求处理的代码在segmenter_worker.go里: func (engine *Engine) segmenterWorker() { for { request : ...

  2. hihocoder-1347 小h的树上的朋友(lca+线段树)

    题目链接: 小h的树上的朋友 时间限制:18000ms 单点时限:2000ms 内存限制:512MB 描述 小h拥有n位朋友.每位朋友拥有一个数值Vi代表他与小h的亲密度.亲密度有可能发生变化. 岁月 ...

  3. 「LuoguT36048」 Storm in Lover

    Description 平成二十四年(2012年),5月11日,东京,某弓道场. "呐,呐,海未酱,你听说了吗?几天后的那场弓道大会?啊-!"橙发少女兴奋地拿着一张传单一样的纸跑向 ...

  4. bzoj4555

    ntt+cdq分治 原来zwh出的cf是斯特林 第二类斯特林数的定义是S(i,j)表示将i个物品分到j个无序集合的方案数,那么这道题中S(i,j)*j!*2^j是指将i个物品分到j个有序集合中并且每个 ...

  5. Codechef QGRID

    QGRID code 给定一个 n × m(1 <= m <= 3) 的点网格,网格的边上以及点上都有权值.初始时所有点的权值都为 0 .维护两种操作:1. x1 y1 x2 y2 c 把 ...

  6. B. Vanya and Books

    time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...

  7. 斯坦福CS231n—深度学习与计算机视觉----学习笔记 课时4

    课时4 数据驱动的图像分类:K最邻与线性分类器(上) 图像分类之前,我们需要将图片转换成一张巨大的数字表单,然后从所有种类中,给这个表单选定一个标签. 为什么分类问题是个困难的问题:图像分类难点是,当 ...

  8. E20180413-hm

    skew adj. 斜的,歪的; [数学] 不对称的; [统计学] 歪斜,扭曲;   vt. 歪曲; 曲解; 使歪斜;   vi. 偏离,歪斜; 斜视; traversal  n. 横越,横断物,(横 ...

  9. （水题）Codeforces - 327C - Magic Five

    https://codeforces.com/problemset/problem/327/C 因为答案可以有前导零,所以0和5一视同仁.每个小节内,以排在第 $i$ 个的5为结尾的序列即为在前面 $ ...

  10. hdoj5832【模拟】

    主要还是一个10001的倍数的问题: 队友的思路: 01 1个数*10001,最后四位是这个数的后四位 比如 521456 10001 521456 521456 9 5215081456 从后面fo ...