八种响应式VUE动效遮罩转场动画开发

简介：使用前端技术，实现后台管理界面的可供预览视频转场特效，可以选择资源后再选择对应的特效组件进行转场预览，然后组合数据发向后端，在由后端推送到安卓端进行对应的视频转场切换。 

1. 使用技术：vue 、stylus、jquery、svg（核心）、 javascript
2. 目前包括八种转场： 时钟、百叶窗、扇形打开、十字扩展、分割、覆盖、棋盘推进、溶解
3. 核心技术栈：原生javascript、svg中的 viewBox、preserveAspectRatio、path、clip-path、defs、use、rect、image
4. 每个动画具体核心实现：
5. 时钟动画：（ 1.sector.vue ）
   1. 原理：圆的坐标公式、transform坐标移动、path路径
   2. 核心代码：

   3. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width='100%' height='100%' viewBox='0 0 300 200' class="svgBox">
      
        <!-- 定义外部遮罩 -->
        <clipPath id="clipPathDefinition" clipPathUnits="userSpaceOnUse" >
         <rect x='0' y='0' width='300' height='200'/>
        </clipPath>
      
        <!-- 定义扇形运动路径 -->
        <defs>
         <path d="" stroke="#000" class="motionPath" transform="translate(150,100)" id="ring"></path>
        </defs>
      
        <!-- 定义遮罩 -->
        <clipPath id="1_SVGID_2_">
         <use xlink:href="#ring"  style="overflow:visible;"/>
        </clipPath>
      
        <!-- 背景图片 -->
        <image xlink:href="http://img05.tooopen.com/images/20150521/tooopen_sy_125610923736.jpg" x="0" y="0" height="100%" width="100%" preserveAspectRatio="xMidYMid slice"/>  
      
        <!-- 要绘制的扇形 -->
        <g clip-path="url(#1_SVGID_2_)">
          <image xlink:href="" x="-150" y="-100" width="600" height="400" preserveAspectRatio="xMaxYMax meet" class="cp-img" />
        </g>
      
      </svg>

       

   4. 预览效果：
6. 百叶窗动画：（ 2.windows.vue ）
   1. 原理：多个rect遮罩形状运动
   2. 核心代码：

      <!-- 单个遮罩块 -->
      <g>
        <defs>
          <rect id="2_SVGID_15_" y="120" width="300" height="40" class="svgRect" />
        </defs>
        <clipPath id="2_SVGID_16_">
          <use xlink:href="#2_SVGID_15_"  style="overflow:visible;"/>
        </clipPath>
        <g style="clip-path:url(#2_SVGID_16_);">
          <defs>
            <rect id="2_SVGID_17_" width="300" height="200"/>
          </defs>
          <clipPath id="2_SVGID_18_">
            <use xlink:href="#2_SVGID_17_"  style="overflow:visible;"/>
          </clipPath>
          <g transform="matrix(1 0 0 1 -3.814697e-06 0)" style="clip-path:url(#2_SVGID_18_);">
            <image style="overflow:visible;" width="1920" height="1080" :xlink:href="cimg"  transform="matrix(0.1958 0 0 0.2176 -53 -11)">
            </image>
          </g>
        </g>
      </g>

      methods:{
        initEvent(){
          var This = this;
      
          //2. 百叶窗
          $('.sbox-item-2').click(function(){
            console.log('motion 2');
            This.motion($(this),$(this).find('.svgRect'),$(this).fi