将Circletype.js与jQuery动画结合起来

Question

我希望将Circletype.js与jQuery .animate()结合使用，以便在我为其容器的宽度设置动画时，使文本围绕我的徽标/图像弯曲。

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

运行代码段以说明：

1. 文本半径确实会在手动调整容器大小时发生更改
通过.animate()调整大小时，
2. 文本半径不会更改。 为什么不呢？
＆＃13;
＆＃13;
  $(function() {
    $("#resize").resizable();
    $("#resize").draggable();
  });
  $("button").click(function() {
    $("#resize").animate({
      left: '50px',
      width: '650px'
    });
  });



  $('#demo4').circleType({
    fluid: true,
    dir: -1
  });
＆＃13;
 #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%;
 }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 1

circletype代码显示text is only reflowed when the window is resized：

    if (settings.fluid && !settings.fitText) {
        $(window).resize(function () {
            layout();
        });
    }

Answer 2

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

  $(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>