tween.js可生成平滑动画效果的js动画库效果演示

最新推荐文章于 2024-06-03 12:01:47 发布
最新推荐文章于 2024-06-03 12:01:47 发布
阅读量2.3k 收藏 1
点赞数
分类专栏： javaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012260672/article/details/55106648
版权

tween.js强大的可生成平滑动画效果的js库

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tween.js / dynamic to</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            body {
                margin: 0px;
            }
            #target {
                font-size: 13px;
                padding: 0px 32px;
            }
        </style>
        <link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="info" style="position: relative;">
            <h1><a href="http://github.com/tweenjs/tween.js">tween.js</a></h1>
            <h2>07 _ dynamic to</h2>
            <p>tweening towards a moving target</p>
        </div>

        <div id="target"></div>

        <script src="../src/Tween.js"></script>
        <script src="js/RequestAnimationFrame.js"></script>
        <script>
            init();
            animate();
            function init() {
                var width = 480;
                var height = 320;
                var target = document.getElementById('target');
                var canvas = document.createElement( 'canvas' );
                canvas.width = width;
                canvas.height = height;
                target.appendChild( canvas );
                var context = canvas.getContext( '2d' );
                var rabbit = { x: width - 50, y: 50 };
                new TWEEN.Tween( rabbit ).to( { x: width - 50, y: height - 50 }, 3000 ).onUpdate( function() {
                    // draw background
                    context.fillStyle = "rgb(240,250,240)";
                    context.fillRect( 0, 0, width, height );
                    // draw rabbit
                    context.fillStyle = "rgb(150,150,150)";
                    context.save();
                    context.translate( this.x, this.y );
                    context.beginPath();
                    context.moveTo( 0, 0 );
                    context.bezierCurveTo( 15, 0, 15, -40, 5, -30 );
                    context.lineTo( 0, 0 );
                    context.bezierCurveTo( -15, 0, -15, -40, -5, -30 );
                    context.lineTo( 0, 0 );
                    context.fill();
                    context.beginPath();
                    context.arc( 0, 0, 15, 0, Math.PI * 2, true );
                    context.fill();
                    context.restore();
                } ).start();
                var fox = { x: 50, y: 50 };
                new TWEEN.Tween( fox ).to( rabbit, 3000 ).onUpdate( function() {
                    // draw fox
                    context.fillStyle = "rgb(200,80,80)";
                    context.save();
                    context.translate( this.x, this.y - 13 );
                    context.scale( 1.2, 1.2 );
                    context.beginPath();
                    context.moveTo( 4, 24 );
                    context.lineTo( 8, 16 );
                    context.lineTo( 14, 10 );
                    context.lineTo( 15, 0 );
                    context.lineTo( 9, -10 );
                    context.lineTo( 2, 0 );
                    context.lineTo( -2, 0 );
                    context.lineTo( -9, -10 );
                    context.lineTo( -15, 0 );
                    context.lineTo( -14, 10 );
                    context.lineTo( -8, 16 );
                    context.lineTo( -4, 24 );
                    context.closePath();
                    context.fill();
                    context.restore();
                } ).start();
            }
            function animate( time ) {
                requestAnimationFrame( animate );
                TWEEN.update( time );
            }
            animate();
        </script>
    </body>
