tween使用(1)

1.使用tween的案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="target" style="position:absolute; top: 100px; left: 100px; width: 100px; height: 100px; background: #a0dde9; padding: 1em;">
    hello world!
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.3.5/Tween.min.js"></script>
<script>
    var position;
    var target;
    var tween,tweenBack;

    init();
    animate();
    function init(){
        position={x:100,y:100,rotation:0};
        target=document.getElementById('target');
        //动画从0,0位置到700,200的位置旋转360
        tween=new TWEEN.Tween(position)
            .to({x:700,y:200,rotation:360},2000)
            .onUpdate(update);
        tween.start();
    }
    function animate( time ) {
        var id = requestAnimationFrame(animate);

        var result = TWEEN.update(time);

        if(!result) cancelAnimationFrame(id);
    }
    function update() {
        target.style.left = position.x + 'px';
        target.style.top = position.y + 'px';
        target.style.webkitTransform = 'rotate(' + Math.floor(position.rotation) + 'deg)';
        target.style.MozTransform = 'rotate(' + Math.floor(position.rotation) + 'deg)';
    }
</script>
</body>
</html>


### tween.js 使用教程 #### 导入库 为了使用 `tween.js` 创建动画,首先需要导入该库。可以通过多种方式引入此库,例如通过 npm 或者直接在 HTML 文件中链接 CDN 版本。 对于模块化环境中的项目而言,可以采用如下 ES6 模块语法来加载: ```javascript import TWEEN from 'https://cdn.jsdelivr.net/npm/tween@18.6.4-esm/esm/index.js'; ``` 这行代码展示了如何利用 JavaScript 的动态 `import()` 函数异步获取并应用 `tween.js` 库[^2]。 #### 初始化 Tween 对象 一旦成功引入了 `tween.js`,就可以开始构建补间对象来进行属性变化的平滑过渡。下面是一段简单的例子说明怎样设置一个从初始值到目标值的变化过程: ```javascript // 定义起始状态的对象 const object = { position: 0 }; // 设置结束位置的目标数值 const target = { position: 100 }; new TWEEN.Tween(object) // 创建一个新的补间实例作用于object上 .to(target, 1000) // 到达target所指定的状态,在1秒内完成转换 .easing(TWEEN.Easing.Quadratic.Out) // 添加缓动函数使运动更自然 .onUpdate(() => { console.log('Current Position:', object.position); }) // 当每次更新时触发回调打印当前位置 .start(); // 开启补间动画 ``` 上述代码片段创建了一个新的补间操作,它会逐渐改变给定对象的位置属性直到达到设定的目的地,并且每帧都会调用一次提供的回调方法用于实时监控进展状况[^4]。 #### 更新循环与渲染 为了让补间能够正常运作,还需要确保存在一个持续运行的游戏主循环去不断刷新场景以及执行所有待处理的任务。通常情况下,这样的机制已经在基于 Three.js 构建的应用程序里实现了;如果没有的话,则需自行编写简易版本: ```javascript function animate() { requestAnimationFrame(animate); TWEEN.update(); // 处理当前时间点上的每一个活动着的补间 renderer.render(scene, camera); // 假设这是Three.js里的渲染指令 } animate(); ``` 这段脚本定义了一种典型的时间推进模式——即每一帧都请求下一轮重绘的同时也同步推进所有的补间计算工作,从而保证视觉呈现连贯流畅[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值