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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序利用Canvas绘制图片和竖排文字详解

    微信小程序利用Canvas绘制图片和竖排文字详解

    前言 闲暇时间抽个空写了个三国杀武将手册的小程序,中间有个需求设计的是合成武将皮肤图.竖排的武将姓名.以及小程序码,然后提供保存图片到相册,最终让用户可以分享到朋友圈或其他平台.合成图片应该按照 Canvas 的文档来做都没什么问题,主要是有个竖排文字的需求,这里和大家分享一下. 正文 首先放一张最终保存到相册的图片吧~ 自我感觉良好,至少达到了我自己的预期吧~~~ 下面让我们一步一步来看看如何实现的吧. 整个图片分为三个部分: 武将图片 小程序码 武将文字信息 先来看一下 wxml 里面的代码

  • 微信小程序如何调用图片接口API并居中显示

    微信小程序如何调用图片接口API并居中显示

    写完调用天气接口的demo之后,小程序调用天气接口并且渲染在页面,顺便再调用了一下美图的接口API: 美图API url wxml: <view class='imagesize' wx:for="{{list}}" wx:key="index"> <image src="{{list.img}}" class='in-image' > </image> </view> js: Page({ dat

  • 微信小程序上传图片到php服务器的方法

    本文实例为大家分享了微信小程序上传图片到php服务器的具体代码,供大家参考,具体内容如下 js代码如下 submitPhoto(){ var that = this; wx.uploadFile({ url: 'http://xxx.cn/upload.php', //仅为示例,非真实的接口地址 filePath: imagePath, name: 'imgfile', success: function (res) { var data = JSON.parse(res.data);; con

  • 微信小程序实现富文本图片宽度自适应的方法

    微信小程序实现富文本图片宽度自适应的方法

    引言:在微信小程序里,比如商品展示页面的商品详情会有图片展示,PC端设置的商品详情是PC端的宽度,所以在小程序里图片会显示不全,这时就应该做相应的处理,使小程序里图片显示正确 思路 把图片的宽度改为手机屏幕对应的宽度 微信小程序需要知道的知识 需要知道微信小程序里有自己的宽度标准,单位为rpx: 针对所有不同尺寸的浏览器,微信小程序里规定屏幕宽为750rpx: 解决 WXML <view class='html_detail'> <rich-text nodes='{{artical}}

  • 详解微信小程序文件下载--视频和图片

    文件下载(遇到的坑) 1.要区分下载的内容是什么 0.1  图片下载wx.saveImageToPhotosAlbum(Object object) 0.2  视频下载wx.saveVideoToPhotosAlbum(Object object) 以上算是两大类 2.路径问题 图片文件路径,可以是临时文件路径或永久文件路径,不支持网络图片路径 不支持怎么处理需要使用 DownloadTask wx.downloadFile(Object object) 下载文件资源到本地.客户端直接发起一个

  • 关于微信小程序获取小程序码并接受buffer流保存为图片的方法

    前言 昨天因为小程序功能要获取小程序程序码,看了微信文档爬了好多坑.(留一下记录以防后面被坑) 操作 因为我获取到了微信那里的图片的图片流一直不知道怎么处理,今天总算找到相关文档,解决了.因为数据流不能直接传给前端,只好把buffer流转成图片保存在服务器上,没办法啊~ 废话不多说上代码 public static string Api_Post(string postUrl, string postData, WebHeaderCollection header = null,bool isP

  • 微信小程序简单的canvas裁剪图片功能详解

    小程序miniso的一个发布内容截图功能,话不多,先上代码 wxml文件: <view class="cut-1-1 t-c {{cutSelect == 1? 'cut-select':''}}" data-cut="1" bindtap="selectCutType">1:1</view> <view class="cut-3-4 t-c {{cutSelect == 2? 'cut-select':'

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

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

    先看效果,实现一个图片左右摇动,在一般的H5宣传页,商家活动页面我们会看到这样的动画,小程序的动画效果不同于css3动画效果,是通过js来完成的,其实步骤很简单,首先创建动画实例,再调用实例来描述动画,最后导出即可. 先看效果如下: 简单的参考代码: wxml: <image class='img' src="http://intmote.com/picture/gift.png" animation="{{animation}}"></image

  • 微信小程序 图片宽高自适应详解

    微信小程序 图片宽高自适应 1.以前将小程序图片宽度设置为屏幕宽度: imageLoad: function () { this.setData({ imageWidth: wx.getSystemInfoSync().windowWidth }) } 2.现在: .imgClass{ width: 100vw; } 解析: CSS3引入的"vw"和"vh"基于宽度/高度相对于窗口大小 "vw"="view width"&qu

  • 微信小程序 图片上传实例详解

    微信小程序 图片上传实例详解

    一.了解wx.chooseImage(OBJECT) 二.代码编程 在pages文件里面创建uploadimg文件夹 1.编写页面结构:uploadimg.wxml <view class="container" style="padding:1rem;"> <button type="primary"bindtap="chooseimage">获取图片</button> <image

  • 微信小程序 动态传参实例详解

    微信小程序 动态传参实例详解

    微信小程序 动态传参实例详解 在微信小程序的开发过程中经常会用到动态传参,比如根据某一页面传参的不同,加载不同的新的页面.接下来介绍下如何实现. 上一篇博客中介绍了如何用wx:for循环显示数组,一般情况下我们要实现的功能是点击不同的元素进入不同的页面,比如在另一个页面加载某个元素的详细信息. 跳转这里采用navigator跳转,在navigator跳转的链接上将参数加上去: index.wxml(根据点击页面的不同传递参数) <view class="item" wx:for=

  • 微信小程序 滚动选择器(时间日期)详解及实例代码

    微信小程序 滚动选择器(时间日期)详解及实例代码

    微信小程序  滚动选择器(时间日期)详解 微信小程序自己封装了很多控件,用起来确实很方便,如果这是Android里面,还需要自己去定义,不废话,效果图: 一起来看看怎么实现的呢?看完你应该就该说,尼玛,这就行啦-. 这个效果呢,要用到picker组件,动画从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器. 看下相应的属性: 具体的来看看代码,布局: <view class="section" > <

  • 微信小程序组件之srcoll-view的详解

    微信小程序组件之srcoll-view的详解

    微信小程序组件之srcoll-view的详解 今天记录一下scroll-view学习中遇到的问题及解决办法,希望能对其他同学有所帮助. 首先展示一下想达到的效果.↓ vertical scroll实现上下滚动,horizontal实现左右滚动. 先附上wxml的代码. <view class="container"> <view> <text>vertical scroll</text> <scroll-view scroll-y

  • 微信小程序数字滚动插件使用详解

    微信小程序数字滚动插件使用详解

    用es6语法方式写了个微信小程序小插件–数字滚动: 效果图: wxml页面布局代码: <!--pages/main/index.wxml--><view class="animate-number"> <view class="num num1">{{num1}}{{num1Complete}}</view> <view class="num num2">{{num2}}{{num2Co

  • 微信小程序  滚动选择器(时间日期)详解及实例代码

    微信小程序  滚动选择器(时间日期)详解及实例代码

    微信小程序  滚动选择器(时间日期)详解 微信小程序自己封装了很多控件,用起来确实很方便,如果这是Android里面,还需要自己去定义,不废话,效果图: 一起来看看怎么实现的呢?看完你应该就该说,尼玛,这就行啦-. 这个效果呢,要用到picker组件,动画从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器. 看下相应的属性: 具体的来看看代码,布局: <view class="section" > <

  • 微信小程序 本地数据存储实例详解

    微信小程序 本地数据存储实例详解 前言 如果您在看此文章之前有过其他程序的开发经验,那一定会知道一般例如安卓或者苹果的原生APP都提供了本地的存储功能,甚至可以使用sqlite数据库来做存储.可是微信的小程序框架基于微信本身,其实际运行环境只是在浏览器里面,所以不会提供那么丰富的数据存储实力.但html5开始已经可以在浏览器里面存储数据,好在微信的小程序给这个功能封装好了,这样我们可以使用数据存储. 每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStor

  • 微信小程序url与token设置详解

    微信小程序url与token设置详解

    微信小程序url与token设置详解 新浪云应用sae的代码里创建一个weixin.php文件,写入以下代码 define("TOKEN","myToken");// 后台填写的token,在微信公众平台启用 $wechatObj = new wechatAPI(); $wechatObj->isValid(); class wechatAPI { public function isValid()//验证微信接口,验证函数以外的代码和微信公众号开发token

随机推荐