微信小程序(滑動)-animation

官方api:  https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/wx.createAnimation.html

例:

<style lang="less">
.container {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }
  .usermotto {
    margin-top: 100px;
    border: solid;
  }

</style>
<template>
  <view class="container">
    <view class="usermotto" animation="{{ani}}">
      <text class="user-motto">動畫內容</text>
    </view>
    <button bindtap='start'>動畫</button>
  </view>
</template>

<script>
  import wepy from 'wepy'
  import Base from '@/pages/base'
  import WidgetNav from '@/mixins/widget-nav'
  import {connect} from 'wepy-redux'

  @connect({
    userInfo({user}) {
      return user
    }
  })
  export default class User extends Base {
    config = {
      navigationBarTitleText: 'demo'
    }
    components = {}
    data = {
      move: false,
      ani: ''
    }
    async onLoad() {}
    computed = {}
    methods = {
      start() {
        let animation = wx.createAnimation({
          duration: 4000,
          timingFunction: 'ease',
          delay: 0
        })
        this.move = !this.move
        // translate(x,y)單位是px
        if (this.move) {
          animation.translate(100, -100).step()
          this.ani = animation.export()
        } else {
          animation.translate(-100, 100).step()
          this.ani = animation.export()
        }
      }
    }
  }
</script>