</html>
<!DOCTYPE html> 
<html lang="en">
    <head>
        <title>Black and Red / Tween.js</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="info">
            <h1><a href="http://github.com/tweenjs/tween.js">tween.js</a></h1>
            <h2>02 _ Black and red</h2>
            <p>4096 continuously changing color cells (in a 64x64 table)</p>
            <p></p>
        </div>
        <div id="target"></div>

        <style>
            body { font-family: Arial, Helvetica, sans; }
            table { border-collapse: collapse; }
            td { width: 5px; height: 5px; }
            #target { position: absolute; top: 4em; right: 3em; }
        </style>

        <script src="../src/Tween.js"></script>
        <script src="js/stats.min.js"></script>
        <script src="js/RequestAnimationFrame.js"></script>
        <script>
            var stats;
            init();
            animate();
            function init() {
                var target = document.getElementById('target');
                stats = new Stats();
                target.appendChild(stats.domElement);
                var t = document.createElement('table');
                var index = 0;
                for(var i = 0; i < 64; i++) {
                    var tr = t.insertRow(-1);
                    for(var j = 0; j < 64; j++) {
                        var td = tr.insertCell(-1);
                        td.style.background = '#000';
                        var x = (i+j) * 0.1;
                        var cell = { 'td': td, value : 0 };
                        var tween = new TWEEN.Tween(cell)
                            .to({ value: 1 }, 8000)
                            .delay((0.001 * index + Math.random()) * 500)
                            .easing(TWEEN.Easing.Elastic.InOut)
                            .onUpdate(function() {
                                var c = Math.floor(this.value * 0xff);
                                this.td.style.background = 'rgb(' + c + ', 0, 0)';
                            });
                        var tweenBack = new TWEEN.Tween(cell)
                            .to({ value: 0 }, 4000)
                            .delay((0.001*index + Math.random()) * 500)
                            .easing(TWEEN.Easing.Elastic.InOut)
                            .onUpdate(function() {
                                var c = Math.floor(this.value * 0xff);
                                this.td.style.background = 'rgb(' + c + ', 0, 0)';
                            });
                        tween.chain(tweenBack);
                        tweenBack.chain(tween);
                        tween.start();
                        index++;
                    }
                }
                target.appendChild(t);
            }
            function animate( time ) {
                requestAnimationFrame( animate );
                TWEEN.update( time );
                stats.update();
            }
        </script>
    </body>
