正文

tween.js的动画效果

那一刻~~~掩护你  2022-02-11  761

关键词：

实现动画可以用好多种的方法，今天来看看用tween.js插件是如何实现动画效果的。

tween.js的使用
　　1.下载
　　2.引入
　　3.使用tween.js语法


需要哪些条件来做运动
　1.初始位置
  2.目标点

缓动函数
　　1.linear 匀速
　　2.Quad 二次方缓动效果
　　3.Cubic 三次方缓动效果
　　4.Quart 四次方缓动效果
　　5.Quint 五次方缓动效果
　　6.Sine  正弦缓动效果
　　7.Expo  指数缓动效果
　　8.Circ  圆形缓动函数
　　9.Elastic 指数衰减正弦曲线缓动函数
　　10.Back  超过范围的三次方的缓动函数
　　11.Bounce 指数衰减的反弹曲线缓动函数
每种缓动函数都由三种效果:
　　1.easeIn  加速
　　2.easeOut 减速
　　3.easeInOut  先加速后减速
　　注:linear 只有一种效果匀速

Tween.缓动函数名.缓动效果名(t,b,c,d);

  t:当前已经运动的时间
  b:初始位置
  c:变化的值
  d:总步数  总时间

我们来举个例子吧！

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7        
 8        #div1 {
 9              width: 100px;
10              height: 100px;
11              background: red;
12              position: absolute;
13              left: 100px;
14              top: 200px;
15        }
16 
17     </style>
18 </head>
19 <body>
20     <div id='div1'></div>
21     <!--移入tween.js-->
22     <script src='tween.js'></script>
23     <script type="text/javascript">
24         
25          // 获取元素
26          var oDiv = document.getElementById('div1');
27          var iLeft = 100;   // 初始位置
28          var timer = 0;     //d:总步数  总时间
29 
30 
31         // 先准备好要传入的四个参数
32         b = iLeft;  //b:初始位置
33         t = 0;      //t:当前已经运动的时间
34         c = 500;    //c:变化的值
35         d = 20;     //d:总步数  总时间
36         timer = setInterval(function() {
37            t++;
38            if (t >= d) {
39                 clearInterval(timer);
40            }
41             oDiv.style.left = Tween.Linear(t, b, c, d) + 'px'; //匀速运动
42         }, 30);
43 
44         
45 
46     </script>
47 </body>
48 </html>

移动前：

移动后：


再给大家分享一个开关门的动画效果。

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7         *{margin: 0;padding: 0}
  8         div{position: relative;width: 800px;height: 400px;overflow: hidden;}
  9         li img{width: 800px;height:400px;}
 10         ul{list-style: none;position: absolute;}
 11         ul li{position: absolute;}
 12         #btn1{margin-left: 310px;width: 80px;height: 30px;}
 13         #btn2{margin-left: 20px;width: 80px;height: 30px;}
 14         #li1{width: 399px;height: 400px;background-color: darkgrey;
 15             border-right:1px red solid;  }
 16         #li2{width: 399px;height: 400px;background-color: darkgrey;margin-left: 400px; border-left:1px red solid;}
 17     </style>
 18 </head>
 19 <body>
 20 <div id="div">
 21     <ul>
 22         <li><img src="img4.jpg" alt=""/></li>
 23         <li id="li1"></li>
 24         <li id="li2"></li>
 25     </ul>
 26 </div>
 27 <button id="btn1">开门</button>
 28 <button id="btn2">关门</button>
 29 </body>
 30 <script type="text/javascript" src="tween.js"></script>
 31 <script type="text/javascript">
 32     var div=document.getElementById("div");
 33     var li1=document.getElementById("li1");
 34     var li2=document.getElementById("li2");
 35     var btn1=document.getElementById("btn1");
 36     var btn2=document.getElementById("btn2");
 37 
 38     timer=null;
 39     timer1=null;
 40     btn1.onclick=function() {
 41 //        左开门
 42         fun();
 43         function fun() {
 44             var t = 0;          //t:当前已经运动的时间=== 0
 45             var b = 0;          // b:初始位置=== 0
 46             var c = -400;       //c:变化的值=== -400
 47             var d = 100;        //d:总步数  总时间=== 100
 48             timer = setInterval(function () {
 49                         t += 2;
 50                         if (t == d) {
 51                             clearInterval(timer)
 52                         }
 53                         li1.style.left = Tween.Linear(t, b, c, d) + "px";
 54                     }
 55                     , 30);
 56         }
 57 //右开门
 58         fun1();
 59         function fun1() {
 60 
 61             var t = 0;      //t:当前已经运动的时间=== 0
 62             var b = 0;      // b:初始位置=== 0
 63             var c = 400;    //c:变化的值=== 400
 64             var d = 100;    //d:总步数  总时间=== 100
 65             timer1 = setInterval(function () {
 66 
 67                 t += 2;
 68                 if (t == d) {
 69                     clearInterval(timer1)
 70                 }
 71                 li2.style.left = Tween.Linear(t, b, c, d) + "px";
 72             }, 30);
 73         }
 74     };
 75     
 76     timer2=null;
 77     timer3=null;
 78     btn2.onclick=function(){
 79 //        左关门
 80         fun2();
 81         function fun2() {
 82             var t = 0;          //t:当前已经运动的时间=== 0
 83             var b = -400;       // b:初始位置=== -400
 84             var c = 400;        //c:变化的值=== 400
 85             var d = 100;        //d:总步数  总时间=== 100
 86             timer2 = setInterval(function () {
 87 
 88                 t += 2;
 89                 if (t == d) {
 90                     clearInterval(timer2)
 91                 }
 92                 li1.style.left = Tween.Bounce.easeOut(t, b, c, d) + "px";
 93             }, 30);
 94         }
 95 //        右关门
 96         fun3();
 97         function fun3() {
 98             var t = 0;          //t:当前已经运动的时间=== 0
 99             var b = 400;        // b:初始位置=== 400
100             var c = -400;       //c:变化的值=== -400
101             var d = 100;        //d:总步数  总时间=== 100
102             timer3 = setInterval(function () {
103 
104                 t += 2;
105                 if (t == d) {
106                     clearInterval(timer3)
107                 }
108                 li2.style.left = Tween.Bounce.easeOut(t, b, c, d) + "px";
109             }, 30);
110         }
111     }
112 </script>
113 </html>

