JS 포물선 애니메이션 동작 예시 공유

무인 편의 애플릿을 만드는 프로젝트에서 어느 날 제품이 특정 제조사의 제품을 학습해서 장바구니에 포물선 모양의 공 애니메이션을 추가하겠다고 하더군요. 이 기사에서는 주로 JS 포물선 애니메이션 제작 과정에 대한 자세한 분석과 관련 코드 예제를 공유합니다. 관심 있는 친구들은 이를 참고할 수 있습니다.

렌더링 먼저 보여드리겠습니다

Analytics

시작 위치가 고정되지 않은 이런 애니메이션은 당연히 gif 이미지를 사용할 수 없기 때문에 네이티브 코드로만 구현할 수 있습니다

그래서 어떤 도구를 사용하나요? 애니메이션을 구현하려면?

애플릿은 JS API createAnimation을 제공하여 애니메이션을 생성합니다.

CSS 애니메이션

이제 도구를 사용할 수 있으므로 포물선이 무엇인지 살펴보겠습니다.

여기서는 수평 포물선에 대해서만 논의합니다. 수학적 원리에서 수평 포물선은 [일정한 수평 속도 및 수직 가속도를 갖는 움직임]입니다. 코드 레벨로의 변환은 애니메이션 효과 timingFunction에 있습니다. 수직 애니메이션은 이즈인을 사용합니다

그래서 우리는 이 포물선 애니메이션을 동시에 수행되지만 애니메이션 효과가 다른 두 개의 애니메이션으로 분해해야 합니다.序

미니 프로그램 구현

JJS:

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
}

e

html:

Rreee
내가 아는 한, top과 left가 성능은 더 좋아졌지만 시도해 본 결과 이상적인 인터랙티브 효과를 얻을 수 없다는 것을 알게 되었습니다. 앞으로도 H5 구현에 대해 계속해서 연구해 보도록 하겠습니다.

위 내용은 JS 포물선 애니메이션 동작 예시 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!