概述
Dynamics.js 是一个JS库，能为你提供9种标准的动效，你可以制定其中的持续时间、频率、预期尺寸和强度等数据，创造出符合物理效果的动效。
它通过可视化定制接近生活的物理动效， 为体验者带来真实的生活反馈感受，无需过多描述，广泛的应用场景，使其流行。
官网 http://dynamicsjs.com

安装

npm install dynamics.js

缓动增强

<script src="./js/vue.js"></script>
<script src="./js/dynamics.js"></script>
<script>
let vm = new Vue({
    el: '#app',
    methods: {
        onTest() {
            let oBox = document.getElementById('box');
            dynamics.animate(oBox, {
                left: '270px'
            },{
                type: dynamics.spring,
                duration: 500,
                frequency: 120,
                friction: 140,
                complete: function() {
                    dynamics.animate(oBox, {
                        left: '660px'
                    },{
                        type: dynamics.spring,
                        delay: 330,
                        duration: 400,
                        frequency: 110,
                        complete: function() {
                            oBox.style.left = '-120px'
                        }
                    })
                }
            }
            
            )
        }
      }
  }
)
</script>

延迟进入

<!--堆代码 duidaima.com -->
animateSlider() {
        let oLis = document.getElementById('items').getElementsByTagName('li');
        for (let i = 0; i < oLis.length; i++) {
            dynamics.animate(oLis[i], {
                translateX: '100%',
                opacity: 1
            }, {
                type: dynamics.gravity,
                duration: 500,
                bounciness: 279,
                elasticity: 89,
                delay: i * 350
            })
        }
}

展开缓冲

<div id="app">
  <div class="nav">
      <span @click="packup">收起</span>
      <span @click="unfold">展开</span>
  </div>      
  <div id="content" class="content">
      <ul>
          <li>旗木卡卡西</li>
          <li>旗木卡卡西</li>
          <li>旗木卡卡西</li>
          <li>旗木卡卡西</li>
          <li>旗木卡卡西</li>
          <li>旗木卡卡西</li>
          <li>旗木卡卡西</li>
      </ul>
  </div>
</div>
<script src="./js/vue.js"></script>
<script src="./js/dynamics.js"></script>
<script>
 let vm = new Vue({
     el: '#app',
     methods: {
         unfold() {
             let oContentPanel = document.getElementById('content');
             let oLis = oContentPanel.getElementsByTagName('li');
             dynamics.animate(oContentPanel, {
                 opacity: 1,
                 scale: 1
             },{
                 type: dynamics.spring,
                 frequency: 200,
                 friction: 270,
                 duration: 800
             })

             for(let i=0; i< oLis.length; i++){
                 dynamics.css(oLis[i],{
                     opacity: 0,
                     translateY: 20
                 })

                 dynamics.animate(oLis[i],{
                     opacity: 1,
                     translateY: 0
                 },{
                     type: dynamics.spring,
                     frequency: 300,
                     friction: 445,
                     duration: 1000,
                     delay: 100 + i*65
                 })
             }

         },
         packup () {
             let oContentPanel = document.getElementById('content');
             let oLis = oContentPanel.getElementsByTagName('li');
             dynamics.animate(oContentPanel, {
                 opacity: 0,
                 scale: 0,
             },{
                 type: dynamics.easeInOut,
                 duration: 330,
                 friction: 100
             })
         }
     }
 })
</script>

心动

<div id="app">
  <div class="wrap" @click="onLike">
      <img id="heart" v-show="isCheck" src="./images/heart_s.png" alt="" width="60">
      <img id="heart02" v-show="!isCheck" src="./images/heart.png" alt="" width="60">
  </div>
</div>
<script src="./js/vue.js"></script>
<script src="./js/dynamics.js"></script>
<script>
  let vm = new Vue({
      el: '#app',
      data: {
          isCheck: false,
      },
      methods: {
          onLike() {
              let oHeart = document.getElementById('heart');
              let oHeart02 = document.getElementById('heart02');
              if(this.isCheck){
                  dynamics.animate(oHeart, {
                      scale: .3,
                      opacity: 0
                  },{
                      type: dynamics.bounce,
                      change: (el,pro)=>{
                          if(pro > 0.5){
                              this.isCheck = false;
                          }
                      }
                  })
              }else {
                  this.isCheck = true;
                  dynamics.animate(oHeart, {
                      scale: 2
                  },{
                      type: dynamics.bounce
                  })
              }
          }
      }
  })
</script>