# StoryPanel

**Repository Path**: withtimer/StoryPanel

## Basic Information

- **Project Name**: StoryPanel
- **Description**: 一个纯粹的WEB动画库，纯粹的JavaScript,支持动画融合，动画序列，自定义动画，各种回调，可以很方便的制作 各类平台的年终总结，如：支付宝年终总结，酷狗音乐年终总结，等等。它的使用范围远远不止于此。
发挥你的想象力，做任何你喜欢的动画效果。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 1
- **Created**: 2020-01-06
- **Last Updated**: 2025-01-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# StoryPanel

#### 它是什么？
 一个纯粹的WEB动画库，纯粹的JavaScript,支持动画融合，动画序列，自定义动画，各种回调，可以很方便的制作      各类平台的年终总结，如：支付宝年终总结，酷狗音乐年终总结，等等。它的使用范围远远不止于此。
 发挥你的想象力，做任何你喜欢的动画效果。

#### 重点

 StoryPanel的每一个动画实例都是基于一个Dom对象的（比如一个div，一个img....）。这意味着你可以直接操作一    个StoryPanel对象，给它运行
 各种各样的动画。

#### 怎么使用？

#### 1.  第一步，毫无疑问，当然是引入你的工程（ES6）。
    例如：
    script标签引入<script src="StoryPanel/index.js"></script>

#### 2.  创建StoryPanel对象。
    例如：
    <div class="box" id="box"></div>
    <script>

     let dom = document.getElementById("box");  
     let action2 = new StoryPanel(dom); //一个StoryPanel对象绑定一个Dom元素
     //do something....
    </script>
   
#### 3.  如何创建一个动画。
    例如：
    <div class="box" id="box"></div>
    <script>

     let dom = document.getElementById("box");  
     let action = new StoryPanel(dom); //一个StoryPanel对象绑定一个Dom元素
     let m1 =action.sizeTo({x:300,y:200},2000,CubeBezierType.Power2);
     m1.start(); 

    //or 
    //action.sizeTo({x:300,y:200},2000,CubeBezierType.Power2).start()

    Tip: 没一个StoryPanel对象创建的动画（除了序列动画）都将返回一个Object
    它的结构如下：
    {start:func,symp:symp,time:time};

    //start -> function  运行动画
    //symp  -> 动画唯一标识
    //time  -> 动画时长
    
    </script>
   
#### 4.  创建融合动画。<br>
   
    StoryPanel实例化的对象有一个 createFusion 方法，用于创建融合动画。
    
    例如:
    下面创建一个边放大边渐变颜色的融合动画。

    let dom2 = document.getElementById("box");
    let action = new StoryPanel(dom2);
    let m1 =action.scaleTo({x:2,y:2},2000,CubeBezierType.Power2);
    let m2 =action.fadeBgColor({r:255,g:0,b:0,a:1},2000,CubeBezierType.Power2);
    action.createFusion(m1,m2).start();
    

#### 5. 创建序列动画。<br>

   StoryPanel实例化的对象有一个 createSequences 方法，用于创建融合动画。
   
   例如:<br>
   下面创建一个先放大，后渐变的序列动画。

    let dom2 = document.getElementById("box");
    let action = new StoryPanel(dom2);
    let m1 =action.scaleTo({x:2,y:2},2000,CubeBezierType.Power2);
    let m2 =action.fadeBgColor({r:255,g:0,b:0,a:1},2000,CubeBezierType.Power2);
    action.createSequences(m1,m2);
    action.startAnimtionFormSequences();
   
    //当然你也可以将融合动画加入到序列中去。

    例如：
  
    let dom2 = document.getElementById("box");
    let action = new StoryPanel(dom2);
    let m1 =action.scaleTo({x:2,y:2},2000,CubeBezierType.Power2);
    let m2 =action.fadeBgColor({r:255,g:0,b:0,a:1},2000,CubeBezierType.Power2);
    let m3 =  action.createFusion(m1,m2);
    let m4 =action.fadeBgColor({r:255,g:255,b:0,a:1},2000,CubeBezierType.Power2);
    action.createSequences(m3,m4);
    action.startAnimtionFormSequences();
   

#### 6. CubeBezierType都有什么。
   
   CubeBezierType都是动画曲线。它有如下内容：

    Linner,
    Easy,
    EasyOut,
    EasyIn,
    EasyInOut,
    Power2,
    Power5,
    Arc,
    Bow,
    Bounce,
    Elastic

#### 7. 内置动画。<br>
  
    moveBy,
    moveTo,
    sizeTo,
    scaleTo,
    scaleBy,
    rotateTo,
    rotateBy,
    fadeOpacity,
    fadeBgColor,
    fadeFontColor,
    delayTime,
    callBackFunc

#### 8. 如何创建自定义动画。
   
   StoryPanel实例化的对象都存在一个 createCustiomAnimate 方法，用于创建自定义动画。
   方法签名：createCustiomAnimate({draw, duration,type}) 
   例如：<br>
   下面创建一个把一个正方形的div,变换成一个圆形的div。
   
    let dom = document.getElementById("box");
    let action = new StoryPanel(dom2);
    let ac1 =  action.createCustiomAnimate({
        draw:(p)=>{ 
            dom.style.borderRadius = p*100 /2 +"%";
        },
        duration:2000,
        type:CubeBezierType.Power2
    })
    ac1.start();

  //Tips
  //其中p的值是0---1，逐渐增大，p从0变化到1的时间恰好是duration。

#### 9. QA环节<br>

   a.如果你想一个动画执行完毕之后，触发一个事件。你的sequences事件，可以是这样。
      
     anyaction(scaleTo,rotateTo,...) -> callBackFunc
    
    
   b.如果你想一个动画执行完毕后，或者中途，执行另一个dom的动画。
      
    anyaction ->allBackFunc(call) ->anyaction->....
    
    然后在call中执行开始另一个dom动画。如：call (){ anyaction -> anyaction -> ...}


   c.如果你想一个dom执行完一个动画后，休息一下，再执行另一个动画。

    anyaction -> delayTime ->anyaction -> ....

 
   d.如何创建复杂的动画，例如，类似于支付宝的年终总结。  
     
    答案是可以的，不过你将操作数量众多的dom。这部分，Me正试图解决这种问题。


   e.它能减少写css的代码量吗。

    这个不好说，如果是考虑动画部分，确实是这样，但是具体到每一个dom的显示形式，还是需要写css的，毕竟它只是
    一个动画Lib.


   f.能不能将不同的Dom动画融合起来。

     这是不可以的，因为它是基于特定的dom的动画实例。在创建StoryPanel的时候就必须指定绑定的dom。
     将不同dom的（或者说是不同StoryPanel的实例）的动画融合起来将会导致找不到指定dom从而报错。
     同理，一个dom的动画序列也不可以加入不同的dom动画。   


   e.其他问题可以直接右键至2577388057zjl@gmail.com



#### 10. 下一个版本。

    a.更多的内置。
      将会有更多的内置动画，更多的动画曲线，包括自定义曲线。
    b.更方便的回调。
      基于帧级别的，任意动画过程事件监听。
    c.更好的性能。
      嗯，是的。