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


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 相关文章推荐
[原创]图片分页查看
Aug 28 Javascript
JS实现图片翻书效果示例代码
Sep 09 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
javascript中的五种基本数据类型
Aug 26 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
详解Angular5路由传值方式及其相关问题
Apr 28 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 Javascript
微信开发之微信jssdk录音功能开发示例
Oct 22 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
Mar 07 Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 Javascript
React列表栏及购物车组件使用详解
Jun 28 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
windows xp下安装pear
2006/12/02 PHP
最新用php获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
php实现telnet功能示例
2014/04/08 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
Symfony2创建页面实例详解
2016/03/18 PHP
php使用escapeshellarg时中文被过滤的解决方法
2016/07/10 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
js直接编辑当前cookie的脚本
2008/09/14 Javascript
JS中Iframe之间传值及子页面与父页面应用
2013/03/11 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
基于jQuery实现仿百度首页选项卡切换效果
2016/05/29 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
NodeJS处理Express中异步错误
2017/03/26 NodeJs
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
wxpython 学习笔记 第一天
2009/02/09 Python
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
python写日志文件操作类与应用示例
2019/07/01 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
秋季婚礼证婚词
2014/01/11 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
读书之星事迹材料
2014/05/12 职场文书
个人收入证明范本
2014/09/18 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
教师个人年度总结
2015/02/11 职场文书
预备党员考察意见范文
2015/06/01 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电