从顶部捕捉SVG路径动画(不在左侧）

Snap SVG path animation from the top not left

本文关键字：动画 顶部 SVG 路径      更新时间：2023-09-26

我有一些SVG，我想在悬停时制作动画，我现在已经完成了90%，然而，实际的动画看起来并不太好，我希望它看起来几乎是向上滑动的，但目前它看起来像是从左边进出。

我在这里创建了一个Fiddle：http://jsfiddle.net/SeriousJelly/qhaqrju5/1

    $(function() {
    //Grab an array of all the main SVG Elements
    var containers = $(".category .item a");
    //Define some vars that we will use later
    var speed = 1000;
    var animation = mina.backout;
    //Loop through all of these containers and insert the SVG's
    containers.each(function( index ) {
        //Get each of our SVG tags
        var s = Snap(".animated-overlay.svg-" + index);
        //Define our Paths
        var defaultBluePath = "M89.73,22.34c0,0-11.02-2.41-18.56-2.41c-17.36,0-31.17,6.23-53.67,6.23c-9.94,0-17.48-1.19-17.48-1.19V0h89.72V22.34z";
        var defaultWhitePath = "M17.5,26.17c-9.94,0-17.48-1.19-17.48-1.19v3.05c0,0,7.55,0.67,17.48,0.67c19.45,0,36.41-7.51,53.77-7.51c10.51,0,18.47,2.01,18.47,2.01v-0.86c0,0-11.02-2.41-18.56-2.41C53.81,19.94,40,26.17,17.5,26.17z";
        //Define our Hover Paths
        var hoverBluePath = "M0.02,0 h89.72 v13.25 h-89.72z";
        var hoverWhitePath = "M0,13.2 h89.75 v0.7 h-89.75z";
        //Load up the default paths in the SVG
        var bluePath = s.path(defaultBluePath);
        var whitePath = s.path(defaultWhitePath);
        //Define our Default Path Atributes
        bluePath.attr({ fill: "#16325C" });
        whitePath.attr({ fill: "#FFFFFF" });
        //Let's group our paths, it doesn't seem like you can animate the whole group though :(
        var paths = s.group(bluePath, whitePath);
        //Animate on Mouse Enter
        $(containers[index]).mouseenter(function() {
            bluePath.animate({ path: hoverBluePath }, speed, animation);
            whitePath.animate({ path: hoverWhitePath }, speed, animation);
        });
        //Animate on Mouse Leave, return the paths to the default
        $(containers[index]).mouseleave(function() {
            bluePath.animate({ path: defaultBluePath }, speed, animation);
            whitePath.animate({ path: defaultWhitePath }, speed, animation);  
        });

    });
});

如果有人能看一看并帮助整理动画或解释它是如何工作的，那就太好了？

提前感谢

更新：使用了更好的defaultWhitePath，现在过渡顺利。

        //Define our Paths
        var defaultBluePath = "M0,0 L0,25 C42,36 50,11 90,23 L90,0";
        var defaultWhitePath = "M0,25 C42,36 50,11 90,23 L90,25 C50,11 42,46 0,30Z";
        //Define our Hover Paths
        var hoverBluePath = "M0.02,0 L0,13 L90,13 L90,0 Z";
        var hoverWhitePath = "M0,13 L90,13";

在FF上测试的上述变化。

相关文章：