Question

我希望按顺序为正方形设置动画，首先是90度顺时针旋转，然后是简单的x轴平移。这是我使用Snap svg的Javascript代码

r.animate({ transform: 'r90, 100, 200' }, 1000, mina.easein, function() {     
    r.animate( {transform: 't 100 0'}, 1000, mina.easein );
  }
);

可以在此处找到代码笔：https://codepen.io/gauravsingh_/pen/xOVGar

轮换按预期进行，但翻译有问题且意外。

有人可以看看并描述这里出了什么问题吗？

Answer 1

问题是变换不是累积的，所以你需要每次都表达完整的变换。

所以对于第二个回调变换，你需要在里面...

add_filter( 'woocommerce_get_settings_products', 'some_tab_settings', 10, 2 );

function some_tab_settings( $settings, $current_section ) {
    if ($current_section == 'some_settings') {
        echo "settings here";
    } else {
        return $settings;
    }
}

Raphael曾经允许使用t vs T进行相对变换，但在Snap中并非如此。

因此，如果省略r90,100,200，它将假定您想要旋转回0，因为不再设置。请注意，它比这更复杂，因为幕后Snap将使用矩阵，但它可能是最好的思考方式。

因此，随着后续动画的制作，您可以使用平移，旋转，缩放来构建变换字符串。

Snap SVG顺序动画无法按预期工作

1 个答案: