Question

我想在不使用tween.js

的情况下重写下面的代码

svg动画/当前代码（使用tween.js）

var path1 = document.getElementById('path1');
var path2 = document.getElementById('path2');
var pathLength = path2.getTotalLength();
var tween = new TWEEN.Tween({ offset: 1 }).to({ offset: pathLength }, 1000 )
  .onUpdate(function(){
    path1.setAttribute('startOffset', this.offset);
  }).repeat(5)
  .start();
animate = function(){
  requestAnimationFrame(animate);
  TWEEN.update();
}
animate();

Answer 1

是的，可以使像这样的函数来计算每个步骤的时间：

var path1 = document.getElementById('path1');
var path2 = document.getElementById('path2');
var pathLength = path2.getTotalLength();

function setOffset(base, target, duration){
    for (let index = base; index <= target; index++) {
        setTimeout( ()=>{
            base.setAttribute('startOffset', index);
            //console.log(`Index ${index} time: ${index * duration / target}ms`);
        }, index * target / duration)
    }
}

setOffset(1, pathLength, 1000)

要获得平滑的动画，您应该在循环上添加更多的步骤：

每秒60帧的示例。

var path1 = document.getElementById('path1');
var path2 = document.getElementById('path2');
var pathLength = path2.getTotalLength();

function setOffset(base, target, duration) {
    for (let index = 0; index <= target * 60; index++) {
        setTimeout( ()=>{
            // base.setAttribute('startOffset', index / 60);
            console.log(`Index ${index / 60} time: ${index * target / duration}ms`);
        }, index * target / duration)
    }
}

setOffset(1, pathLength, 1000)

不使用tween.js可以是一样的吗？

1 个答案: