작은 프로그램으로 애니메이션 구현하기

이번에는 미니 프로그램에서 애니메이션애니메이션을 구현하는 방법을 소개하겠습니다. 미니 프로그램에서 애니메이션 애니메이션을 구현할 때 주의사항은 무엇인가요? 아래에서 실제 사례를 살펴보겠습니다.

WeChat 애플릿은 애니메이션 애니메이션을 구현합니다. 구체적인 내용은 다음과 같습니다

1. 애니메이션 인스턴스를 생성합니다

wx.createAnimation(OBJECT)

애니메이션 인스턴스 애니메이션을 생성합니다. 인스턴스의 메서드를 호출하여 애니메이션을 설명합니다. 마지막으로 애니메이션 데이터는 애니메이션 인스턴스의 내보내기 메서드를 통해 내보내지고 구성 요소의 애니메이션 속성 에 전달됩니다.
참고: 내보내기 메서드는 호출할 때마다 이전 애니메이션 작업을 지웁니다.

애니메이션 대기열

애니메이션 작업 메서드를 호출한 후 step()을 호출하여 애니메이션 그룹의 완료를 나타내야 합니다. 애니메이션 그룹에서 호출됨 애니메이션 방법의 수에 관계없이 애니메이션 그룹의 모든 애니메이션은 동시에 시작되고 한 애니메이션 그룹이 완료될 때까지 다음 애니메이션 그룹은 진행되지 않습니다. 단계는 현재 그룹 애니메이션의 구성을 지정하기 위해 wx.createAnimation()과 유사한 구성 매개변수를 전달할 수 있습니다.

event를 통해 애니메이션을 바인딩하여 애니메이션 실행을 호출할 수 있습니다.

생성된 애니메이션 인스턴스는 애니메이션 메서드를 호출하여 설명할 수 있으며, 호출이 완료된 후 자체적으로 반환되어 체인 호출 작성을 지원합니다.

동일한 애니메이션 인스턴스 내에서 여러 모션 형식을 정의하고 여러 애니메이션을 서로 다른 라벨에 바인딩할 수 있습니다.

샘플 코드:

animation1: {}
animation2: {}
touch: function () {
 let animation1 = wx.createAnimation({
  transformOrigin: "50% 50%",
  duration: 1000,
  timingFunction: "ease",
  delay: 0
 });
 animation1.translateX(-app.globalData.windowWidth * 0.7).step({ duration: 1000 });
 this.setData({
  animation1: animation1.export()
 });
 let animation2 = wx.createAnimation({
  transformOrigin: "50% 50%",
  duration: 1000,
  timingFunction: "ease",
  delay: 0
 });
 animation2.opacity(0.7).step({ duration: 1000 });
 this.setData({
  animation2: animation2.export()
 });
}

2. 애니메이션 실행 호출

2.1 애니메이션 바인딩

바인딩 해당 라벨에 애니메이션 인스턴스 생성

샘플 코드

<view animation="{{animation1}}"></view>
<view animation="{{animation2}}"></view>

2.2 애니메이션 트리거

페이지 이벤트를 통한 애니메이션 실행 호출

샘플 코드:

<view bindtap="touch"></view>

이 글의 사례를 읽어보셨으리라 믿습니다. 마스터하셨습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

React 서버 렌더링

사용자 개인 정보를 얻기 위해 WeChat 애플릿을 개발하는 방법

Vue2.5 및 Element UI 구성 요소 페이징 기능 구현

위 내용은 작은 프로그램으로 애니메이션 구현하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!