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) {

	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
	};

	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) {

Extend lottie-web for new animation #22

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions