微信小程序制作及动画（animation样式）详细说明

微信小程序制作

实现效果图：

那么swiper是什么东东呢？微信小程序帮助文档这样说明的 swiper滑块视图容器

注意：其中只可放置组件，其他节点会被自动删除。

swiper-item

仅可放置在组件中，宽高自动设置为100%。

示例代码：

 
  
   
  
 

 indicator-dots 
 autoplay 
 interval
 duration
Page({
 data: {
  imgUrls: [
   &＃39;http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg&＃39;,
   &＃39;http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg&＃39;,
   &＃39;http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg&＃39;
  ],
  indicatorDots: false,
  autoplay: false,
  interval: 5000,
  duration: 1000
 },
 changeIndicatorDots: function(e) {
  this.setData({
   indicatorDots: !this.data.indicatorDots
  })
 },
 changeAutoplay: function(e) {
  this.setData({
   autoplay: !this.data.autoplay
  })
 },
 intervalChange: function(e) {
  this.setData({
   interval: e.detail.value
  })
 },
 durationChange: function(e) {
  this.setData({
   duration: e.detail.value
  })
 }
})

看了上面的官方文档，就可以清楚的知道，这个就是我们类似在写html里用到的banner滑动插件一样，拿过来就可以使用，多么的方便。

我们的项目中同样用参数绑定的方式，输出的相关参数

参数定义在index.js pages({...})方法中

var animation = wx.createAnimation({
 transformOrigin: "50% 50%",
 duration: 1000,
 timingFunction: "ease",
 delay: 0
})

animation

动画实例可以调用以下方法来描述动画，调用结束后会返回自身，支持链式调用的写法。

样式：

旋转：

缩放：

偏移：

倾斜：

矩阵变形：

动画队列

调用动画操作方法后要调用 step() 来表示一组动画完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。step 可以传入一个跟 wx.createAnimation() 一样的配置参数用于指定当前组动画的配置。

示例：

Page({
 data: {
  animationData: {}
 },
 onShow: function(){
  var animation = wx.createAnimation({
   duration: 1000,
    timingFunction: &＃39;ease&＃39;,
  })

  this.animation = animation

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

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

  setTimeout(function() {
   animation.translate(30).step()
   this.setData({
    animationData:animation.export()
   })
  }.bind(this), 1000)
 },
 rotateAndScale: function () {
  // 旋转同时放大
  this.animation.rotate(45).scale(2, 2).step()
  this.setData({
   animationData: this.animation.export()
  })
 },
 rotateThenScale: function () {
  // 先旋转后放大
  this.animation.rotate(45).step()
  this.animation.scale(2, 2).step()
  this.setData({
   animationData: this.animation.export()
  })
 },
 rotateAndScaleThenTranslate: function () {
  // 先旋转同时放大，然后平移
  this.animation.rotate(45).scale(2, 2).step()
  this.animation.translate(100, 100).step({ duration: 1000 })
  this.setData({
   animationData: this.animation.export()
  })
 }
})

这里我并不想一个一个的介绍官方的动画说明文档，因为写的很清楚了，而是我想说下一些关于动画的机制。

不管是位移，缩放，旋转，可能都会涉及到三个轴，那就是x,y,z,轴，这三个轴大致这样的如下图

从上面的截图可以看到，现实中的问题，中间这块，宽与高是用了px，就是说，我们不希望中间这个旋转按扭自适应不同的手机屏，而希望他能够保持不变。这个时候，如果我们仅仅用left来平移"出发城市"至"到达城市"的坐标处，可能不管你用px还是rpx或其它单位，都达不到精确定位了（为什么？）。

这个时候，换个角度来思考下，我们不需要让它精确的位移至“到达城市”，为什么这么说呢？在”出发城市“移至”到达城市“前的一点很短的时间内，我们让它在0s交换城市（也就是复位但文本内容已交换），因为0s互换城市文本内容，估计没有任何人可以发觉到的。这就需要一个“恰当的时间”。

好了，我们来看看代码：

定义三个动画：

animation1 = wx.createAnimation({
     duration: 300,
     timingFunction: &＃39;linear&＃39;,
     transformOrigin: "50%,50%"
    })

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

     animation2 = wx.createAnimation({
     duration: 300,
     timingFunction: &＃39;linear&＃39;
    })

    this.setData({
     animationSourceCity: animation2.export()
    })

     animation3 = wx.createAnimation({
     duration: 300,
     timingFunction: &＃39;linear&＃39;
    })

    this.setData({
     animationDestCity: animation3.export()
    })

animation1是旋转图片的动画定义(初始化，具体的参数官网说的很清楚，不多说)。

animation2与animation3分别是”出发城市“与”到达城市“定义

下面我们先来说说animation2,animation3

animation2要完成的是从left ”出发城市“水平移动至”到达城市“坐标

我们看看点击旋转图片时事件：

