Question

我有一个简单的猫头鹰传送带，其中带有圆点的饼图动画，其中动画是使用SVG制作的。这是我的示例http://slider.farmadodomu.cz/。问题是，两个动画同时开始，所以我在哪张幻灯片上都没有关系。我真的很困惑，我需要在类激活位于按钮的父html元素上时使动画开始。

HTML代码

     <div id="header-slider" class="owl-carousel owl-theme">
                <div class="single_slide" data-dot='<button role="button" class="owl-dot">
                <?php include("inc/chart3.svg")?></button>'>
                    <img src="assets/images/banner.jpg" alt="" title=""></div>
                <div class="single_slide" data-dot='<button role="button" class="owl-dot">
                <?php include("inc/chart3.svg")?></button>'>
                    <img src="assets/images/banner.jpg" alt="" title="">
                 </div>
              </div>

SVG代码

<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="16" height="16" viewbox="0 0 250 250" enable-background="new 0 0 
426.667 410" xml:space="preserve">
<path class="kruznice" transform="translate(125, 125) scale(.84)"/>

<script>
 jQuery(document).ready(function() {
 var kruznice = document.getElementsByClassName("kruznice"),
a = 0,
p = Math.PI,
t = 4;

(function draw() {
a++;
a %= 360;
var r = (a * p / 180),
  x = Math.sin(r) * 125,
  y = Math.cos(r) * -125,
  mid = (a > 180) ? 1 : 0,
  anim = "M 0 0 v -125 A 125 125 1 " +
  mid + " 1 " +
  x + " " +
  y + " z";

 Object.values(kruznice).forEach(item=>item.setAttribute("d", anim));
 setTimeout(draw, t); // Redraw

})();
});

猫头鹰轮播使用SVG制作动画点

0 个答案: