이번에는 균일 포물선애니메이션을 만들기 위한 JS를 가져오겠습니다. JS를 사용하여 균일 포물선 애니메이션을 만드는 주의 사항은 무엇입니까? 다음은 실제 사례입니다.
무인 편의 애플릿을 만드는 프로젝트에서 어느 날 제품이 특정 제조사의 제품을 학습해서 장바구니에 포물선 모양의 공 애니메이션을 추가하겠다고 하더군요. 글쎄, 당신이 가장 큰 제품, 그렇게 하세요!
렌더링 먼저 보여드리겠습니다
Analytics
시작 위치가 고정되지 않은 이런 애니메이션은 당연히 gif 이미지를 사용할 수 없기 때문에 네이티브 코드로만 구현이 가능합니다
그래서 어떤 도구를 사용할까요? 애니메이션을 구현하는 것은 어떻습니까?
애플릿은 JS API createAnimation을 제공하여 애니메이션을 생성합니다.
CSS 애니메이션
이제 도구를 사용할 수 있으므로 포물선이 무엇인지 살펴보겠습니다.
여기서는 수평 포물선에 대해서만 논의합니다. 수학적 원리에서 수평 포물선은 [일정한 수평 속도 및 수직 가속도를 갖는 움직임]입니다. 코드 레벨로의 변환은 애니메이션 효과 timingFunction에 있습니다. 수직 애니메이션은 이즈인을 사용합니다
그래서 우리는 이 포물선 애니메이션을 동시에 수행되지만 애니메이션 효과가 다른 두 개의 애니메이션으로 분해해야 합니다.
Implementation
implementation of small program
JS:
cartAnimation(x, y) { // x y 为手指点击的坐标,即球的起始坐标 let self = this, cartY = app.globalData.winHeight - 50, // 结束位置(购物车图片)纵坐标 cartX = 50, // 结束位置(购物车图片)的横坐标 animationX = flyX(cartX, x), // 创建球的横向动画 animationY = flyY(cartY, y), // 创建球的纵向动画 this.setData({ ballX: x, ballY: y, showBall: true }) setTimeoutES6(100).then(() => { // 100 秒延时,确保球已经到位并显示 self.setData({ animationX: animationX.export(), animationY: animationY.export(), }) return setTimeoutES6(400) // 400 是球的抛物线动画时长 }).then(() => { // 400 秒延时后隐藏球 this.setData({ showBall: false, }) }) } function setTimeoutES6(sec) { // Promise 化 setTimeout return new Promise((resolve, reject) => { setTimeout(() => {resolve()}, sec) }) } function flyX(cartX, oriX) { // 水平动画 let animation = wx.createAnimation({ duration: 400, timingFunction: 'linear', }) animation.left(cartX).step() return animation } function flyY(cartY, oriY) { // 垂直动画 let animation = wx.createAnimation({ duration: 400, timingFunction: 'ease-in', }) animation.top(cartY).step() return animation }
HTML:
<view animation="{{animationY}}" style="position:fixed;top:{{ballY}}px;" hidden="{{!showBall}}"> <view class="ball" animation="{{animationX}}" style="position:fixed;left:{{ballX}}px;"></view> </view>
내가 아는 한,Transform:Transform()으로 구현된 애니메이션은 위쪽 및 왼쪽보다 성능이 더 좋지만 이후에는 시도해 보니 이상적인 상호 작용 효과를 얻을 수 없다는 것을 알았습니다. 앞으로도 지속적인 연구를 기대합니다.
H5 구현
// todo
이 기사의 사례를 읽으신 후에는 더 흥미로운 정보를 얻으실 수 있을 것입니다. , PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요!
추천 자료:
동적으로 로드된 데이터 슬라이드가 항상 실패하는 경우 수행할 작업
위 내용은 JS는 균일한 포물선 애니메이션을 만듭니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!