JS는 균일한 포물선 애니메이션을 만듭니다.-JS 튜토리얼-php.cn

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

php中世界最好的语言

풀어 주다： 2018-03-17 13:41:47

원래의

1972명이 탐색했습니다.

이번에는 균일 포물선애니메이션을 만들기 위한 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>