animation2.left(&＃39;600rpx&＃39;).step()
    this.setData({
    animationSourceCity: animation2.export()
   })

   setTimeout(function(){
    animation2.left(&＃39;30rpx&＃39;).step({duration: 0, transformOrigin: "50%,50%",timingFunction: &＃39;linear&＃39;})
    that.setData({
      animationSourceCity: animation2.export()
    })
   },285)

   animation3.right(&＃39;580rpx&＃39;).step()
    this.setData({
    animationDestCity: animation3.export()
   })
   
    setTimeout(function(){
    animation3.right(&＃39;30rpx&＃39;).step({duration: 0, transformOrigin: "50%,50%",timingFunction: &＃39;linear&＃39;})
    that.setData({
      animationDestCity: animation3.export()
    })
   },285)

我们来分析下上面的代码：

在初始化的时候，设置了动画完成时间duration：300ms,紧接着，点击图片开始水平移动600rpx

animation2.left(&＃39;600rpx&＃39;).step()
    this.setData({
    animationSourceCity: animation2.export()
   })

这个时候600rpx只是粗略的计算，并不是真正的精确定位，原因上面我们解释很清楚了，移动600rpx所需时间是300ms,紧接着，如果这样的结束的话，很可能位置会错位，所以我们要写一个"特殊的动画“，

"setTimeout(function(){
    animation2.left(&＃39;30rpx&＃39;).step({duration: 0, transformOrigin: "50%,50%",timingFunction: &＃39;linear&＃39;})
    that.setData({
      animationSourceCity: animation2.export()
     })
  },285)

这个动画表示，在285ms后，将要在0s时间完成"复位"，在0s时间，估计没有人会查觉得到，呵呵，复位的好处，太多了，如果不复位，意味，我们的元素真的交换了，那样事件也给交换了，给我们带来了太多的麻烦，而复位，可以让我们仅仅交换了”城市文本“而不是所有。哈哈~开心，只所以定义285ms，是给一个很短的机会，让人看不到复位的执行,毕竟上面的300ms的水平动画还没有执行完嘛

而真正的换交在下面的一句话

var tempSourceCity=this.data.sourceCity
   var tempDestCity=this.data.destCity
   this.setData({
    sourceCity:tempDestCity,
    destCity:tempSourceCity
   })

同理，right也一样来现实，这里不多说了，有兴趣的可以尝试下。

下面我们来说说，交换按扭图片的旋转动画

如果在点击事件rotate里我们这样写入

animation1.rotate(180).step()
   
   this.setData({
    animationData: animation1.export()
   })

恩，看起来不错，我们尝试的时候，第一旋转了，然后第二次，第三次。。。并没有旋转。啊呀，愁人的事情又来了。我会不尽的报怨，小程序呀，你的bug又来了。

其实你看官网给出的例子也是如此，旋转一下，再也不旋转了，除非你刷新下页面。

报怨归报怨，纳闷归纳闷，问题还要是解决的。

这是不是我们自己的问题呢？一万个为什么。。。

不是！还记得，在css3动画的时候，确实也这样，我来画图解释下为什么！

图一、旋转前：（注意A点的位置）

图二是点击旋转图片后，自己处于180度状态，此时，再次点击此旋转图片，意味着，让它再次从0度旋转到180度，可是我们的代码是

animation1.rotate(180).step()

这行代码表示，让它在300ms(初始化创建的时间)内旋转到180度，而是此时已处理180度啦，你点击当然它不会再旋转了。它会不停报怨”我已在180度了呀，你还想怎么样？！...“

所以，此时，我们能不能直接再让旋转360度，那么它不就相对于180度后的状态又转了180度了吗？可是看看官网，旋转的范围是-180~180度，既使没有这么范围限制，那么我们也会折腾死，不是吗？每次都要180*2，180*3...,表示不服！

我想只要问题找到了，其实都很简单了，此时估计都有朋友想到了，就是直接让它归0度嘛，这个归0度的动画时间必须要短，不然就要让人看到了一个”倒旋转的过程“，哇，那多么的难看呀，OK，动画嘛，上面我们都有先例，0s复位到0度，你眼神再好，也查觉不到，嘿嘿。。。

完整的旋转代码如下：

animation1.rotate(180).step()
   
   this.setData({
    animationData: animation1.export()
   })
    
   var that=this; 
   setTimeout(function(){
    animation1.rotate(0).step({duration: 0, transformOrigin: "50%,50%",timingFunction: &＃39;linear&＃39;})
    that.setData({
      animationData: animation1.export()
    })
   },300)

意思是，在点击时候，在300ms内旋转180度，同时在300ms后执行一个在0s时间完成新的动画让它复位至0度，下次点击时，它就再次可以旋转了！

animation1.rotate(0).step({duration: 0, transformOrigin: "50%,50%",timingFunction: &＃39;linear&＃39;})//归0度”复位“

上面的思想并不难，就是有时候不好发现，或者说，没接触过动画的朋友，一时半时找不出问题所在，写在此，尽可能的让大家少走弯路。

好了，这部分的动画就全部完成了，下面我们还有首页的上下不间断滚动、类似苹果手机ios app的滑动、删除效果，以及https api（基于asp.net mvc）的搭建、交互等等，期待着我们一个一个的解决呢，这些我准备将在后面的文章陆陆续续的写出，敬请关注，谢谢。

以上就是微信小程序制作及动画（animation样式）详细说明的详细内容，更多请关注 第一PHP社区 其它相关文章！