微信小程序动画简单入门

先看官方开发文档的：

         这么一大堆东西，刚开始看也蒙蔽，但是其实就是小程序封装了这些动画方法，方便我们调用，只需要了解怎么用就行（后面一定会看CSS动画详情的）。

        首先，实现动画需要用到一个Animation的对象，这个对象里有很多方法，我们只需要像写C++或者java一样，先实例化一个对象（类的声明官方定义好了），然后通过对象去调用微信小程序给我们封装的方法，然后传入你自己的参数就可以了。

        一个简单实例：

WXML文件：

<view class="animation-element-wrapper">

   <view class="animation-element" animation="{{animation}}"></view>

</view>

<view>

  <button bindtap="rotate">旋转</button>

</view>

JS文件：

// demo/demo.js

Page({

  /**

   * 页面的初始数据

   */

  data: {

                                         //这里可以不用定义animation对象啦，因为后面调用setData方法会生成

                                        //保险的话可以在这里定义一下

  },

  rotate: function () {

        //按钮单击触发旋转事件，（面向对象的思想）

    this.animation.rotate(Math.random() * 720 - 360).step()  //调用Animation里旋转方法

    this.setData({animation: this.animation.export()})   //把这个动画对象导出去，然后渲染到页面

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

  },

  /**

   * 生命周期函数--监听页面初次渲染完成

   */

  onReady: function () {

//创建一个动画对象，这个很重要，也就是实例化，有了对象才能调用方法

    this.animation = wx.createAnimation() 

  },

  /**

   * 生命周期函数--监听页面显示

   */

  onShow: function () {

  },

  /**

   * 生命周期函数--监听页面隐藏

   */

  onHide: function () {

  },

  /**

   * 生命周期函数--监听页面卸载

   */

  onUnload: function () {

  },

  /**

   * 页面相关事件处理函数--监听用户下拉动作

   */

  onPullDownRefresh: function () {

  },

  /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom: function () {

  },

  /**

   * 用户点击右上角分享

   */

  onShareAppMessage: function () {

  }

})

WXSS文件：

.animation-element{

  width: 200rpx;

  height: 200rpx;

  background-color: yellow;

}

.animation-element-wrapper{

  display: flex;

  justify-content: center;

  align-items: center;

  margin-top: 100rpx;

}

button{

  width: 200rpx;

  margin-top: 100rpx;

}

效果图：

 

 不会截gif图，新手入门，也就当作自己的笔记（感觉毫无提升）。