使用tween实现对象的抛物线运动

马黑黑

马黑黑

代码：

1. <div id="papa"></div>
   
2. 
   
3. <script type="module">
   
4.         import TWEEN from 'https://638183.freep.cn/638183/3dev/examples/jsm/libs/tween.module.js';
   
5. 
   
6.         let sons = [], tweens = [], total = 10, time = 1000;
   
7. 
   
8.         Array.from({length: total}).forEach(son => {
   
9.                 son = document.createElement('div');
   
10.                 son.className = 'son';
    
11.                 son.style.cssText += `
    
12.                         transform: translate3d(0, 0, -1000px);
    
13.                         background: linear-gradient(
    
14.                                 35deg,
    
15.                                 #${Math.random().toString(16).substring(2,8)},
    
16.                                 #${Math.random().toString(16).substring(2,8)}
    
17.                         );
    
18.                 `;
    
19.                 sons.push(son);
    
20.                 papa.appendChild(son);
    
21.         });
    
22. 
    
23.         sons.forEach((son, key) => {
    
24.                 const pos = { x: 0, z: -1000, a: 0 };
    
25.                 const target = { x: papa.offsetWidth, z: 0, a: 30 };
    
26.                 const tween = new TWEEN.Tween(pos)
    
27.                         .to(target, time)
    
28.                         .onUpdate( () => {
    
29.                                 son.style.setProperty('transform', `rotateZ(${pos.a}deg) translate3d( ${pos.x}px, 0, ${pos.z}px )`);
    
30.                         })
    
31.                         .onStart( () => {
    
32.                                 son.style.setProperty('opacity', 0.9);
    
33.                         })
    
34.                         .onComplete ( () => {
    
35.                                 setTimeout( () => {son.style.setProperty('opacity', 0); }, time);
    
36.                         });
    
37.                 tweens.push(tween);
    
38.         });
    
39. 
    
40.         tweens.forEach( (tween, key) => {
    
41.                 tween.chain(tweens[(key + 1) % tweens.length]);
    
42.         });
    
43. 
    
44.         const animate = () => {
    
45.                 TWEEN.update();
    
46.                 requestAnimationFrame(animate);
    
47.         };
    
48. 
    
49.         tweens[0].start();
    
50.         animate();
    
51. </script>
    
52. 
    
53. <style>
    
54.         #papa {
    
55.                 margin: auto;
    
56.                 margin-top: 30px;
    
57.                 width: 760px;
    
58.                 height: 480px;
    
59.                 border: 1px solid gray;
    
60.                 perspective: 600px;
    
61.                 position: relative;
    
62.         }
    
63.         .son {
    
64.                 position: absolute;
    
65.                 width: 60px;
    
66.                 height: 60px;
    
67.                 border-radius: 50%;
    
68.                 background: linear-gradient(35deg, tan, skyblue);
    
69.                 opacity: 0;
    
70.                 filter: drop-shadow(4px 6px 8px gray);
    
71.         }
    
72. </style>

复制代码

马黑黑

tween.js 并不能驱动对象做曲线运动。一楼，通过持续改变 class="son" 的元素的相关值：

—— x : X轴位置
—— z : Z轴位置
—— a : 旋转角度

这些值的改变，使得对象从｛ x1, y1, z1 } 到 { x2, y2, z2) 的移动轨迹从直线变为了曲线，之所以酱紫，是利用了CSS的 transform 特征——当对象先旋转在平移，它就会做曲线运动。

红影

还以为是给了路径，原来是利用了css的对象先旋转再平移就会走曲线的特性。
这个做法很巧妙

红影

本来小球是从左上角过来的，黑黑修改后，成了从远方过来的了

花飞飞

矮油，这是定点投篮，各种颜色都有。。小球有立体感，漂亮。。
小球从同一点出发，到达同一目的。。
起点和终点不变，球体却在无休止的重复且颜色随机变化。。。。

花飞飞

马黑黑 发表于 2025-7-6 21:32
tween.js 并不能驱动对象做曲线运动。一楼，通过持续改变 class="son" 的元素的相关值：

—— x : X轴位 ...

这么说来之前的粒子能量交换是不是就可以曲线到达了。。。
旋转再平移而成曲线运动，这创意真是绝了。。妙。。

花飞飞

大哥，你二楼的代码没给全。。少了十几行。。
原来粒子颜色是10个一组在循环。。不是无限的
球体给了线性渐变的颜色，这随机设了两组，上下两次出现的不一样。。

花飞飞

不仅位置有抛物曲线变化，球体还给了阴影，更具立体感。。。。球体大小也有变化。。。颜色有变色。。百忙之中还设了透明度变化。。

这么复杂又精密的设计，怎么做到了。。神人。。

马黑黑

花飞飞 发表于 2025-7-6 22:18
不仅位置有抛物曲线变化，球体还给了阴影，更具立体感。。。。球体大小也有变化。。。颜色有变色。。百忙之 ...

这个应该是简单的吧，就是繁琐一点而已

马黑黑

花飞飞 发表于 2025-7-6 22:13
大哥，你二楼的代码没给全。。少了十几行。。
原来粒子颜色是10个一组在循环。。不是无限的
球体给了线性 ...

修改的时候系统给吞掉了一部分

马黑黑

花飞飞 发表于 2025-7-6 22:05
这么说来之前的粒子能量交换是不是就可以曲线到达了。。。
旋转再平移而成曲线运动，这创意真是绝了。。 ...

这个N年前用过的了，现在是使用tween驱动数值而已

马黑黑

花飞飞 发表于 2025-7-6 22:02
矮油，这是定点投篮，各种颜色都有。。小球有立体感，漂亮。。
小球从同一点出发，到达同一目的。。
起点 ...

这是N个小球在轮流执勤

马黑黑

红影 发表于 2025-7-6 21:46
本来小球是从左上角过来的，黑黑修改后，成了从远方过来的了

对，原来是做二维的，现在改为三维了

马黑黑

红影 发表于 2025-7-6 21:43
还以为是给了路径，原来是利用了css的对象先旋转再平移就会走曲线的特性。
这个做法很巧妙

这基本是炒旧饭，加了点料子

杨帆

效果惊艳！谢谢马老师经典讲授与示范

马黑黑

杨帆 发表于 2025-7-6 23:00
效果惊艳！谢谢马老师经典讲授与示范

知识是一脉相承的。这个抛物线运动需要一个基础：

transform: rotate(deg) translate(px);

这样的设定，当deg角度发生变化，对象就会做曲线运动

杨帆

马黑黑 发表于 2025-7-6 23:02
知识是一脉相承的。这个抛物线运动需要一个基础：

transform: rotate(deg) translate(px);

是的，一脉相承，有点明白了，谢谢老师

马黑黑

杨帆 发表于 2025-7-6 23:05
是的，一脉相承，有点明白了，谢谢老师

红影

马黑黑 发表于 2025-7-6 23:00
对，原来是做二维的，现在改为三维了

嗯嗯，还是三维的好看，更迷幻的感觉