Extend lottie-web for new animation

[lucemia]

測試需要花多少工作才能夠 extend bodymovin 到一個特定的版型

[lucemia]

bodymovin 沒有支援 displacement map
但 SVG 是有支援的 https://codepen.io/osublake/pen/WQyBJb

extension 有定義 id 27 = displacementMap

lottie-web/build/extension/bodymovin/jsx/utils/effectsHelper.jsx

Lines 7 to 35 in 57762c0

	var effectTypes = {
	sliderControl: 0,
	angleControl: 1,
	colorControl: 2,
	pointControl: 3,
	checkboxControl: 4,
	group: 5,
	noValue: 6,
	dropDownControl: 7,
	customValue: 9,
	layerIndex: 10,
	maskIndex: 11,
	tint: 20,
	fill: 21,
	stroke: 22,
	tritone: 23,
	proLevels: 24,
	dropShadow: 25,
	radialWipe: 26,
	displacementMap: 27,
	matte3: 28,
	gaussianBlur2: 29,
	twirl: 30,
	mesh_warp: 31,
	ripple: 32,
	spherize: 33,
	freePin3: 34,
	ccPageTurn: 100
	};

資料有正確的 export 出來

{
                            "ty": 27,
                            "nm": "Displacement Map 1",
                            "np": 10,
                            "mn": "ADBE Displacement Map",
                            "ix": 5,
                            "en": 1,
                            "ef": [
                                {
                                    "ty": 10,
                                    "nm": "Displacement Map Layer",
                                    "mn": "ADBE Displacement Map-0001",
                                    "ix": 1,
                                    "v": {
                                        "a": 0,
                                        "k": 7,
                                        "ix": 1
                                    }
                                },
                                {
                                    "ty": 7,
                                    "nm": "Use For Horizontal Displacement",
                                    "mn": "ADBE Displacement Map-0002",
                                    "ix": 2,
                                    "v": {
                                        "a": 0,
                                        "k": 5,
                                        "ix": 2
                                    }
                                },
                                {

但是 player 沒有對 id=27 反應

lottie-web/player/js/elements/svgElements/SVGEffects.js

Lines 12 to 35 in 57762c0

	filterManager = new SVGTintFilter(fil, elem.effectsManager.effectElements[i]);
	} else if (elem.data.ef[i].ty === 21) {
	count += 1;
	filterManager = new SVGFillFilter(fil, elem.effectsManager.effectElements[i]);
	} else if (elem.data.ef[i].ty === 22) {
	filterManager = new SVGStrokeEffect(elem, elem.effectsManager.effectElements[i]);
	} else if (elem.data.ef[i].ty === 23) {
	count += 1;
	filterManager = new SVGTritoneFilter(fil, elem.effectsManager.effectElements[i]);
	} else if (elem.data.ef[i].ty === 24) {
	count += 1;
	filterManager = new SVGProLevelsFilter(fil, elem.effectsManager.effectElements[i]);
	} else if (elem.data.ef[i].ty === 25) {
	count += 1;
	filterManager = new SVGDropShadowEffect(fil, elem.effectsManager.effectElements[i]);
	} else if (elem.data.ef[i].ty === 28) {
	//count += 1;
	filterManager = new SVGMatte3Effect(fil, elem.effectsManager.effectElements[i], elem);
	} else if (elem.data.ef[i].ty === 29) {
	count += 1;
	filterManager = new SVGGaussianBlurEffect(fil, elem.effectsManager.effectElements[i]);
	} else if (elem.data.ef[i].ty === 100) {
	filterManager = new SVGCCPageTurnEffect(fil, elem.effectsManager.effectElements[i], elem);
	} if (filterManager) {