微信小程序学习（五）

一、Animation wx.createAnimation(Object object)

作用：创建一个动画实例animation 。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。（之后组件就会按照你约定的运动模式来进行）此方法最后返回一个Animation类型的对象；

属性	类型	默认值	必填	说明
duration	number	400	否	动画持续时间，单位 ms
timingFunction	string	'linear'	否	动画的效果（此属性一般要修改）
delay	number	0	否	动画延迟时间，单位 ms
transformOrigin	string	'50% 50% 0'	否	一般用于旋转效果

timingFunction 的合法值

值	说明
'linear'	动画从头到尾的速度是相同的，用于设置动画的模式（常用）
'ease'	动画以低速开始，然后加快，在结束前变慢
'ease-in'	动画以低速开始
'ease-in-out'	动画以低速开始和结束
'ease-out'	动画以低速结束
'step-start'	动画第一帧就跳至结束状态直到结束
'step-end'	动画一直保持开始状态，最后一帧跳到结束状态

动画对象的常用方法（Function）：

一般控制动画的方式有旋转(rotate)、平移(transform)、放缩(scale)三种；

在使用这些方法之前我们需要创建一个动画对象，创建方式如下：（核心就是创建动画实例）

animation=wx.createAnimation({参数列表})

之后我们可以通过此动画对象来调用对应的动态效果，下面介绍几个常用的方法

animation.scale("number");//等比例放大或缩小number倍数
animation.rotateY("number");//沿着Y轴旋转number角度【-180,180】
animation.transformX（"number"）;//沿着X轴平移number距离
animation.opacity（"number"）；//设置组件的透明度【0,1】
animation.backgroundColor("string");//设置组件的背景颜色
animation.step();//表示一组动画一步一步的执行，上一步结束下一步才开始
animation.width("number")
animation.height("number")//设置组件的宽高
（注：上面方法的X，Y，Z为坐标轴可以相互替换）

实战：旋转图形+放缩+位移：（上述方法的综合应用）

//WXML视图界面/* pages/index/index.wxml */
<view wx:if="{{hidden}}" style="position:relative;left:182rpx;width:400rpx;height:400rpx;" animation="{{animatiomMain2}}">
<text>on the way</text>
<view animation="{{animatiomMain1}}"></view>
<view animation="{{animatiomMain1}}" class="show1"></view>
<view animation="{{animatiomMain1}}" class="show2"></view>
<view animation="{{animatiomMain1}}" class="show3"></view>
<view animation="{{animatiomMain1}}" class="show4"></view>
<view animation="{{animatiomMain1}}" class="show5"></view>
<view animation="{{animatiomMain1}}" class="show6"></view>
</view>
/* pages/index/index.wxss */
page{
  text-align: center;
}
text{
  position: relative;
  top:182rpx;
  font-size: large;
}
view{
  position: absolute;
  left: 112rpx;
  width: 180rpx;
  height: 180rpx;
  top:20rpx;
  text-align: center;
  vertical-align:  -webkit-baseline-middle;
  margin-top:100rpx; 
  border: 2rpx solid black;
}
.show1{
   transform: rotate(30deg);
   border: 2rpx solid black;
}
.show2{
   transform: rotate(60deg);
   border: 2rpx solid black;
}
.show3{
   transform: rotate(90deg);
   border: 2rpx solid black;
}
.show4{
   transform: rotate(120deg);
   border: 2rpx solid black;
}
.show5{
   transform: rotate(150deg);
   border: 2rpx solid black;
}
.show6{
   transform: rotate(180deg);
   border: 2rpx solid black;
}
button{
  top:600rpx;
}
// pages/index/index.js
Page({
  data: {
    animatiomMain1: "none",
    hidden:false,
    animatiomMain2:"none"
  },
  onShow: function() {
    this.setData({hidden:true})
    var obj = wx.createAnimation({
      duration: 5000,
      delay:0
    }) //创建一个动画对象
    this.animation = obj
    var next = true;
    setInterval(function() {
      if (next) {
        this.animation.rotate(180).scale(1.8).step()
        next = !next
      } else {
        this.animation.rotate(-180).scale(0).step()
        next = !next
      }
      this.setData({
        animatiomMain1: obj.export(), //重新渲染动画对象
      })
    }.bind(this), 5400)

    var obj2 = wx.createAnimation({
      duration: 5000,
      delay: 0
    }) //创建一个动画对象
    this.animation2 = obj2
    setInterval(function () {
      if (next) {
        this.animation2.translateY(20).scale(0.8).step()
      } else {
        this.animation2.translateY(-10).scale(0.6).step()
      }
      this.setData({
        animatiomMain2: obj2.export(), //重新渲染动画对象
      })
    }.bind(this), 5400)
  }
})

运行结果：

除了上述操作，也可以通过此api实现卡牌翻转的功能，相比传统HTML+CSS的操作更为简单和易于理解；

wx.stopPullDownRefresh(Object object)和wx.startPullDownRefresh(Object object)为微信的两种刷新模式；

（注：两者的参数一致，如下表所示，一般使用前两种参数，刷新可与this.setData连用，起到重新数据绑定的作用，且这两者一般在一起使用，但在使用之前需要将json中的"enablePullDownRefresh":设置为true）

属性	类型	默认值	必填	说明
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

// pages/index/index.wxml
<view>刷新{{info}}次</view>
// pages/index/index.js
Page({
  data: {
    info:1
  },
  onLoad:function(){
     wx.startPullDownRefresh()
  },
  onPullDownRefresh() {
    var i=this.data.info+1
    this.setData({
      info:i
    })
    wx.stopPullDownRefresh()
  }
})    //下拉刷新的简单使用，每一次刷新都会提示刷新次数，一定要把json中的刷新设置为true

wx.setBackgroundTextStyle(Object object)：用于设定背景字体风格

wx.setBackgroundColor(Object object) ：用于设定背景颜色（这两者一般不会使用，背景色一般以白色风格为主）