canvas基本动画--微信小程序

如果看了我说的方法还没有做出来的，滴滴我，我给你发js代码。学习勤奋的精神！！！

canvas动画

一、动画效果

1.图片：

2.页面代码设置

 <view class="uni-padding-wrap uni-common-mt">	
   <view class="animation-element-wrapper">
    <view class="animation-element" :animation="animationData"></view>
	<view class="animation-image" :animation="animationData"></view>
   </view>
   <scroll-view class="animation-buttons" scroll-y="true">
    <button class="animation-button" bindtap="rotate">旋转</button>
    <button class="animation-button" bindtap="scale">缩放</button>
    <button class="animation-button" bindtap="translate">移动</button>
    <button class="animation-button" bindtap="skew">倾斜</button>
    <button class="animation-button" bindtap="rotateAndScale">旋转并缩放</button>
    <button class="animation-button" bindtap="rotateThenScale">旋转后缩放</button>
    <button class="animation-button" bindtap="all">同时展⽰全部</button>
    <button class="animation-button" bindtap="allInQueue">顺序展⽰全部</button>
    <button class="animation-button animation-button-reset" bindtap="reset">还原</button>
   </scroll-view>
  </view>
 </view>
//样式
style:
.animation-element-wrapper {
  display: flex;
  width: 100%;
  padding-top: 150rpx;
  padding-bottom: 150rpx;
  justify-content: center;
  overflow: hidden;
  background-color: #ffffff;
}
.animation-element {
  width: 200rpx;
  height: 200rpx;
  background-color: #1AAD19;
}
.animation-image{
	 width: 200rpx;
	 height: 200rpx;
	 background-color: #ff5500;
}
.animation-buttons {
  padding:30rpx 0;
  width: 100%;
  height: 360rpx;
}
.animation-button {
  float: left;
  line-height: 2;
  width: 44%;
  margin: 15rpx 3%;
}
.animation-button-reset {
  width: 94%;
}

二、动画逻辑

1.wxml页面绑定动画效果：

animation=“{{animationData}}”

2.js文件的逻辑

1. 设置空集合收集点击的动画数据

data: {
animationData: {}
},

2. 创建animation实例

var animation = wx.createAnimation({
duration: 1000,
timingFunction: ‘ease’,
})

3. 调用实例的方法来描述动画

this.animation.rotate(45).scale(2, 2).step()

4. 通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性

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

3.动画例子

1. 移动例子

绑定事件：不管是旋转还是移动，还是倾斜等；方法都是下面这种写法，但是动画描述的计算，这个自己得去找，或者直接计算。
translate: function () {
//描述动画
    this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
   //导出动画数据传递给组件的 animation 属性
    this.setData({
      animationData: this.animation.export()
    })
   },

三、关键技术

1. 动画实例（animation）的创建；

2. 导入动画的数据；

3. 点击事件的处理；

4. wxml页面的处理；

5. wxss样式的处理；