WeChat 미니 프로그램 애니메이션 API 자세한 설명 및 예제 코드 공유

본 글은 위챗 애플릿 애니메이션 API에 대한 자세한 설명과 예시 코드 공유 관련 정보를 주로 소개하고 있습니다. 도움이 필요한 친구는

애니메이션을 참고하세요. 좀 더 자세히 설명하자면, 미니 프로그램에서 애니메이션의 속성과 주의사항에 대해 간략하게 소개하겠습니다. 애니메이션을 만들기 전에 먼저 아이디어를 정리하고 애니메이션을 단계별로 분해한 후 결합해야 합니다. 그것! 여기서는 소개만 했습니다.

wx.createAnimation(object)

공식 소개 보기

1. 애니메이션 인스턴스 애니메이션을 생성합니다. 인스턴스의 메서드를 호출하여 애니메이션을 설명합니다. 마지막으로 애니메이션 데이터는 애니메이션 인스턴스의 내보내기 메소드를 통해 내보내지고 컴포넌트의 애니메이션 속성에 전달됩니다.

2. 애니메이션 작업 메서드를 호출한 후 step()을 호출하여 애니메이션 그룹의 모든 애니메이션을 원하는 만큼 호출할 수 있습니다. 동시에 시작됩니다. 애니메이션 세트가 완료될 때까지 다음 애니메이션 세트가 진행되지 않습니다. 단계는 wx.createAnimation()과 동일한 구성 매개변수를 전달하여 현재 그룹 애니메이션의 속성을 지정할 수 있습니다.

이는 비교적 이해하기 쉽습니다. 예를 들어 첫 번째 해당 코드 애니메이션인 this.animation입니다. 내보내기()
두 번째 항목은 스케일링 애니메이션, 즉 스케일, scaleX, scaleY의 집합입니다... 스케일링 애니메이션 그룹과 회전 애니메이션 그룹이 연결되어 있는 애니메이션 방법입니다. step()을 거쳐 순서대로 실행됩니다. 코드에서 사용해 보세요!

주요 속성:

timingFunction과 trans 아래의 주요 트리는 다음과 같습니다formOrigin

timingFunction은 애니메이션 효과를

1. 선형으로 설정합니다. 애니메이션은 항상 상대적으로 균일합니다

ease-in 처음에는 천천히
ease-in-out 처음과 끝은 천천히
escape-out은 마지막에 느려집니다
step-start는 애니메이션 시작 부분에서 애니메이션 지속 시간이 순식간에 끝날 때까지 100%로 점프합니다
step-end는 애니메이션 기간이 순식간에 끝날 때까지 0% 스타일을 유지합니다
7. transformOrigin은 애니메이션의 기준점을 설정합니다. 기본값 %50 %50 0

   
   왼쪽, 가운데

   오른쪽
은 가로 방향 값이며 해당 백분율 값은 왼쪽=0% 중심=50%; 오른쪽=100%

top center bottom
은 수직 방향의 값이며, 여기서 top=0%; center=50%; Bottom=100%

애니메이션 그룹 및 애니메이션 방법 스타일:

회전:

규모:

오프셋:

틸트:

매트릭스 변형:

단일 애니메이션 그룹의 효과를 입증

wxml

rreee

js

<view class="container">
 <view animation="{{animation}}" class="view">我在做动画</view>
</view>
<button type="primary" bindtap="rotate">旋转</button>

여러 애니메이션 그룹의 효과 시연

여기서는 다음 코드만 변경하면 됩니다

/**
* 회전
* /
rotate: function() {
//두 개의 애니메이션 그룹은 step()으로 끝나야 합니다.
/**
* 애니메이션 시퀀스 시계 방향으로 150도 회전>x,y 두 번 확대>x,y 10px 변환>x,y 시계 방향으로 기울이기>스타일 변경 및 너비 설정 너비
*/
this.animation.rotate(150).step( ) .scale(2).step().translate(10).step().skew(10).step().opacity(0.5).width(10).step({ducation: 8000})
이 .setData({
//애니메이션 출력
animation: this.animation.export()
})
}

읽어 주셔서 감사합니다. 도움이 되기를 바랍니다. 모두 감사합니다. 이 사이트를 지원하세요!

위 내용은 WeChat 미니 프로그램 애니메이션 API 자세한 설명 및 예제 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!