微信小程序图片左右摆动效果详解


Posted in Javascript onJuly 13, 2019

先看效果,实现一个图片左右摇动,在一般的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)
 },
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
jQuery设置与获取HTML,文本和值的简单实例
Feb 26 Javascript
JavaScript分秒倒计时器实现方法
Feb 02 Javascript
Javascript中的getUTCHours()方法使用详解
Jun 10 Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
Jul 10 Javascript
JavaScript门面模式详解
Oct 19 Javascript
详解HTML5 使用video标签实现选择摄像头功能
Oct 25 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
Vue生命周期activated之返回上一页不重新请求数据操作
Jul 26 Javascript
vue iview多张图片大图预览、缩放翻转
Jul 13 #Javascript
vue实现图片预览组件封装与使用
Jul 13 #Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 #Javascript
小程序实现悬浮搜索框
Jul 12 #Javascript
小程序实现搜索框功能
Mar 26 #Javascript
iview的table组件自带的过滤器实现
Jul 12 #Javascript
es6中比较有用的7个技巧小结
Jul 12 #Javascript
You might like
php获取post中的json数据的实现方法
2011/06/08 PHP
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
php记录代码执行时间(实现代码)
2013/07/05 PHP
Zend Framework教程之Zend_Config_Ini用法分析
2016/03/23 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
javascript 闭包疑问
2010/12/30 Javascript
让人印象深刻的10个jQuery手风琴效果应用
2012/05/08 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
3个可以改善用户体验的AngularJS指令介绍
2015/06/18 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
在微信小程序中使用图表的方法示例
2019/04/25 Javascript
JS实现轮播图效果
2020/01/11 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
Python文件与文件夹常见基本操作总结
2016/09/19 Python
Python WXPY实现微信监控报警功能的代码
2017/10/20 Python
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
Python 中Pickle库的使用详解
2018/02/24 Python
python3实现绘制二维点图
2019/12/04 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
个人应聘自我评价分享
2013/11/18 职场文书
原材料检验岗位职责
2014/03/15 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
解除同居协议书
2015/01/29 职场文书
人事主管岗位职责
2015/02/04 职场文书
小学运动会加油稿
2015/07/22 职场文书
离婚民事起诉状
2015/08/03 职场文书
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers