TweenJS中文文档了解插件的API
缓动函数
- Linear:线性匀速运动效果;
- Quadratic:二次方的缓动(t^2);
- Cubic:三次方的缓动(t^3);
- Quartic:四次方的缓动(t^4);
- Quintic:五次方的缓动(t^5);
- Sinusoidal:正弦曲线的缓动(sin(t));
- Exponential:指数曲线的缓动(2^t);
- Circular:圆形曲线的缓动(sqrt(1-t^2));
- Elastic:指数衰减的正弦曲线缓动;
- Back:超过范围的三次方缓动((s+1)t^3 – st^2);
- Bounce:指数衰减的反弹缓动。
每个效果都分三个缓动方式,分别是:
In:从0开始加速的缓动,也就是先慢后快;
Out:减速到0的缓动,也就是先快后慢;
InOut:前半段从0开始加速,后半段减速到0的缓动。
基本操作
var testTween = new TWEEN.Tween({t: 0}).to({t: 0.1},3000).easing(TWEEN.Easing.Bounce.Out).onUpdate(
function(){
tTM.material.opacity = this.nOpacity;
for(var i = 0;i < len;i++){
if( i%4 < 2){
tTM.morphTargetInfluences[i] = this.t;
}
}
}
);
testTween.start();
...
var animate = function(){
requestAnimationFrame( animate );
TWEEN.update(); //重要
...
}
animate();
修改立方体的各个顶点
var geometry = new THREE.BoxGeometry( 100, 100, 100 );
var material = new THREE.MeshLambertMaterial( { color: 0xffffff, morphTargets: true } ); //设置是可以发生形变的
// construct 8 blend shapes
for ( var i = 0; i < 8; i ++ ) {
var vertices = [];
for ( var v = 0; v < geometry.vertices.length; v ++ ) {
vertices.push( geometry.vertices[ v ].clone() );
if ( v === i ) {
vertices[ vertices.length - 1 ].x *= 2;
vertices[ vertices.length - 1 ].y *= 2;
vertices[ vertices.length - 1 ].z *= 2;
}
}
geometry.morphTargets.push( { name: "target" + i, vertices: vertices } );
}
geometry = new THREE.BufferGeometry().fromGeometry( geometry );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
...
for(var i = 0; i < ;i++){
mesh.morphTargetInfluences[i] = value; //value介于0-1,vertices中各个点的倍数
}
实例部分
var tTC = new THREE.BoxGeometry(1,1,1);
var tTMa = new THREE.MeshBasicMaterial({color: 0x22ffff,morphTargets: true,transparent: true,opacity: 0.4});
var vertices = [],len = tTC.vertices.length;
for ( var v = 0; v < len; v ++) {
vertices.push( tTC.vertices[ v ].clone() );
if ( v%4 < 2 ) {
vertices[ v ].y += 3.5;
}
tTC.morphTargets.push( { name: "target" + v, vertices: vertices } );
}
tTC = new THREE.BufferGeometry().fromGeometry( tTC );
var tTM = new THREE.Mesh( tTC, tTMa );
tTM.position.set(-2,0.5,0);
scene.add(tTM);
var nOpacity = tTM.material.opacity;
var t;
var testTween = new TWEEN.Tween({nOpacity: 0.4,t: 0}).to({nOpacity: 1,t: 0.1},3000).easing(TWEEN.Easing.Bounce.Out).onUpdate(
function(){
tTM.material.opacity = this.nOpacity;
for(var i = 0;i < len;i++){
if( i%4 < 2){
tTM.morphTargetInfluences[i] = this.t;
}
}
}
);
testTween.start();
//获取轨道控制器的摄像机
var targetZoom = orbit.object;
var tweenZoomCamera = new TWEEN.Tween(targetZoom).to({zoom: 4}, 1000
).easing(TWEEN.Easing.Linear.None).onUpdate(function(){
orbit.object.zoom = this.zoom;
orbit.object.updateProjectionMatrix();
}).onComplete(function(){
orbit.object.zoom = 4;
});
//连接上一个动画,按照顺序执行
tweenRotationOrbit.chain(tweenZoomCamera);
tweenRotationOrbit.start();