Question

我正在使用Scrollmagic创建两个SVG动画，使用两个脚本，但代码是多余的并且重复。有没有办法让它更清洁/更高效，将所有内容组合在一个脚本中？谢谢。我使用的代码是这样的：

<script>
// START of animation 1

function pathPrepare ($el) {
    var lineLength = $el[0].getTotalLength();
    $el.css("stroke-dasharray", lineLength);
    $el.css("stroke-dashoffset", lineLength);
    }

var $animation1 = $("path#animation1");
pathPrepare($animation1);
var tween = new TimelineMax()
.add(TweenMax.to($animation1, 3, {strokeDashoffset: 0, ease:Linear.easeNone}))

var scene = new ScrollMagic.Scene({triggerElement: "#animationonediv", duration: 300, tweenChanges: true})
.setTween(tween)
.addTo(controller);

</script>

<script>
// START of animation 2, which is in essence a copy of the previous code

function pathPrepare ($el) {
    var lineLength = $el[0].getTotalLength();
    $el.css("stroke-dasharray", lineLength);
    $el.css("stroke-dashoffset", lineLength);
    }

var $animation1 = $("path#animation2");
pathPrepare($animation2);
var tween = new TimelineMax()
.add(TweenMax.to($animation2, 3, {strokeDashoffset: 0, ease:Linear.easeNone}))

var scene = new ScrollMagic.Scene({triggerElement: "#animationtwodiv", duration: 300, tweenChanges: true})
.setTween(tween)
.addTo(controller);

</script>

Answer 1

你基本上可以做这样的事情，所以变量和函数不会重复：

<script>
    // START of animation 1
    function pathPrepare ($el) {
        var lineLength = $el[0].getTotalLength();
        $el.css("stroke-dasharray", lineLength);
        $el.css("stroke-dashoffset", lineLength);
        }

    var $animation1 = $("path#animation1");
    pathPrepare($animation1);
    var tween = new TimelineMax()
    .add(TweenMax.to($animation1, 3, {strokeDashoffset: 0, ease:Linear.easeNone}))

    var scene = new ScrollMagic.Scene({triggerElement: "#animationonediv", duration: 300, tweenChanges: true})
    .setTween(tween)
    .addTo(controller);

    var $animation2 = $("path#animation2");
    pathPrepare($animation2);
    var tween2 = new TimelineMax()
    .add(TweenMax.to($animation2, 3, {strokeDashoffset: 0, ease:Linear.easeNone}))

    var scene2 = new ScrollMagic.Scene({triggerElement: "#animationtwodiv", duration: 300, tweenChanges: true})
    .setTween(tween2)
    .addTo(controller);
</script>

在ScrollMagic中组合补间

1 个答案: