Media-show-card NPM

简单介绍

一款可以配置起点和终点以及定制展示区域的 dom 视频展示卡片信息的插件

插件原理

<AnimationControl/> 对原组件进行分割，将其视频播放和数据动画展示分开，分为 <AnimationWrapper.VideoBg/>和<control/>

control 是一个高阶组件，在 control 中, 通过 this.props.control.getAnimationShow()来获取通过 props 的传值
同时，通过引入组件来进行对原组件的增强从而增加原组件动画渲染的特性
AnimationControl 组件的主要作用是对传入的数据和通过 AnimationControl.VideoBg 获取的相应时间节点进行处理，将处理后的数据和配置等传入给高阶组件 control。它对 AnimationWrapper.VideoBg 和 control 进行了深入一层的包裹，该组件需传入 src/serializeData 和 serializeDom.
该组件中通过 AnimationControl.VideoBg 组件获取的动画展示的时间节点

<AnimationControl.VideoBg />

AnimationControl.VideoBg 组件是一个纯展示 video 组件，需要传入 video 的 src 和时间节点 timeout 以及 handleToggleNextShow 的回调（该函数会在到相应时间节点时触发）等一些配置，其组件内部主要功能是解析该 video，获取相关时间参数，返回给主组件 AnimationControl 使用
conntrol 是一个高阶组件，实现对 AnimationControl 组件的增强，使组件获得{...props}属性。它返回了通过 AnimationShow 组件包裹后的 dom，并生成动画。它对外暴露了 getAnimationShow 方法，该方法需要传入三个参数，第一个参数是动画消失时机的回调 handleFadeOutShow，第二个参数是相关动画展示的一些配置和动画的数量等，第三个参数是相应动画对应的 dom，通过 props.children 获取到传入的 dom，将其 dom 再次传给最终的动画组件 AnimationShow
AnimationShow 组件是动画组件，它将其动画分为 5 段，1 段：图标旋转，2 段： svg 画线，3 段和 4 段画出两个粗细不同的直线，最终 5 段动画来渲染通过高阶组件传入的 dom, 该组件需要传入一些配置...

使用方法

安装
npm i media-show-card -S
组件中引入
import MediaCardShow from 'media-show-card'
组件中传入相应参数
<MediaCardShow src={videoSrc} serializeData={serializeData} serializeDom={this.serializeDom} />
相关参数（3 个必传）
src -> string 视频源
serializeData -> object 动画在相应时间节点展示的相关配置
serializeDom -> func 动画在相应时间节点展示的 DOM
例子:
serializeData: [ { showSecond: 1, data: [ { startPoint: { x: 450, y: 300 }, endPoint: { x: 600, y: 430 }, frameType: "lucent", transparentDown: false, frameWidth: 500, frameHeight: 200, timeout: 3800 } ] } ]

展示动画 DOM:

`serializeDom = currentTime => { switch (currentTime) { case 0: return (
        <div>
          <div style={{ fontSize: "50px",color:'red' }}>传递的组件1</div>
        </div>
      );
    }
}`

serializeData 参数中具体意义
- @param startPoint Object 展示区卡片的起点坐标
- @param endPoint Object 展示区卡片的终点坐标
- @param frameType 展示区类型： A. lucent string 半透明 B. parent string 全透明
- @param transparentDown boolen 全透明情况下的下方展示(必须 frameType 为 parent)
- @param frameWidth number 展示区宽度
- @param frameHeight number 展示区高度
- @param timeout number 动画展示时长(默认4000毫秒)

注意点

每个动画的配置和 dom 的数量/结构是否对应(参考上方例子或者该插件的 example 目录)
一个时间节点有多个动画的情况，dom 的结构要同级(除了第一层 dom，其他不要出现父子结构)
默认在不传动画展示 DOM 情况下不显示整个动画过程以及 DOM
使用 AnimationControl 组件时确保 serializeData 有值
推荐写法 {this.state.serializeData.length !== 0 && ( <AnimationControl src={video1} serializeData={serializeData} serializeDom={this.getDom} /> )}
视频默认开启自动无线循环播放

开发过程中所遇到的问题

<1> AnimationShow 组件内存泄漏
原因（2 个）
A. 组件卸载时没有及时清除定时器. 解决办法:清除所有定时器: componentWillUnmount() {clearTimeout(timer); } B. 组件还没挂载时/组件卸载时使用 setState()等异步方法解决办法:清除所有的 state 状态: this.setState = (state, callback) => {return; };
<2> 组件的 props 丢失问题
原因
A.因为该组件是通过高阶函数 control 进行包裹，其中的 props 可能没处理好. 解决办法:在高阶组件中将{this.props}和新的 {props} 合并后再传给代理组件 ProxyComponent

##homepage