이 글은 주로 WeChat 애플릿에서 애니메이션을 구현하는 방법을 자세히 소개합니다. 관심 있는 친구들이 참고할 수 있기를 바랍니다.
1. 애니메이션 인스턴스 생성
wx.createAnimation(OBJECT)
애니메이션 인스턴스 애니메이션을 생성합니다. 인스턴스의 메서드를 호출하여 애니메이션을 설명합니다. 마지막으로 애니메이션 데이터는 애니메이션 인스턴스의 내보내기 메소드를 통해 내보내지고 컴포넌트의 애니메이션 속성에 전달됩니다.
참고: 내보내기 메서드는 호출할 때마다 이전 애니메이션 작업을 지웁니다.
애니메이션 대기열
애니메이션 작업 메서드를 호출한 후 step()을 호출하여 애니메이션 그룹의 완료를 나타내야 합니다. 애니메이션 그룹에 속할 수 있습니다. 애니메이션 메서드를 원하는 만큼 호출하면 애니메이션 그룹의 모든 애니메이션이 동시에 시작되고, 한 애니메이션 그룹이 완료될 때까지 다음 애니메이션 그룹이 진행되지 않습니다. 단계는 현재 그룹 애니메이션의 구성을 지정하기 위해 wx.createAnimation()과 유사한 구성 매개변수를 전달할 수 있습니다. 애니메이션을 이벤트에 바인딩하여 애니메이션 실행을 호출할 수 있습니다.
생성된 애니메이션 인스턴스는 애니메이션 메서드를 호출하여 설명할 수 있으며, 호출이 완료된 후 자체적으로 반환되어 체인 호출 작성을 지원합니다.
동일한 애니메이션 인스턴스 내에서 여러 모션 형식을 정의하고 여러 애니메이션을 서로 다른 레이블에 바인딩할 수 있습니다.
샘플 코드:
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>
관련 권장 사항:
CSS3 애니메이션 속성을 사용하여 캐러셀 효과를 구현하는 방법에 대한 자세한 설명
CSS3 애니메이션 특수 효과 플러그인을 능숙하게 사용하는 방법 소개
위 내용은 WeChat 애플릿에서 애니메이션 애니메이션 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!