【小程序】微信小程序重复循环平移动画

1.说明

需求是让一张图片不断重复地从下往上移动，实现方法由多种，wx.createAnimation、关键帧动画、swiper等都能实现

2.wx.createAnimation

最先想到的是使用wx.createAnimation()API，它的好处是兼容性好，只要小程序基础库版本不低于1.9.6就可以正常工作

wxml

<view style="width: 100%; height: 100%;"><image src="/pages/images/img1.png" animation="{{animationData}}" style="width: 100%; height: 300rpx;" />
</view>

Page({data: {animationData: null},onLoad(options) {let animation = wx.createAnimation({delay: 0,duration: 1000,timingFunction: 'linear',})this.animation = animationthis.moveDistance = 200animation.translateY(-this.moveDistance).step()this.setData({animationData: animation.export()})this.reAnimation()},reAnimation: function () {setInterval(() => {console.log("000")this.animation.translateY(this.moveDistance).step({duration: 0})this.setData({animationData: this.animation.export()})setTimeout(() => {this.animation.translateY(-this.moveDistance).step()this.setData({animationData: this.animation.export()})}, 60)}, 2000)},})

参考效果

2.animate关键帧动画

从小程序基础库 2.9.0 开始支持一种更友好的动画创建方式，用于代替旧的 wx.createAnimation。我们可以在js文件里直接调用this.animate(selector, keyframes, duration, callback)接口

wxml

<view style="width: 100%; height: 100%;"><image src="/pages/images/img1.png" id="bannerImg" style="width: 100%; height: 300rpx; margin-top: 300rpx;" />
</view>

Page({data: {},onLoad(options) {this.startAnimation()},startAnimation: function () {this.moveDistance = -300setInterval(() => {console.log("111")this.animate('#bannerImg', [{translateY: 0,},{translateY: this.moveDistance,},], 2000, function () {this.clearAnimation('#bannerImg', {}, function () {})}.bind(this))this.animate('#bannerImg', [{translateY: this.moveDistance,},{translateY: 0,},], 0, function () {this.clearAnimation('#bannerImg', {}, function () {})}.bind(this))}, 2000)}})

参考效果

3.swiper

虽然wx.createAnimation()能做的动画很多，但如果只是简单的垂直或水平方向上的平移动画，其实使用swiper组件也可以完成的，swiper从基础库1.0.0 开始支持

wxml

<swiper style="height: 200rpx;" autoplay='true' circular='true' interval='1000' duration='1000' vertical='true' easing-function='linear'><swiper-item wx:for="{{imgList}}" wx:key="key" wx:for-item="item"><image style="height: 200rpx; width: 100%;" src="{{item}}"></image></swiper-item>
</swiper>

Page({data: {imgList: ["/pages/images/img1.png","/pages/images/img1.png"],},onLoad: function (options) {},
})

参考效果

【小程序】微信小程序重复循环平移动画相关推荐

小程序源码：修复图片音频全新升级带特效喝酒神器小游戏微信小程序
这是一款全新升级带特效喝酒神器小游戏微信小程序源码小编发现很多喝酒神器小程序都不带特效和音效的感觉差了那么一点意思而且感觉也不炫酷所以小编今天给大家带来一款带特效,音效炫酷的喝酒神器该款神器由 ...
微信小程序----微信小程序浏览pdf文件
微信小程序----微信小程序浏览pdf文件说明:通过wx.downloadFile,wx.openDocumen来实现打开pdf文件.只需在js操作即可. HTTP.Config.Request(' ...
小程序源码：炫酷手持滚动弹幕生成小工具微信小程序-多玩法安装简单
这是一款滚动弹幕生成微信小程序源码让弹幕文字在手机屏幕上跑起来,LED弹幕手机弹幕,告白神奇,等支持多种模板,每一种模板都支持自定义颜色等等字体跳动,字体表白等等另外用户也可以支持自定义文字 ...
微信小程序—微信小程序端支付代码
只有微信小程序端的代码,如下 Page({data: {},onLoad: function (options) {// 页面初始化 options为页面跳转所带来的参数var that = this ...
小程序 | 微信小程序实现商品分类列表
小程序 | 微信小程序实现商品分类列表一.效果展示二.代码实现  <view class="container"> <! ...
生鲜小程序微信小程序怎么制作临沂修齐网络专业制作微信小程序
生鲜小程序微信小程序怎么制作临沂修齐网络专业制作微信小程序生鲜小程序开发功能介绍: 1.产品展示:通过扫码或者搜索小程序,用户可以看到不同品种的新鲜蔬菜.水果以及肉类. 2.定时收货:买家可以预 ...
微信小程序：娱乐小工具微信小程序源码下载支持多种流量主
这应该是属于娱乐小工具呢还是属于工具箱类型就看你们怎么分辨了当然啦说是娱乐也可以,里面功能应该也属于娱乐性如果说是工具类型也可以,里面也属于工具吧该程序由几个小功能组合而成如有: 网易云音乐下载 ...
抛硬币小游戏微信小程序源码
简介: 抛硬币小游戏微信小程序源码日常生活中遇到选择?抛个硬币看看天意吧! 有了这个小程序,起不起床拋一下,叫不叫外卖拋一下,打不打扫房间拋一下,让生活充满乐趣~ 人生决定不了的决定就让上天来决定吧 ...
小程序 | 微信小程序中使用位置API打开地图
小程序 | 微信小程序中使用位置API打开地图一.效果展示二.代码实现使用微信内置地图查看位置,调用wx.openLocationAPI,具体内容可以查看微信官方文档. // js let In ...
小程序 | 微信小程序实现循环嵌套数据选择
小程序 | 微信小程序实现循环嵌套数据选择一.效果展示二.代码实现在.wxml文件中,有时从后台传来的数据可能会出现数组嵌套数组的情况,需要利用wx:for嵌套实现数据的展示.这时,外层循环正常 ...

【小程序】微信小程序重复循环平移动画

1.说明

2.wx.createAnimation

2.animate关键帧动画

3.swiper

【小程序】微信小程序重复循环平移动画相关推荐

最新文章

热门文章