初始效果图====点击开门效果图=====点击关门效果图

tween.js

简要教程tween.js是一款可生成平滑动画效果的js动画库。相关的动画库插件还有：snabbt.js强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件。tween.js允许你以平滑的方式修改元素的属性值。你只需要告诉tween你想修改... 查看详情

window.requestanimationframe与tween.js配合使用实现动画缓动效果

...前，通知浏览器调用一个指定的函数，以满足开发者操作动画的需求。这个方法接受一个函数为参，该函数会在重绘前调用。注意: 如果想得到连贯的逐帧动画，函数中必须重新调用 requestAnimationFrame()。如果你想做逐帧动... 查看详情

利用tween.js算法生成缓动效果

...置任意的点坐标绘制出的一条光滑曲线。它在作图工具或动画中中运用得比较多，例如PS中的钢笔工具，firework中的画笔等等。无论运用在哪里，它们的原理都是一样的。同样，在用js实现运动效果时，我们也可以利用贝塞尔曲线... 查看详情

tween缓动动画(代码片段)

threejs基础代码段tweenjs补间动画(代码片段)

一、Tweenjs是什么？ tween.js是一款可生成平滑动画效果的js动画库,只需要告诉tween你想修改什么值，以及动画结束时它的最终值是什么，动画花费多少时间等信息，tween引擎就可以计算从开始动画点到结束动画... 查看详情

THREE.JS 中动画的最佳选择

】THREE.JS中动画的最佳选择【英文标题】：BestoptionsforanimationinTHREE.JS【发布时间】：2012-07-2905:00:30【问题描述】：three.js中动画（纹理动画、移动对象、隐藏/显示对象等）的最佳选择是什么？你是否使用额外的库。比如tween.js或... 查看详情

移动端滑屏全应用移动端动画贞动画函数mtween封装(代码片段)

首先此函数是基于大家都知道的Tween动画算法的，在此基础上使用了三中讲到的兼容版动画贞，可以使动画变得更流畅。1.首先要记得引入Tween.js2.引入mTween.js3.调用*mTwee.js文件如下:（这里的m意为mobile）(function()window.requestAnimationFr... 查看详情

typescript中集成tween.js踩坑(代码片段)

首选，采用的是webpack的架构，在ts中使用tween.js，非常麻烦，配置教程少的可怜，浪费了我一个下午，在这里记录一下，往有缘人别踩坑。tween.js版本为18.6.0一、安装npmi@tweenjs/tween.jsNote：必须这... 查看详情

关于tween.js封装的方法

今天做的是匀速情况下div的运动。首先开始之前先了解运动的原理A------------>>BA移动到B这段距离是总距离　　用一个变量保存下来：vardA移动到B移动的总次数　　　　用一个变量保存下来：varcA移动到B每次移动的距离　... 查看详情

idea打包时可以设置不用跟新包

...tpak通吃所有发行版的打包方式。tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。通过替换frm文件方式修改表结构Sqlserver命令行方式修改... 查看详情

typescript中集成tween.js踩坑(代码片段)

three.js：结合 tween.js 围绕世界轴旋转对象

】three.js：结合tween.js围绕世界轴旋转对象【英文标题】：three.js:rotateobjectaroundworldaxiscombinedwithtween.js【发布时间】：2016-02-2911:08:53【问题描述】：我目前正在尝试在3D中对立方体进行补间旋转，并且感谢这篇文章(Howtorotateaobjectona... 查看详情

关于tween.js测试介绍

<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>tweenDemo-01</title> <styletype="text/css"> *{margin:0;padding:0;} div{height:100px;width:100p 查看详情

three.js进阶之旅：页面平滑滚动-王国之泪💧(代码片段)

...s、Scroll、及Image等组件和方法；用CSS生成简单的循环悬浮动画等。声明：本文涉及图文和模型素材仅用于个人学习、研究和欣赏，请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。摘要浏览网页时，常被一些... 查看详情

css动画效果的回调

用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现.CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段.例如我们想在动画效果完成时调用回调函数来处理一些事务,会... 查看详情

jquery动画效果（借鉴他人的）

（1）jquery中常见的几种动画效果（2）动画队列执行的顺序对于一组元素上的动画效果，有如下两种情况：a)当在一个animate()方法中应用多个属性时，动画是同时发生的。b)当以链式的写法应用动画方法时，动画是按照顺序发生的... 查看详情

仿菁优网首页动画效果

原文链接1、菁优网首页动画效果图2、动画效果分析2.1、动画效果一定是UIView动画，因为核心动画是CALayer的动画效果给我们的位移假象，视图的真实位置并没有发生变化。在首页的动画中，按钮的位置是随着转盘的转动在发生变... 查看详情

万彩动画大师丨如何给图片添加上升气泡的动画效果

给图片文字添加上升气泡的动画效果，可以给观众带来一种梦幻般的视觉感受。在【时间轴区域】中点击【+】，会弹出一个小窗体，接着在窗体的【搜索框】中输入动画效果【气泡】的首字母【qp】并搜索，接着会看到有【... 查看详情