jQuery Animate 심층학습(2)

이 글에서는 이전 글 [jQuery의 Animate 심층 연구(1부)]에 이어 jQuery의 Animate에 대한 심층 연구(2부)를 제공하여 jQuery에서 animate의 사용법을 이해할 수 있도록 합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

Step

Type: Function(현재 번호, Tween tween)
각 애니메이션 요소의 각 애니메이션 속성에 대해 호출될 함수입니다. 이 기능은 Tween 객체를 수정하여 설정의 속성 값을 변경할 수 있는 기회를 제공합니다.

아주 모호한 내용인데 예를 들어보시죠!

var k=0;
 $( ".block:first" ).animate(
          {
            left: 100,top:200
          },
          {
            duration: 1000,
            step: function( now, fx ){
                k++;                
                if(k==1) console.log(fx);
            }
);

출력이 상상이 가시나요?

jQuery 소스 코드를 살펴보겠습니다.

jQuery.fx = Tween.prototype.init;
...
function Tween( elem, options, prop, end, easing ) {
    return new Tween.prototype.init( elem, options, prop, end, easing );
}
jQuery.Tween = Tween;
Tween.prototype = {
    constructor: Tween,
    init: function( elem, options, prop, end, easing, unit ) {
        this.elem = elem;
        this.prop = prop;
        this.easing = easing || "swing";
        this.options = options;
        this.start = this.now = this.cur();
        this.end = end;
        this.unit = unit || ( jQuery.cssNumber[ prop ] ? "" : "px" );
    },
...}

좋아요! 대략적인 개요가 있어야 하고, 매개변수의 의미를 자세히 설명하겠습니다~~

AttributeTypeValueeasingString애니메이션 방법 "linear",swing ,easeIn,easeOut...etcelemDOM 요소애니메이션이 적용되는 요소endValue애니메이션 종료 값nowValue애니메이션 현재 값 pospropstart 단위이것만 알면 많은 일을 할 수 있어요! jQuery Animation은 요소의 CSS 스타일을 한 상태에서 다른 상태로 변경하여 작동합니다. CSS 속성 값은 점진적으로 변경되어 애니메이션 효과를 만들 수 있습니다. 숫자 값만 애니메이션화할 수 있습니다(예: "여백:30px"). 문자열 값은 애니메이션화할 수 없습니다(예: "배경색상:빨간색"). CSS3와 같은 많은 효과는 숫자가 아니므로 animate() 메서드를 통해 직접 구현할 방법이 없습니다. translate(),rotate(),scale(),skew(),matrix(),rotateX(),rotateY()및 기타 메소드와 같은 메소드의 특징 중 하나는 해당 값이 문자와 혼합된다는 것입니다. 그리고 숫자. 따라서 애니메이션 효과를 얻기 위해 해당 값을 동적으로 수정하기 위해 animate() 메서드를 직접 사용할 수 없습니다. Javascript를 사용하여 CSS3 애니메이션을 직접 구현하는 경우 구현하기가 더 복잡한 setInterval() 메서드를 통해서만 구현할 수 있습니다. 실제로 animate() 메소드는 setInterval() 메소드를 기반으로 작동하지만 애니메이션 속도를 편리하게 설정할 수 있고, 고정 속도인지 가변 속도인지도 설정할 수 있습니다. animate() 메서드의 두 번째 사용에는 애니메이션의 각 단계에서 실행될 함수를 지정하는 stp 매개 변수가 있습니다. 요소에 큰 영향을 주지 않는 CSS 값을 이용하여 animate() 메소드를 실행시킨 뒤, step 콜백 함수에서 수정하고 싶은 값을 수정하면 애니메이션이 간접적으로 구현될 수 있습니다. CSS 코드: Html 코드:

 <p id="box"></p>

Javascript 코드: 여기에는 텍스트가 없기 때문에 text-indent 속성이 애니메이션을 트리거하는 데 사용됩니다. 따라서 텍스트 들여쓰기는 스타일에 영향을 주지 않고 사용됩니다. 요소 효과, 글꼴 크기 등도 여기에서 사용할 수 있습니다. 그런 다음 animate() 메서드에서 생성된 리듬을 사용하여 애니메이션을 구현합니다.

	ㅋㅋㅋ ation Queue
Value	애니메이션 중 0.0에서 1.0으로
String	변경되는 CSS 속성
Value	CSS 속성이 변경되기 시작하는 값
문자열	CSS 값의 단위
	jQuery Animation은 CSS3 애니메이션을 구현합니다.
		#box {   width:100px;   height:100px;   position:absolute;   top:100px;   left:100px;   text-indent: 90px;   background-color:red; }
var s=0; $('#box').animate({  textIndent: 0 }, {   //这里的now参数即前面设置的数值，即textIndent: 0中的0，然后后面还有，则以后面的数值为准。    duration:2000,    step: function(now,fx) {         s++;         fx.start=45;//你可以尝试修改start,end值，来看rotate的变化         fx.end=0;                 if(s==1) console.log(fx.start+"----"+fx.end+"---"+fx.startTime);       $(this).css('-webkit-transform','rotate('+now+'deg)');    } });

위 내용은 jQuery Animate 심층학습(2)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!