微信小程序学习：动画实现幻灯片播放照片效果

前言部分

目前市面上小程序越来越多，微信，支付宝，头条都推出了自己的小程序，但是由于微信小程序是最开始的，小程序刚出的时候我也了解过，当时写了个demo也写了一个小的新闻客户端，当时觉得小程序还是有点弱，所以后来就没在关注过小程序的发展，现在随着小程序的崛起（微信说线上小程序超过100万个了），这次下决心好好熟悉一下小程序的开发流程，可能不能全部都熟悉到，所以看到哪里就写到哪里吧。

常规操作，来图镇楼

内容部分

我主要实现一个类似Mac的屏幕保护效果，就是图片淡入淡出的效果吧。

这里主要用到的知识点：

1. 动画的使用（Animation wx.createAnimation(Object object)）
2. view使用本地图片最为背景布局
3. 一些零碎的知识点如：图片如何填充小程序的页面

这里主要介绍的部分说动画部分

如果只是切换图片很简单，但是因为我们需要加上一个渐入的动画效果，所以就稍微麻烦了一些。

我的方案：

首先我其实是使用了两个布局图片，一个是前景一个是后景，原因主要是为了让动画看起来更连贯自然。

下面是代码：

<!--index.wxml-->
<view class='imagesize' style="background:url('{{imageSrcBack}}') no-repeat;background-size:100% 100%;">
  <image src = '{{imageSrc}}' class='back_image' animation="{{attentionAnim}}"></image>
  <view class ='child' bindtap='jumpImage' >登陆</view>
</view>

上面注意：view的background使用本地图片是通过URL来实现，据说因为背景似乎不支持本地图片的原因。

image标签是添加了animation属性，这里就是我们设置动画的地方。

下面看一下js中的代码：

//渐入，渐出实现 
  show: function (that) {
    var attentionAnim = wx.createAnimation({
      duration: 500,
      timingFunction:'linear'
    });
    var imageSrcTemp
    //设置循环动画
    that.attentionAnim = attentionAnim
    var next = true;
    //这里面方法重复调用
    setInterval(function () {
      that.data.count++
      var index = that.data.count % 3
      console.log("动画" +"---" + index)
      
      that.attentionAnim.opacity(0).step()
      that.setData({
        //导出动画到指定控件animation属性
        attentionAnim: attentionAnim.export(),
        // imageSrc: that.data.imageSrcSet[index],
        imageSrcBack: that.data.imageSrcSet[index],
      })
      that.attentionAnim.opacity(1).step()
      setTimeout(function () {
        that.setData({
          attentionAnim: attentionAnim.export({duration: 3}),
          imageSrc: that.data.imageSrcSet[index],

        })
      }, 500)
     
    }.bind(that), 5000)


  },

1. 上面的内容需要注意的地方是，为了使动画连续的动起来我使用了setInterval函数来定期调用动画设置的方法。

2. 需要注意的是我其实播放了两次动画，因为我需要想染上一个图隐藏，设置完下一个图片后在让他显示出来，然后上面说到的view标签的background就是为了过度整个渐入效果使用的。

3. view的background设置的下一个将要显示的图片，当前图片消失后正好下一个正好显示出来，完美过渡。

4. 第二个动画是为了把image在恢复成不透明的样式。

5. 如上循环即可完成。

下面部分是我定义的变量，可以对照看比较好理解啦，虽然代码本来就没几行。哈哈

data: {
    jumpimage:'跳转到ocr页面',
    attentionAnim: {},
    imageSrc:"/image/one.jpg",
    imageSrcBack:"/image/tow.jpg",
    count:0,
    imageSrcSet: [
    "/image/one.jpg",
    "/image/tow.jpg",
    "/image/three.jpg",
    ]

  },

结束部分

其实你会发现似乎前端的动画和android的动画都很相似，只是一些效果不一样，但是这个效果还是花费了较多的时间，主要是对中间的过度不满意，所以一致在调整这个效果。

---

补充一点：

view的背景图片在真机上没法显示的，所以我们在真机上需要把本地的图片链接设置成网络链接才行。我的效果图是在模拟器上所以不会出现问题。

或者

也可以把图片转码成base64格式进行设置

后续会更新一些小程序的坑，就当学个新技能了，顺便留下点东西（笔记）。

有问题欢迎纠正，谢谢啦

如果对你有帮助就点个赞把。