foreignObject - 技术栈

1. 为什么会使用到foreignObject

因为我们日常开发中会涉及到大量的动画，基本上都是基于lottie-web来开发动画的，lottie-web目前有两种主流的动画渲染模式：svg和html，目前大部分的动画都会使用svg来开发动画，但是不可避免的就会遇到一个问题，需要动态替换动画中的元素，所以就用了foreignObject，它可以允许我们在svg中嵌入html，如果不使用foreignObject就需要手动写svg标签，很麻烦。

2. foreignObject目前有哪些问题

foreignObject这个标签也有一些问题，它在移动端对于一些样式不支持，目前已知的有：position，opacity，transform，transition，一旦要是在css文件中使用了这些属性，现象就是foreignObject包裹的html元素会都展示在页面最顶部，属性值无效。

3. 开发中主要遇到了哪些问题

foreignObject点击之后包裹的html元素会出现一个高亮的边框
1. 解决方案：去掉foreignObject的聚焦边框和foreignObject的父元素的outline

css 复制代码

foreignObject {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-modify: read-only;
  touch-action: none;

  /* 完全移除聚焦边框*/
  &:focus {
    outline: none !important;
    box-shadow: none !important;
    border: 0 !important;
    -webkit-focus-ring-color: transparent;
  }
  &:focus-visible {
    outline: none !important;
  }
}

g:has(> foreignObject) {
  outline: none;
}

/* 针对触摸设备优化，点击高亮颜色处理 */
@media (pointer: coarse) {
  foreignObject *:active {
    -webkit-tap-highlight-color: transparent;
  }
}

动画在pc端可以正常播放，移动端播放到某一帧就播放不了
1. 问题：我所遇到的基本上都是动画中某一个预合成图层导致的，应该是视觉同学使用了某种高级语法导致的
2. 解决方案：重新导出一份动画文件，或者删除掉指定的图层
图层位置，导致关闭按钮被遮挡住了，无法响应点击事件
1. 解决方案：获取到指定图层的dom元素，将其添加到容器最后，这样的话其优先级就最高了

js 复制代码

const handleChangeNodePosition = (animation: any, container: Element | null, layer: string) => {
    const node = getAnimationElement({ animation, layer });
    if (node) {
      container?.appendChild(node);
    }
  };

动画中的文字用自定义字体在某些ios手机上不起作用
1. 问题：对应的文字没有用html标签包裹起来，导致自定义字体的样式没有继承下来
2. 解决方案：所有使用到自定义字体的文案都要用html标签包裹起来
lottie导出的蒙层无法覆盖满屏幕
1. 问题：我们的视觉导出的动画json文件画布都是固定的：750*1624，这种情况是已经有一个弹窗了，此时动画还要再展示另外一个横幅或者动画，此时的蒙层在一些手机上就无法覆盖满屏幕
2. 解决方案：用MutationObserver来观测这个蒙层元素，将其元素上的动画属性全都拷贝到和容器同级的一个div元素上面，这样的话原本动画中的蒙层可以隐藏掉，我们控制的就是这个div元素了
动画播放结束后类似于指导性的比如说小手指等还是继续有动画
1. 现象：动画到了指定帧之后所有动画就都结束了，但是小手指此时还是要一直动下去来吸引用户点击
2. 解决方案：lottie-web是有API可以支持循环某一段动画的，我们是在lottie-web的基础上封装了一个库，支持分段循环播放

4. 目前还存在的问题

lottie是需要有一定的网络条件支持的，在移动端特别是弱网情况下用户体验是很差的，对此还没有好的的降级方案和完善的线上监控
不好调试，完全依赖于视觉导出的json文件，一旦动画出现问题不好定位到底是哪里的问题