前端项目-tween.js.zip资源-CSDN文库

共68个文件

png：25个

html：15个

md：8个

需积分: 9 64 浏览量 2019-09-02 17:32:52 上传评论收藏 602KB ZIP 举报

**前端项目 - Tween.js** Tween.js 是一个专为前端开发者设计的轻量级动画库，它简化了在JavaScript中创建平滑、动态的过渡效果。这个库的核心是基于罗伯特·彭纳（Robert Penner）的缓动方程，这些方程提供了各种动画效果，如淡入淡出、平移、旋转等。Tween.js库因其易用性、高效性和广泛的兼容性而广受欢迎。在前端开发中，动画是增强用户体验和交互性的关键元素。Tween.js通过提供一系列API，使得开发者可以轻松地对对象属性进行平滑过渡，例如改变物体的位置、大小、颜色等。这些过渡效果可以在网页的各个层面实现，包括DOM元素、Three.js等3D库中的对象，甚至是WebGL场景。 Tween.js的使用步骤通常包括以下几步： 1. **引入库**：在HTML文件中，你可以通过CDN链接或本地文件引入Tween.js库。例如，你可以在`<head>`标签内添加： ```html <script src="path/to/tween.js"></script> ``` 2. **创建Tween对象**：你需要创建一个Tween对象，并指定你想要改变的属性。例如，如果你想要改变一个DOM元素的宽度，可以这样做： ```javascript var element = document.getElementById('myElement'); var tween = new TWEEN.Tween({width: element.style.width}) .to({width: '500px'}, 1000); // 动画时长1000毫秒 ``` 3. **定义动画行为**：接下来，你可以设置动画的开始和结束状态，以及动画持续的时间。在这个例子中，我们设置了宽度从当前值变化到500像素。 4. **添加缓动效果**：Tween.js提供了多种缓动效果，如线性、回弹、摇摆等。你可以选择合适的缓动函数来使动画更生动： ```javascript .easing(TWEEN.Easing.Quadratic.Out) // 使用二次缓动函数，Out表示结束时减速 ``` 5. **链式调用**：Tween.js的API设计为链式调用，这使得代码更整洁： ```javascript .onUpdate(function() { element.style.width = this.width + 'px'; }) ``` 6. **启动和更新动画**：启动动画并确保在每一帧中更新Tween.js： ```javascript tween.start(); requestAnimationFrame(update); function update() { TWEEN.update(); if (TWEEN.getAll().length > 0) { requestAnimationFrame(update); } } ``` Tween.js不仅支持单一属性的动画，还支持同时处理多个属性的过渡。此外，它可以与其他库无缝集成，如Three.js，以创建复杂的3D动画效果。通过深入理解和熟练运用Tween.js，开发者可以创造出丰富多样的视觉体验，提升网站和应用的吸引力和互动性。 Tween.js是前端开发者在创建动态效果时的一个强大工具，它通过简洁的API和高效的缓动方程，使得动画制作变得简单易行，同时也提高了代码的可维护性和复用性。对于任何想要提升前端项目用户体验的开发者来说，掌握Tween.js都是一个值得投资的技能。

资源推荐

资源详情

资源评论

收起资源包目录

前端项目-tween.js.zip （68个子文件）

tween.js-master

.gitignore 58B

package.json 1KB

package-lock.json 335KB

src

Tween.js 15KB

.travis.yml 269B

assets

projects

01_wilderness.png 7KB

10_aframe.png 8KB

08_web_lab.png 11KB

03_androidify.png 5KB

04_webgl_globe.png 7KB

09_moma.png 13KB

06_minesweeper3d.png 6KB

05_rome.png 7KB

00_linechart.png 2KB

07_macchina.png 10KB

02_floweroscope.png 4KB

examples

05_spline.png 4KB

11_stop_all_chained_tweens.png 7KB

08_repeat.png 9KB

02_black_and_red.png 4KB

01_bars.png 5KB

00_hello_world.png 615B

07_dynamic_to.png 7KB

04_simplest.png 3KB

03_graphs.png 3KB

09_relative.png 9KB

10_yoyo.png 8KB

06_video_and_time.png 3KB

style.css 504B

CONTRIBUTING.md 1KB

CODE_OF_CONDUCT.md 3KB

LICENSE 1KB

rollup.config.js 338B

examples

02_black_and_red.html 2KB

04_simplest.html 1KB

11_stop_all_chained_tweens.html 2KB

03_graphs.html 4KB

00_hello_world.html 2KB

10_yoyo.html 2KB

createGraph.js 1KB

stats.min.js 2KB

RequestAnimationFrame.js 1KB

12_graphs_custom_functions.html 3KB

06_array_interpolation.html 4KB

09_relative_values.html 2KB

05_video_and_time.html 2KB

css

style.css 503B

01_bars.html 2KB

13_relative_start_time.html 2KB

08_repeat.html 2KB

07_dynamic_to.html 3KB

video

sintel.webm 203KB

README.md 10KB

README_zh-CN.md 10KB

.npmignore 57B

docs

contributor_guide_zh-CN.md 10KB

user_guide.md 21KB

contributor_guide.md 11KB

imgs

pull-request-checks.png 57KB

pull-request-checks-failing.png 55KB

user_guide_zh-CN.md 18KB

test

unit

nodeunit.html 284B

nodeunit.js 64KB

nodeunitheadless.js 158B

tests.js 29KB

travis_install.sh 32B

jshintrc 109B

jscs.json 1KB

评论收藏

内容反馈

weixin_38744207

粉丝: 344
资源: 2万+

前端项目-tween.js.zip

tween.js例子

Tween:tween.js

前端项目-es6-tween.zip

tweenjs下载

tween.js-master.zip

tweenjs.min.js文件

TweenJS2022最新版本（tween.js）

tween.js：JavaScript动画引擎

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

TweenMax.js和TweenMax.min.js 打包下载

前端项目-mo-js.zip

three.js-r133.zip

前端项目-mootools.zip

前端项目-jquery-animateNumber.zip

three-js-教程源代码.zip

TweenJS-1.0.0

TweenMax.min.js

TWeen:极简JavaScript Tween库

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

sup-tween.js:tween.js 的一个分支，用于 Superpowers，可扩展的 HTML5 2D+3D 游戏引擎

three.js-3D钢琴播放器.zip

vue3中使用threejs加载fbx模型.zip

three.js 3d全景效果演示，侦探小游戏.zip

使用three.js制作的3D字体.zip

Gsap.js渐入式标题文字特效.zip

es6-tween:tween.js的ES6版本

react-xrplayer:基于React、Three.js、WebGL、Tween.js等开发的全景互动直播播放器。支持全景视频点播与直播，支持三维模型、热点标签、全景漫游、弹窗视频等交互能力

react-reacttweenReact组件的渐变动画

最新资源