Gatsby 中的 Snap.svg 缓动

Question

How would I access mina from Snap.svg when using Gatsby?

I can import the Snap object through import Snap from 'snapsvg' perfectly fine. But when I try to use mina or use import Snap, { mina } from 'snapsvg' it tells me that "mina is not defined."

My gatsby-node.js sets up my Webpack to allow import:

exports.onCreateWebpackConfig = ({ stage, actions }) => {
    actions.setWebpackConfig({
        module: {
            rules: [
                {
                    test: require.resolve(
                        'snapsvg/dist/snap.svg.js'
                    ),
                    use:
                        'imports-loader?this=>window,fix=>module.exports=0',
                },
            ],
        },
        resolve: {
            alias: {
                snapsvg: 'snapsvg/dist/snap.svg.js',
            },
        },
    })
}

I would use Snap.svg-cjs or react-snap-svg but they seem to be pretty outdated. Any solutions to allow access to mina or some other easing function for Snap.svg?

Answer 1

I just did this today and came across your question before I'd worked it out.

The mina package just exports mathematical functions so you can pass your own, linear is the easiest:

el.animate(
  { d: paths },
  5000,
  (n) => n, // linear function from mina
  () => {
    // callback stuff
  },
);

The rest you can find here: https://github.com/adobe-webplatform/Snap.svg/blob/master/src/mina.js#L241