微信小程序图片左右摆动效果详解
作者:祈澈菇凉 时间:2023-08-09 13:34:31
先看效果,实现一个图片左右摇动,在一般的H5宣传页,商家活动页面我们会看到这样的动画,小程序的动画效果不同于css3动画效果,是通过js来完成的,其实步骤很简单,首先创建动画实例,再调用实例来描述动画,最后导出即可。
先看效果如下:
简单的参考代码:
wxml:
<image class='img' src="http://intmote.com/picture/gift.png" animation="{{animation}}"></image>
css:
.img {
width: 120rpx;
height: 120rpx;
margin:300rpx;
}
js
Page({
data: {
animation: {},
},
onLoad: function () {
},
onShow: function () {
// 1: 创建动画实例animation:
var animation = wx.createAnimation({
duration: 500,
timingFunction: 'ease',
})
this.animation = animation
var next = true;
//连续动画关键步骤
setInterval(function () {
//2: 调用动画实例方法来描述动画
if (next) {
animation.translateX(4).step();
animation.rotate(19).step()
next = !next;
} else {
animation.translateX(-4).step();
animation.rotate(-19).step()
next = !next;
}
//3: 将动画export导出,把动画数据传递组件animation的属性
this.setData({
animation: animation.export()
})
}.bind(this), 300)
},
})
来源:https://www.jianshu.com/p/e0b7af1b586c
标签:微信,小程序,图片,摆动
0
投稿
猜你喜欢
asp如何在本地机器上创建缓存?
2010-06-18 19:27:00
解决安装mysqlclient的时候出现Microsoft Visual C++ 14.0 is required报错
2024-01-14 15:48:14
Python爬虫工程师面试问题总结
2023-06-10 13:23:20
SQL批量插入数据几种方案的性能详细对比
2024-01-13 11:06:32
Python warning警告出现的原因及忽略方法
2021-10-16 10:59:02
JavaScript中利用各种循环进行遍历的方式总结
2024-04-17 10:10:36
Python中shapefile转换geojson的示例
2023-08-03 19:05:04
Google的设计导引
2008-04-06 14:18:00
Golang使用Gin框架实现http分块传输
2024-02-08 20:15:18
Python基于Serializer实现字段验证及序列化
2023-07-19 21:50:36
在Django框架中自定义模板过滤器的方法
2021-02-11 20:14:49
对Python中小整数对象池和大整数对象池的使用详解
2023-02-17 18:13:49
jQuery渐变发光导航菜单的实例代码
2024-04-09 19:47:36
PHP用mysql数据库存储session的代码
2023-09-05 00:44:50
详解Golang语言HTTP客户端实践
2023-09-17 13:52:07
利用js获取下拉框中所选的值
2024-05-02 16:12:10
mysql优化的重要参数 key_buffer_size table_cache
2024-01-16 03:01:52
利用python/R语言绘制圣诞树实例代码
2021-02-10 02:32:23
vbScript on error resume next容错使用心得
2010-06-26 19:28:00
Python 如何实现文件自动去重
2021-07-16 13:50:54