我正在使用Popmotion,Pose和flubber来在React Route更改之间变形和过渡两个paths
的SVG。
与
完美搭配import posed from 'react-pose';
import { tween, easing } from 'popmotion';
import { interpolate } from 'flubber';
const pathIds = Object.keys(paths);
const morphTransition = ({ from, to }) =>
tween({
from: 0,
to: 1,
duration: 1000,
ease: easing.easeInOut
}).pipe(interpolate(from, to));
const Background = posed.path(
pathIds.reduce((config, id) => {
const path = paths[id].path;
config[id] = {
d: path,
transition: morphTransition
};
return config;
}, {})
);
路径定义为
const paths = {
first: {
path:
'M 262.9,252.2 C 210.1,338.2 212.6,487.6 288.8,553.9 372.2,626.5 511.2,517.8 620.3,536.3 750.6,558.4 860.3,723 987.3,686.5 1089,657.3 1168,534.7 1173,429.2 1178,313.7 1096,189.1 995.1,130.7 852.1,47.07 658.8,78.95 498.1,119.2 410.7,141.1 322.6,154.8 262.9,252.2 Z',
pathAlt:
'M 262.9,252.2 C 210.1,338.2 273.3,400.5 298.5,520 323.7,639.6 511.2,537.2 620.3,555.7 750.6,577.8 872.2,707.4 987.3,686.5 1102,665.6 1218,547.8 1173,429.2 1128,310.6 1096,189.1 995.1,130.7 852.1,47.07 658.8,78.95 498.1,119.2 410.7,141.1 322.6,154.8 262.9,252.2 Z'
},
second: {
path:
'M 415.6,206.3 C 407.4,286.6 438.1,373.6 496.2,454.8 554.3,536.1 497,597.2 579.7,685.7 662.4,774.1 834.3,731.7 898.5,653.4 962.3,575 967.1,486 937.7,370 909.3,253.9 937.7,201.5 833.4,105.4 729.3,9.338 602.2,13.73 530.6,41.91 459,70.08 423.9,126.1 415.6,206.3 Z',
pathAlt:
'M 415.6,206.3 C 407.4,286.6 415.5,381.7 473.6,462.9 531.7,544.2 482.5,637.6 579.7,685.7 676.9,733.8 826.2,710.7 890.4,632.4 954.2,554 926.8,487.6 937.7,370 948.6,252.4 937.7,201.5 833.4,105.4 729.3,9.338 602.2,13.73 530.6,41.91 459,70.08 423.9,126.1 415.6,206.3 Z'
},
third: {
path:
'M 383.8,163.4 C 335.8,352.3 591.6,317.1 608.7,420.8 625.8,524.5 580.5,626 647.3,688 714,750 837.1,760.5 940.9,661.5 1044,562.3 1041,455.8 975.8,393.6 909.8,331.5 854.2,365.4 784.4,328.1 714.6,290.8 771.9,245.2 733.1,132.4 694.2,19.52 431.9,-25.48 383.8,163.4 Z',
pathAlt:
'M 383.8,163.4 C 345.5,324.9 591.6,317.1 608.7,420.8 625.8,524.5 595.1,597 647.3,688 699.5,779 837.1,760.5 940.9,661.5 1044,562.3 1068,444.4 975.8,393.6 884,342.8 854.2,365.4 784.4,328.1 714.6,290.8 820.3,237.2 733.1,132.4 645.9,27.62 422.1,1.919 383.8,163.4 Z'
}
};
但是,如何在所有其他时间在paths[id].path
和paths[id].pathAlt
之间循环和变形。例如,我正在尝试在svg
不断发展的情况下达到shown here by codrops的结果。
答案 0 :(得分:0)
找出更改URL时哪个函数使形状变形。
然后在setInterval()中使用该函数在路径和路径alt之间切换,而不是使用不同的路径。