Gatsby 中的 Snap.svg 缓动答案

【问题标题】：Snap.svg easing in GatsbyGatsby 中的 Snap.svg 缓动
【发布时间】：2020-06-25 00:14:15
【问题描述】：

在使用 Gatsby 时，我如何从 Snap.svg 访问 mina？

我可以通过import Snap from 'snapsvg' 完美地导入Snap 对象。但是当我尝试使用mina 或使用import Snap, { mina } from 'snapsvg' 时，它告诉我“未定义mina”。

我的 gatsby-node.js 设置我的 Webpack 以允许导入：

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',
            },
        },
    })
}

我会使用Snap.svg-cjs 或react-snap-svg，但它们似乎已经过时了。任何允许访问mina 或 Snap.svg 的其他缓动功能的解决方案？

【问题讨论】：

标签： javascript reactjs svg gatsby snap.svg

【解决方案1】：

我今天刚做了这个，在我解决之前遇到了你的问题。

mina 包只导出数学函数，所以你可以传递你自己的，线性是最简单的：

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

你可以在这里找到其余的：https://github.com/adobe-webplatform/Snap.svg/blob/master/src/mina.js#L241

【讨论】：