JS 포물선 애니메이션 인 스 턴 스 제작

무인 편의 애플 릿 을 만 드 는 프로젝트 에서 어느 날 제품 은 한 생산 업 체 제품 처럼 배 워 서 카 트 에 포물선 의 작은 공 애니메이션 을 추가 하 겠 다 고 말 했다.좋아,제품 이 제일 커,해!
일단 효과 도 를 보 여 드릴 게 요.

분석 하 다.
이러한 고정 되 지 않 은 시작 위치 에 있 는 애니메이션 은 gif 그림 을 사용 할 수 없 기 때문에 네 이 티 브 코드 로 만 실현 할 수 있 습 니 다.
그러면 우 리 는 어떤 도구 로 애니메이션 을 실현 합 니까?
애플 릿 은 애니메이션 을 만 들 기 위해 JS API createAnimation 을 제공 합 니 다.
CSS animation
도구 가 있 으 니 포물선 이 무엇 인지 다시 한 번 봅 시다.
여기 서 우 리 는 수평 포물선 만 토론 하고 수평 포물선 은 수학 원리 에서 볼 때[수평 등 속,수직 가속 의 운동]이다.코드 차원 으로 전환 하 는 것 은 바로 애니메이션 효과 timing Function 에서 수평 애니메이션 은 linear 를 사용 하고 수직 애니메이션 은 ease-in 을 사용한다.
그래서 우 리 는 이 포물선 애니메이션 을 동시에 진행 되 지만 서로 다른 애니메이션 효과 의 애니메이션 으로 분해 해 야 한다.
이루어지다
작은 프로그램의 실현
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:transtate()로 이 루어 진 애니메이션 은 top&left 보다 성능 이 좋 지만 이상 적 인 상호작용 효 과 를 얻 지 못 한 다 는 것 을 발견 하고 후속 적 인 연 구 를 기대 하 겠 습 니 다.
H5 의 실현

// todo