</html>
诸葛苍穹
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
tween.js可生成平滑动画效果的js动画库
12-12
tween.js就是这样一个强大的JavaScript库，专为创建平滑、流畅的动画效果而设计。这款库允许开发者轻松地对HTML元素的属性进行平滑过渡，从而实现各种复杂的动态效果。 ### 动画原理 tween.js的核心概念是“补间”...
three.js使用Tween.js实现动画(vue中使用three.js61)
点燃火柴的博客
02-25 7033
使用Tween.js实现动画1.demo效果2.Tween.js基本用法2.1 tween的基本使用2.1.1 创建Tween对象2.1.2 定期更新tween2.2 控制tween动画2.2.1控制动画的开始和结束2.2.2控制多个动画2.2.3控制动画执行次数2.2.4控制动画更新2.3 tween回调函数3.实现要点3.1 vue中tween.js引入3.2 创建并启动Tween动画3.3 动画更新回调处理3.4 render中处理动画更新4.demo代码 1.demo效果 如上图，该demo通过
tween的缓动效果大全和使用方法
飞浪纪元FE的博客
04-07 5034
缓动函数 自定义参数随时间变化的速率。 现实生活中，物体并不是突然启动或者停止，当然也不可能一直保持匀速移动。就像我们打开抽屉的过程那样，刚开始拉的那一下动作很快，但是当抽屉被拉出来之后我们会不自觉的放慢动作。或是掉落在地板上的物体，一开始下降的速度很快，接着就会在地板上来回反弹直到停止。 easeInSine easeOutSine easeInOutSine easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOut
Tween.js在Three.js中的应用：为3D动画添加流畅过渡
最新发布
前端开发工程师
06-03 1193
在`Web`开发领域，`Three.js`已经成为构建精彩`3D`内容的首选库之一。它让开发者能够轻松地在浏览器中创建和展示复杂的`3D`场景。然而，要让这些场景栩栩如生，平滑的动画效果是必不可少的。这就引入了`Tween.js`——一个轻量级但功能强大的`JavaScript`库，专门用于在`Web`应用中创建平滑的补间动画。本文将探讨如何在`Three.js`项目中集成并利用`Tween.js`来增强`3D`对象的动画表现。
详解TWEEN.JS 补间动画
凌风子夜
09-23 3186
tweenJS是一个简单的javascript补间动画库，支持数字，对象属性，CSS样式等的动态效果过渡，允许平滑的修改元素的属性值。告诉它需要改变的元素的开始值和结束值，并设置好过渡时间，补间动画将会自动计算从开始到结束的状态，并产生平滑的动画变换效果。 tweenjs在threejs中经常作为过渡动画使用，所以做了一些学习说明，供以后方便查阅。 代码示例： //代码看不懂没关系，下面会有详细的...
ThreeJs使用tweenjs动画库制作动画
Baker的博客
08-18 352
上一节有讲过使用threejs自带的关键帧动画实现动画效果，这节讲一个常用的动画库组件Tween来更简易的实现动画效果，甚至通过一行代码就可以实现一个完整的动画过程，并且Tweenjs还提供了一些相关时间来提供其他操作，比如：开始动画触发，执行中触发和动画执行结束触发，这样可以将整个动画效果和其他操作关联起来。下面看代码，...
17.Tweenjs动画库
weixin_60645637的博客
07-02 702
tweenjs是一个JavaScript编写的补间动画库，如果你使用three.js开发web3d项目，使用tween.js辅助three.js生成动画效果也是比较好的选择。
tween.js 可生成平滑动画效果的js动画库
05-24
tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。
使用ArcGIS JS API与Tween.js实现图层闪烁动画效果（源码）.zip
03-19
在本文中，我们将深入探讨如何使用ArcGIS JavaScript API（JS API）与Tween.js库来创建图层闪烁动画效果。这是一个非常实用的技术，特别是在地理信息系统（GIS）应用中，可以吸引用户的注意力或者突出显示特定的地理...
js学习心得_一个简单的动画库封装tween.js
10-19
这篇文章介绍了如何封装一个简单的动画库，以JavaScript为例，文章中提到的tween.js是一个非常流行的JavaScript动画库。在Web开发中，为了实现平滑的动画效果，常常需要使用到缓动函数（easing function），而tween....
tween.js缓动补间动画算法示例
10-18
tween.js是一个JavaScript库，专门用于创建平滑的缓动补间动画效果。它简化了在Web页面上实现动态过渡和动画的过程。缓动补间动画是动画制作中的一个重要概念，尤其是在Flash中，通过Tween类可以实现各种复杂的动画...
tween动画演示
03-21
tween 动画效果，图片的移动，渐隐，放大，旋转等效果
Threejs中使用Tweenjs实现动画效果和Tweenjs使用说明文档
左本Web3D
10-19 3895
通过这个库可以很容易地实现某个属性在两个值之间进行过渡，而且起始值和结束值之间的所有中间值都会自动计算出来，这个过程叫作tweening（补间）。Tween.js是一个轻量级的JavaScript库，可以从https://github.com/sole/tween.js/下载。在Threejs中使用Tweenjs很简单，步骤主要是引入Tweenjs，写动画，动画刷新。TWEEN.add(tween) 和 TWEEN.remove(tween)以上方法通常只是在内部使用，一般情况下你了解即可。
分享四个前端Web3D动画库在Threejs中使用的动画库以及优缺点附地址
左本Web3D
03-05 2221
GSAP是一个功能强大的JavaScript动画库，它可以用于创建各种类型的动画效果，包括缓动、时间轴、滚动效果、SVG动画、CSS动画等等。：Anime.js是一个轻量级的JavaScript动画库，它可以用于创建复杂的动画效果，包括缓动、时间轴、颜色动画、路径动画等等。：Popmotion是一个强大的JavaScript动画库，它可以用于创建各种类型的动画效果，包括缓动、物理动画、路径动画等等。GSAP是一个功能强大的JavaScript动画库，支持多种类型的动画效果，可以创建各种复杂的动画效果。
Tween.js的使用示例
bgk083的专栏
04-25 9078
可参考：http://www.htmleaf.com/jQuery/Layout-Interface/201501271284.html 官方文档：https://github.com/tweenjs/tween.js/blob/master/docs/user_guide.md      http://learningthreejs.com/blog/2011/08/17/tweenjs-fo
TweenJS----前端常用的js动画库，缓动画和复制动画的制作，效果非常好。
weixin_30522183的博客
08-11 636
TweenJS类库主要用来调整和动画HTML5和Javascript属性，提供了简单并且强大的tweening接口。 http://www.createjs.cc/tweenjs/ http://www.createjs.cc/ CreateJS是基于HTML5开发的一套模块化的库和工具。基于这些库，可以非常快捷地开发出基于HTML5的游戏、动画和交互应用。 快速...
前端急速入门动画库---tweenjs
weixin_34194359的博客
03-07 6653
说明：tweenjs对于js动画简直是一个神器(比如threejs的粒子动画借助它来实现，平时的canvas动画，js2D动画都比较实用)，本文不会涉及比较深入的tweenjs用法，但你可以花5分钟就掌握它的最常用的基础用法，最后有兴趣的同学可以看一下tweenjs的基本原理。 1、动画场景 // html <div class="circle" style="top: 0px;left: ...
tween.js(补间动画)，基于Three.js使用
w418856的博客
05-08 568
tween.js是一款可生成平滑动画效果的js动画库 , 你只需要告诉tween你想修改什么值，以及动画结束时它的最终值是什么，动画花费多少时间等信息，tween引擎就可以计算从开始动画点到结束动画点之间值，来产生平滑的动画效果 , tween.js不仅仅可以在HTML页面中使用也可以直接用于three.js的mesh中用于控制模型的动画效果简单而又方便。, 补间开始时执行,只执行一次, 当使用 repeat() 重复补间 时,不会重复运行 , onStart((obj)=>{})
Three.js - 使用 Tween.js 实现动画效果
热门推荐
ithanmang
09-03 1万+
tween.js是一个小型的javaScript库，其github地址是https://github.com/tweenjs/tween.js 通过这个插件可以是用来定义，某个属性值之间的过渡，自动计算出起始值和结束值之间的所有中间值，这个过程叫做tweening补间。 示例： http://ithanmang.com/threeJs/home/201808/20180829/05-anima...
three.js 使用tween.js 实现完整飞线动画
05-09
是的，three.js和tween.js可以一起使用，实现复杂的动画效果，包括飞线动画。以下是一个简单的例子，演示了如何使用three.js和tween.js创建一条飞线动画： ```javascript // 创建three.js场景 var scene = new THREE.Scene(); // 创建相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 创建渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建飞线路径 var curve = new THREE.CatmullRomCurve3([ new THREE.Vector3(-10, 0, 0), new THREE.Vector3(-5, 5, 0), new THREE.Vector3(0, 0, 0), new THREE.Vector3(5, -5, 0), new THREE.Vector3(10, 0, 0) ]); // 创建飞线材质 var material = new THREE.LineBasicMaterial({ color: 0xffffff }); // 将飞线路径转换为几何体 var geometry = new THREE.Geometry(); geometry.vertices = curve.getPoints(50); // 创建飞线网格 var line = new THREE.Line(geometry, material); scene.add(line); // 创建飞线动画 var tween = new TWEEN.Tween({t:0}) .to({t:1}, 5000) // 5秒钟 .onUpdate(function() { // 根据tween的进度计算飞线的位置 var position = curve.getPoint(this.t); // 更新飞线网格的位置 line.position.copy(position); }) .start(); // 渲染场景 function render() { requestAnimationFrame(render); TWEEN.update(); // 更新tween动画 renderer.render(scene, camera); } render(); ``` 在这段代码中，我们首先创建了一个three.js场景、相机和渲染器。然后，我们创建了一个CatmullRomCurve3曲线，用于定义飞线路径，并将其转换为three.js几何体。接下来，我们创建了一个TWEEN.Tween对象，将其起始值设置为0，结束值设置为1，表示飞线动画的进度。在Tween对象的 onUpdate 回调函数中，我们根据飞线路径计算当前进度对应的位置，并将飞线网格的位置更新为该位置。最后，我们创建了一个渲染函数，用于在每帧更新Tween动画和渲染场景。 希望这个例子可以帮助你了解如何使用three.js和tween.js创建飞线动画。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值