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

前言部分

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

常规操作，来图镇楼

内容部分

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

这里主要用到的知识点：

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

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

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

我的方案：

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

下面是代码：

<!--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 = attentionAnimvar next = true;//这里面方法重复调用setInterval(function () {that.data.count++var index = that.data.count % 3console.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)},

上面的内容需要注意的地方是，为了使动画连续的动起来我使用了setInterval函数来定期调用动画设置的方法。
需要注意的是我其实播放了两次动画，因为我需要想染上一个图隐藏，设置完下一个图片后在让他显示出来，然后上面说到的view标签的background就是为了过度整个渐入效果使用的。
view的background设置的下一个将要显示的图片，当前图片消失后正好下一个正好显示出来，完美过渡。
第二个动画是为了把image在恢复成不透明的样式。
如上循环即可完成。

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

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格式进行设置

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

有问题欢迎纠正，谢谢啦

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