집 > 기사 > 웹 프론트엔드 > JS는 균일한 포물선 애니메이션을 만듭니다.

JS는 균일한 포물선 애니메이션을 만듭니다.

php中世界最好的语言원래의: 2018-03-17 13:41:471682검색

이번에는 균일 포물선애니메이션을 만들기 위한 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 중국어 웹사이트의 다른 관련 기사도 주목해주세요!