javascript - 将 Circletype.js 与 jQuery animate 相结合

Question

我想使用 Circletype.js结合 jQuery .animate() 使文本在我为其容器的宽度设置动画时围绕我的 Logo /图像 flex 。

我正在将 .circleType({fluid:true}); 应用于 #demo4 div。这与正确的 css 一起导致文本路径 flex 以适合其容器 (#resize)。

运行代码片段来说明:

1. 手动调整容器大小时，文本半径会发生变化
2. 当通过 .animate() 调整大小时，文本半径不会改变。 为什么不呢？

  $(function() {
    $("#resize").resizable();
    $("#resize").draggable();
  });
  $("button").click(function() {
    $("#resize").animate({
      left: '50px',
      width: '650px'
    });
  });



  $('#demo4').circleType({
    fluid: true,
    dir: -1
  });

 #resize {
   position: relative;
   width: 220px;
   height: auto;
   padding: 0.5em;
   border: 1px solid;
 }
 #resize h4 {
   text-align: center;
   margin: 0;
 }
 .demo-box {
   position: relative;
   max-width: 700px;
   margin: 10% auto;
   color: #476A50;
   background-color: #ccc;
 }
 #logo {
   position: absolute;
   bottom: 44%;
   width: 60%;
   height: auto;
   margin-left: 23%;
 }

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://www.kernjs.com/js/lettering.js"></script>
<script src="http://circletype.labwire.ca/js/circletype.js"></script>
<button>Start Animation</button>
<div id="resize" class="ui-widget-content">
  <h4 class="ui-widget-header">Resize/Drag/Animate</h4>

  <div class="demo-box" id="demo-box4">
    <h2 id="demo4" class="demo strong">Anything in WordPress </h2>

    <img src="http://profondodesign.com/assets/images/pd-Logo-800x320.png" id="logo" />
  </div>
</div>

Answer 1

如果您只想要最终结果，可以试试这个。如果您希望文本也具有动画效果，那么下面的代码将不起作用。看看它是否符合您的要求

  $(function() {
    $("#resize").resizable();
    $("#resize").draggable();
    circleInit();
  });
  $("button").click(function() {
    $("#resize").animate({
      left: '50px',
      width: '650px'
    },400,'swing',function() { circleInit(); });
  });

 function circleInit() {
  $('#demo4').circleType({
    fluid: true,
    dir: -1
  });
}

 #resize {
   position: relative;
   width: 220px;
   height: auto;
   padding: 0.5em;
   border: 1px solid;
 }
 #resize h4 {
   text-align: center;
   margin: 0;
 }
 .demo-box {
   position: relative;
   max-width: 700px;
   margin: 10% auto;
   color: #476A50;
   background-color: #ccc;
 }
 #logo {
   position: absolute;
   bottom: 44%;
   width: 60%;
   height: auto;
   margin-left: 23%;
 }

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://www.kernjs.com/js/lettering.js"></script>
<script src="http://circletype.labwire.ca/js/circletype.js"></script>
<button>Start Animation</button>
<div id="resize" class="ui-widget-content">
  <h4 class="ui-widget-header">Resize/Drag/Animate</h4>

  <div class="demo-box" id="demo-box4">
    <h2 id="demo4" class="demo strong">Anything in WordPress </h2>

    <img src="http://profondodesign.com/assets/images/pd-Logo-800x320.png" id="logo" />
  </div>
</div>