微信小程序動態設定背景樣式、滾動至頂部、簡單動畫的實例

效果演示

wxml

<view>
    <button bindtap="backgroundColor">動態設定背景樣式</button>
    <view class="content"></view>
    <button bindtap="scrollTo">滾動頁面</button>
    <button bindtap="animation">動畫演示</button>
    <view animation="{{animationData}}" class="animation"></view>
</view>

js

下面是js中的綁定事件

backgroundColor:function(){
      wx.setBackgroundColor({
        backgroundColor: '#00ff00',
      })
    },
    scrollTo:function(){
      wx.pageScrollTo({
        //距離頂部的像素值
        scrollTop:0,
        //滾動用時
        duration: 200,
      })
    },
    animation:function(){
      //先創建動畫對象
      var animation=wx.createAnimation({
        delay: 0,
        //動畫演示長度
        duration:1000,
        //動畫效果
        timingFunction:'ease',    
      });
      this.animation=animation;
      //x、y軸放大兩倍（括號里可以為小數），旋轉90度，然后完成
      animation.scale(2,2).rotate(90).step();
      //最后導出
      this.setData({
        animationData:animation.export()
      });
    },

wxss

.content{
    height: 500px;
    background-color: rosybrown;
}
.animation{
    background-color: red;
    height: 100rpx;
    width: 100rpx;
    margin: 50rpx 100rpx;
}