使用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屋!