- 一款可以配置起点和终点以及定制展示区域的 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 组件是一个纯展示 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
https://github.com/funky-tiger/media-show-card/blob/master/README.md
##issues