2014-02-12 2 views
3

내가 PrimeFaces의 예를 다음이었다 정적이 아닌 애니메이션이다 showcasePrimeFaces 상태 표시 줄은

내가 설정 값 (10 %)의 정적 표시 줄을 표시하면됩니다 만의 애니메이션 효과를 위해 노력하고 있어요 움직이는 바. 내가 필요로하는 정적 값을 얻기 위해 둘을 결합하는 시도했지만 내가 원하는 효과는 여전히 내 코드 즉

<p:progressBar value="10" 
       labelTemplate="{value}%" 
       ajax="true" 
       styleClass="animated"> 
</p:progressBar> 

만 완전히 정적이다. 설정 값에서 애니메이션 모양을 어떻게 얻을 수 있습니까?

고마워

답변

3

P 애니메이션 얻는 두 가지 방법이 있습니다 : ProgressBar를가. 하나는 클라이언트 측면 애니메이션으로 JavaScript에서 처리합니다 (간단하고 일반적으로 미리 정의 된 애니메이션에 적합). 다른 하나는 ajax입니다. 현재 값은 서버 측 bean에서 계산되고 주기적으로 업데이트됩니다 (showcase 예제와 같이 작동 할 수 있지만 복잡하고 다소 비동기적인 작업의 진행 상황을 표시하는 데 더 적합합니다). 어느 쪽이든, 모든 애니메이션 동작은 정적 인 자연을 제외합니다.

표시 한 코드 샘플은 정적 값이있는 진행률 막대를 선언하지만 해당 애니메이션은 처리하지 않습니다. 어떤 가치에 멈추는 애니메이션이 필요하다면 자바 스크립트에서 처리하는 것이 좋습니다. 코드는 쇼케이스 예제의 코드와 매우 비슷해야하지만 단계 크기, 간격 및 애니메이션 종료 조건의 값을 변경해야합니다. 진행률 표시 줄을 자동으로 애니메이션화하려면 HTML 이벤트와 결합하면됩니다. 구현의 세부 사항은 달성하려는 특정 동작에 따라 크게 달라집니다.

내가 ppawel에 동의
0

, 내가 추가 할 수있는 유일한 것은 당신이 애니메이션이 바로이 페이지를로드로 실행하려는 경우, 당신은 당신이)을 animationFunction를 (작성해야 물론 <body onload="animationFunction()"> 사용할 수 있다는 것입니다 javascript

관련 문제