CSS3 делает круговой индикатор выполнения

внешний интерфейс Ресурсы изображений CSS jQuery

Введение

сделать мобильныйloadiingЗагруженный значок отличается от того, что использовался в прошлом, это круговой индикатор выполнения, а круговой индикатор выполнения представляет собой не что иное, как процентное управление.

CSS3 реализует тор

demo

Когда я впервые написал это кольцо, я сослался на код css, приведенный в посте, а затем изменил его в соответствии со своими потребностями.Я обнаружил, что кольцо можно отлично вращать, но кажется, что его нельзя контролировать в процентах, поэтому Я отказался от копирования готового.Мысли,надо мозг включать.

Принцип реализации

Есть много способов реализовать круги в CSS, я думаю, что большинство из них реализованы с помощью границы + отсечения (clip: rect()), поэтому я также собираюсь использовать этот метод.

Основная проблема заключается в макете, я думаю, что большинство круглых индикаторов выполнения похожи, но методы макета и вращения разные.

// html 

<div id="loading" class="loading">
    <div class="circle">
        <div class="percent left"></div>
        <div class="percent right wth0"></div>
    </div>
    <div class="per"></div>
</div>

// css 

.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  overflow: hidden;
  z-index: 9999;
  -webkit-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}
.circle{
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  border:10px solid #fff;
  clip:rect(0,100px,100px,50px);
}
.clip-auto{
  clip:rect(auto, auto, auto, auto);
}
.percent{
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  top:-10px;
  left:-10px;
}
.left{
  -webkit-transition:-webkit-transform ease;
  transition:-webkit-transform ease;
  transition:transform ease;
  border:10px solid #E54B00;
  clip: rect(0,50px,100px,0);
}
.right{
  border:10px solid #E54B00;
  clip: rect(0,100px,100px,50px);
}
.wth0{
  width:0;
}

// js


$('.left').animate({
    deg: per*3.6
}, {
    step: function(n, fx) {
        if(per>180){
            $('.circle').addClass('clip-auto');
            $('.right').removeClass('wth0');
        }
        $(this).css({
            "-webkit-transform":"rotate("+n+"deg)",
            "-moz-transform":"rotate("+n+"deg)",
            "transform":"rotate("+n+"deg)"
        });
    },
    duration:500
})

через пару.circle (родительский элемент круга слева и справа)Обрезка отображает только кольцо слева, а ширина кольца справа равна 0. Когда индикатор выполнения достигает 50%, угол поворота кольца слева равенtransform: rotate(180deg),Буду.circleотрезать(.clip-auto)Ширина правой стороны кольца восстановления. Это основная рутина.

Атрибут step метода анимации jQuery animate()

Если только использовать

$(this).css({
    "-webkit-transform":"rotate("+n+"deg)",
    "-moz-transform":"rotate("+n+"deg)",
    "transform":"rotate("+n+"deg)"
});

Для управления поворотом угла вообще нет анимации, что относительно жестко, В настоящее время мы должны рассмотреть возможность добавления к нему анимации, а та, которая предоставляется jqanimateАнимировать можно только числовые значения, но нельзя анимировать строковые значения.

В это время вам нужно использовать атрибут шага анимации.

шаг введения

Атрибут progress анимации часто используется нами для работы с атрибутами числовых значений, но с ним нельзя оперировать атрибутами строковых значений.На данный момент требуется атрибут step.

Как следует из названия, шаг предназначен для пошагового разложения анимации В методе анимации способ разложения каждого шага определяется не значением свойства CSS и продолжительностью анимации, которые мы установили, а системой.

$(".left").animate({left:50},{
    duration:100,
    step:function(now,fx){
        console.log(now) //控制台输出，看看这个动画被分解成了几个片段
    }
});

Это место в основном для того, чтобы объяснить, почему именно здесь задан угол, и, кстати, на сколько частей он делит значение, мы не контролируем.

Второй параметр пошагового метода - fx

$(".demo").animate({
	first:2,
	second:10
}, {
	step:function(n,fx){
		// 动画元素的每个动画属性每一次动画效果的执行都将调用的函数。第1个参数是当前动画正在改变的属性的实时值（每1次动画过程中，属性值的实时反馈呈现）；第2个参数为修改Tween 对象提供了一个机会来改变animate第1个参数中设置的属性在动画结束时的值。
		// fx: jQuery.fx 原型对象的一个引用,其中包含了多项属性,比如
		// 执行动画的元素：elem;
		// 动画正在改变的属性：prop;
		// 正在改变属性的当前值：now;
		// 正在改变属性的结束值：end;
		// 正在改变属性的单位：unit;等
		
		// 可在这里改变animate第1个参数中设置的属性second在动画结束时的值
		if(fx.prop=="second"){fx.end=5}
		console.log(fx.prop+": "+n);
	},
	duration:2000
})

конец

При создании этой анимации я столкнулся с двумя слепыми пятнами в своих знаниях: использование клипа и атрибут шага jq, Основная цель написания этой статьи — углубить понимание и поделиться.

Ссылаться на

Категории