使用snap.svg和scrollmagic对形状进行动画处理 [英] Animating shape using snap.svg and scrollmagic

问题描述

我正在尝试创建代码以在用户滚动时为我的标题设置动画.我设法使用2个不同的插件创建了所需的动画:snap.svg和scrollmagic.我对这两个都是陌生的，所以请原谅.

I am trying to create a code to animate my header as the user scrolls. I have managed to create the animations I want using 2 different plugins: snap.svg and scrollmagic. I'm new to both of these so please excuse my noobiness.

此处位于CodePen上: http://codepen.io/anon/pen/dYbPXe

Here it is on CodePen: http://codepen.io/anon/pen/dYbPXe

/* Animation 1 */

                    var speed = 250,
                    easing = mina.easeinout;

                [].slice.call ( document.querySelectorAll( '.header > a' ) ).forEach( function( el ) {
                    var s = Snap( el.querySelector( 'svg' ) ), path = s.select( 'path' ),
                        pathConfig = {
                            from : path.attr( 'd' ),
                            to : el.getAttribute( 'data-path-hover' )
                        };

                    el.addEventListener( 'mouseenter', function() {
                        path.animate( { 'path' : pathConfig.to }, speed, easing );
                    } );

                    el.addEventListener( 'mouseleave', function() {
                        path.animate( { 'path' : pathConfig.from }, speed, easing );
                    } );
                } );


/* Animation 2 */
var scrollMagicController = new ScrollMagic();
var tween = TweenMax.to('.header-shape > path', 0.5, {
    fill: 'rgb(255, 39, 46)'    
});

var scene = new ScrollScene({
    triggerElement: '.background',
    triggerHook: '0',
    duration: 400
}).setTween(tween).addTo(scrollMagicController);
scene.addIndicators();

现在，如果滚动页面，则标题的颜色会更改，如果将标题悬停，则形状也会更改.我想将形状更改绑定到滚动，以便用户滚动时，形状和颜色也会逐渐更改.

Right now, if you scroll the page, the color of the header changes, and if you hover the header, the shape changes. I want to bind the shape change to scroll, so as users scroll, the shape gradually changes as well as the color.

这可能是一件简单的事情(可能是不必要的事情)，但是我花了太多时间在上面，这让我感到沮丧.感谢您的提前帮助.

This might be a simple (maybe unnecessary) thing but I've put wayy too much time into it and it's frustrating me. Thanks for your help in advance.

如果我的问题不清楚，请让我知道，我将尽力澄清.我真的很想要这种效果:(

Please let me know if my question is not clear and I will try to clarify. I really want this effect :(

推荐答案

这就是我的想法: http://codepen.io/ironoxidey/pen/WrXLwM

这似乎就是您所需要的:

This seems to be all you need:

var tween = TweenMax.to('.header-shape > path', 0.5, {
    fill: 'rgb(255, 39, 46)',
    attr: { d : $('a').attr('data-path-hover') }
});

(从JS代码的第25行开始，在动画2"下)

(started on line 25 of your JS code, under Animation 2)

这篇关于使用snap.svg和scrollmagic对形状进行动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！