JS 포물선 애니메이션을 만드는 방법(자세한 튜토리얼)

이 기사에서는 JS 포물선 애니메이션 제작 과정에 대한 자세한 분석과 관련 코드 예제를 공유하여 관심 있는 친구들이 참고할 수 있습니다.

무인 편의 애플릿을 만드는 프로젝트에서 어느 날 제품이 특정 제조사의 제품을 학습해서 장바구니에 포물선 모양의 공 애니메이션을 추가하겠다고 하더군요. 글쎄, 당신이 가장 큰 제품, 그렇게 하세요!

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

Analytics

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

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

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

CSS animation

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

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

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

구현

작은 프로그램 구현

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>

내가 아는 한, 변환: 변환() 애니메이션을 구현하려면 미팅 위의 내용은 top & left보다 성능이 좋지만 시도해 본 결과 이상적인 대화형 효과를 얻을 수 없다는 것을 알게 되었습니다. 앞으로도 H5 구현에 대해 계속해서 연구하겠습니다. 앞으로도 많은 도움이 되었으면 좋겠습니다.

관련 글:

vue로 보내는 휴대폰 번호, 이메일 정기 인증, 60초 인증 코드 예시

NodeJS 상위 프로세스와 하위 프로세스 리소스 공유 원칙 및 구현 방법

Vue는 액티브 클릭을 구현합니다. 방법 전환

위 내용은 JS 포물선 애니메이션을 만드는 방법(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!