微信小程序 拖动组件 movable-view

<movable-area style="height: 200px;width: 100%;background:#cccccc;">
  <movable-view direction="all" style="height: 50px; width: 50px; background: red;">
  </movable-view>
  <movable-view direction="horizontal" style="height: 30px; width: 30px; background: blue;">
  </movable-view>
</movable-area>

 
movable-view的direction属性支持以下四个值:
all 任意方向拖动
vertical 纵向拖动
horizontal 横向拖动
none 不能拖动 阅读全文

微信小程序 动画 animation

Page({
  data: {
    animationData: {}
  },

  onLoad: function() {
   // 旋转动画
    var animation = wx.createAnimation({
      transformOrigin: "33% 50% 0",
      duration: 300,
      timingFunction: 'linear'
    })

    this.animation = animation;

    this.setData({
      animationData: animation.export()
    });

    var n = 0;
    // 连续动画需要添加定时器,所传参数每次+1。
    setInterval(function () {
      n = n + 1;
      console.log(n);
      
      this.animation.rotate(60 * (n)).step()
      this.setData({
        animationData: this.animation.export()
      })
    }.bind(this), 300);
  },
<view>
  <canvas canvas-id="miCanvas" animation="{{animationData}}"></canvas>
</view>